Flutter入门三部曲(1) - 基础认识

export PUB\_HOSTED\_URL=https://pub.flutter-io.cn

export FLUTTER\_STORAGE\_BASE\_URL=https://storage.flutter-io.cn

export PUB\_HOSTED\_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/

export FLUTTER\_STORAGE\_BASE\_URL: https://mirrors.sjtug.sjtu.edu.cn/

flutter create flutter\_start

- android //生成的android目录。里面是根据脚本生成的android项目

- ios //同上，ios项目

- lib //这个目录下面是运行的代码

  - main.dart //代码文件

- test //测试文件

 - widget\_test.dart //测试代码

- pubspec.yaml //项目的配置文件

#这里是配置项目的名字和说明

name: flutter\_start

description: A new Flutter project.



# 配置项目依赖

dependencies:

  flutter:

    sdk: flutte



  #这里是加入了ios的图标。默认情况下，ios手机上，使用ios的图标

  # The following adds the Cupertino Icons font to your application.

  # Use with the CupertinoIcons class for iOS style icons.

  cupertino\_icons: ^0.1.0



dev\_dependencies:

  flutter\_test:

    sdk: flutte



#项目的具体配置

flutter:

  # 将MaterialDesign的图标和字体使用并打包

  uses-material-design: true



  # 可以通过下面的方式，定义Assets内的文件

  # assets:

  #  - images/a\_dot\_burr.jpeg

  #  - images/a\_dot\_ham.jpeg

 

  # 像下面这样定义字体文件。每组字体文件都需要一个Family 

  # example:

  # fonts:

  #   - family: Schyle

  #     fonts:

  #       - asset: fonts/Schyler-Regular.ttf

  #       - asset: fonts/Schyler-Italic.ttf

  #         style: italic

  #   - family: Trajan Pro

  #     fonts:

  #       - asset: fonts/TrajanPro.ttf

  #       - asset: fonts/TrajanPro\_Bold.ttf

  #         weight: 700

images/my\_icon.png       // Base: 1.0x image

images/2.0x/my\_icon.png  // 2.0x image

images/3.0x/my\_icon.png  // 3.0x image

import 'package:flutter/material.dart';

//定义一个Main方法。Main方法中用简单RunApp就可以执行我们定义的Widget

void main() => runApp(new MyApp());

/\*

Flutter写成的都是UI主键。主要分 StatelessWidget 和 StageWidge

整体的入口可以写成 StatelessWidget

\*/

class MyApp extends StatelessWidget {

  //这个Widget就是我们App的最基层的Widget了

  //传入BuildContext给我们使用。

  @override

  Widget build(BuildContext context) {

//这样就可以直接使用Flutter为我们封装好的MaterialApp这个主题的了.从源码可以看到这个是个StatefulWidget

    //[home], [routes], [onGenerateRoute], or [builder] 这个主题下的这些方法不能都为空！！

    return new MaterialApp(

      title: 'Flutter Demo',

      //定义主题

      theme: new ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: new MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}



//statefulWidget ，因为Widget都是无状态的，所以如果需要有状态的话，`state`这个类来进行维持

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);



  final String title;



  @override

  \_MyHomePageState createState() => new \_MyHomePageState();

}



//flutter中状态的持有类

class \_MyHomePageState extends State<MyHomePage> {

  int \_counter = 0;



  void \_incrementCounter() {

    //这点和小程序很类似。调用setState进行状态同步和刷新。如果不调用这个方法，只是改变值，界面不会发生变化

    setState(() {

      \_counter++;

    });

  }



  //state中的`build`方法，会自动在`setState`方法后调用。

  @override

  Widget build(BuildContext context) {

  //Scaffold可以理解程相当于一个html 它的body就是主要的内容。

    //同时它其实是满足MD的。所以它还能提供对应的组件

    //比如 AppBar .Drawer floatingButton等等

    return new Scaffold(

      appBar: new AppBar(

        // Here we take the value from the MyHomePage object that was created by

        // the App.build method, and use it to set our appbar title.

        title: new Text(widget.title),

      ),

      //这里可以初步的看到，如果想要布局居中显示，可以先包裹一层`Center`

      body: new Center(

       //因为是竖直的布局，所以再次包裹一层Column

        child: new Column(

          //使用这个属性，让居中竖直排列

          mainAxisAlignment: MainAxisAlignment.center,

         //children中传入其他组件

          children: <Widget>[

            new Text(

              'You have pushed the button this many times:',

            ),

            new Text(

              '$\_counter',

              style: Theme.of(context).textTheme.display1,

            ),

          ],

        ),

      ),

      floatingActionButton: new FloatingActionButton(

        onPressed: \_incrementCounter,

        tooltip: 'Increment',

        child: new Icon(Icons.add),

      ), // This trailing comma makes auto-formatting nicer for build methods.

    );

  }

}