Flutter入坑指南：编写第一个Flutter应用

这是 Flutter 系列文章的第二篇，关于 Flutter 的相关学习文章后面还有不少，若是您喜欢的话，请持续关注 ，谢谢！

Flutter 是 Google 推出的移动端跨平台开发框架，使用的编程语言是Dart，是继 React Native 以后开发者对跨平台解决方案的又一探索，追其根源，本质上以移动端的统一为走向，缩短人力、物力、时间！这是开发者、企业的共同目标。本篇咱们以一个简单的 Flutter 应用，为你们讲解 Flutter 应用的开发流程。

咱们本篇的主旨是让用户对 Flutter 应用的建立、调试、打包、安装等过程有一个直观的认识。在你们的记忆中是否是学习一门语言，都是以 Hello World 开始的，Flutter 也不例外，今天咱们以一个 Hello Flutter 应用开启咱们的第一次～，界面很是简单，主要就是界面上展现一个计数器，随着用户的点击累加。

建立工程

在建立项目以前，你须要配置开发环境，若是你尚未完成此操做，请移步开发环境搭建，若是已完成，请跳过，这里咱们经过Android Studio编译器来建立工程。

1. 选择 File>New Flutter Project
2. 选择 Flutter application 做为 project 类型, 而后点击 Next
3. 输入项目名称 (如 flutter-app)，存储路径，Flutter SDK 路径选择, 而后点击 Next
4. 建立包名（小写、字母、数字、下划线），点击Finish，
5. 等待 Android Studio 建立项目（第一次可能须要点时间）

1.工程目录结构

1. android Android 平台相关代码
2. ios IOS 平台相关代码
3. build 项目编译产生的目录，此时不须要关心（后期编译的安装包输出在该目录下）
4. lib 跨平台代码，也是 Flutter 项目主要关心的目录
5. test 测试相关代码
6. pubspec.yaml 项目描述文件，至关于 NodeJs 项目的 package.json,里面包含了项目的描述信息以及所须要的依赖的库

2.Flutter工程入口文件——lib/main.dart

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
        body: new Center(
          child: new Text('Hello Flutter'),
        ),
      ),
    );,
    );
  }
}
复制代码

3.运行上述代码，效果以下：

分析

• 默认示例建立一个Material APP。Material是一种标准的移动端和web端的视觉设计语言。Flutter提供了一套丰富的Material widgets。
• main 函数（执行入口）使用了（=>）符号，这是Dart中单行函数或方法的简写。
• 该应用程序继承 StatelessWidget ，这说明应用自己也是一个 Widget。
• Scaffold 是Material library中提供的一个widget，它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。
• 从上能够看出Widget的主要工做是提供一个build()方法来描述如何根据其余较低级别的widget来显示本身。
• 本事例中的body的widget树中包含了一个Center widget，Center widget又包含了一个Text子widget。Center widget能够将其子widget树对齐到屏幕中心。

修改工程

修改工程使其按照咱们的设想变动，在屏幕上添加一个展现文本控件和一个可点击按钮，所以咱们须要按照以下步骤修改入口文件：lib/main.dart。

1.添加一个有状态的部件（Stateful widget）

这里咱们须要明白如下几个概念：

• Stateless widgets 是不可变的，这意味着它们的属性不能改变--全部的值都是最终的。
• Stateful widgets 持有的状态可能在widget生命周期中发生变化。实现一个stateful widget至少须要两个类：
  1. 一个StatefulWidget类。
  2. 一个State类。StatefulWidget类自己是不可变的，可是 State 类在widget生命周期中始终存在。

在这一步，添加一个有状态的widget--MyHomePage，它建立其State类_MyHomePageState。这里咱们将MyHomePage做为一个widget添加到现有的无状态widget--MyApp内部。

1. 建立一个State类，添加到main.dart的底部：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
   
     // This widget is the home page of your application. It is stateful, meaning
     // that it has a State object (defined below) that contains fields that affect
     // how it looks.
   
     // This class is the configuration for the state. It holds the values (in this
     // case the title) provided by the parent (in this case the App widget) and
     // used by the build method of the State. Fields in a Widget subclass are
     // always marked "final".
   
     final String title;
   
     @override
     _MyHomePageState createState() => new _MyHomePageState();
   }
   复制代码

2. 添加 _MyHomePageState 类，该应用程序的大部分逻辑和状态管理代码都在该类中，这个类保存屏幕上用户点击的次数，随着用户的点击，次数不断增长，且展现在界面上，代码以下：

   class _MyHomePageState extends State<MyHomePage> {
   	int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) { 
       return new Scaffold(
         appBar: new AppBar(
           child: new Column(
             mainAxisAlignment: MainAxisAlignment.center,
             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.
       );
     }
   }
   复制代码

3. 替换MyApp中的build方法内部home参数为新定义的MyHomePage widget，代码以下：

   class MyApp extends StatelessWidget {
     // This widget is the root of your application.
     @override
     Widget build(BuildContext context) {
       return new MaterialApp(
         title: 'Welcome to Flutter',
         theme: new ThemeData(
       primarySwatch: Colors.green,//变动主题样式
     ),
         home: new MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   复制代码

4. 重启应用程序。模拟器上的行为应该变动以下，展现一个计数器和按钮，点击按钮，文本计数增长（这里样式作了下调整），效果以下：

   

5. 修改界面代码，样式，保存后界面数字并无从零开始，这说明热重载与重启的区别，它只是单纯的改变相应的变化，State的状态会持续保存。

到此咱们应用就改造完毕！代码很简单，咱们这里主要想让读者明白的是建立一个Flutter应用的流程、组成部分和一些简单配置。

调试（debug）

一种采用debug模式调试，中止当前应用，点击顶部工具栏Debug main.dart 小按钮，启动应用，你能够在您须要监测代码处像原生同样打个断点，这里同原生并没有两样，不作详细讲解。 另外一种log日志输出方式调试：

debugPrint("message info ...")
复制代码

这里只简单介绍下，不是本章的重点，此处不作详细分析，更多的调试方法读者能够根据须要查看https://flutter.io/debugging/ 进一步学习。

获取apk安装包

应用通过运行、测试，最后确定须要安装到真机上，所以须要打包apk分发给用户使用。以下咱们将分析Flutter如何进行项目打包（Android）。

1. 查看android包下的清单配置文件AndroidManifest.xml。这是个模版生成文件，用户可根据须要进行修改；
2. 构建文件build.gradle,这里同上同样也可作一些配置，好比说自动化签名配置，资源压缩，代码混淆配置等等；
3. 启动图标的替换；
4. 编译apk。执行以下命令flutter build apk，输出apk安装包到build/app/outputs/apk/release/app-release.apk;
5. 安装，在根目录下执行flutter install就能够安装这个apk了。

总结

阅读完上述步骤我想您在下面几个方面会有深刻的思考：

1. 从头开始建立一个Flutter应用。
2. 编写Dart代码。
3. 使用热重载加快开发周期。
4. 一个有状态的widget建立过程和概念。
5. 如何打包和调试app

对于IOS的开发，读者能够看https://flutter.io/ios-release/，这里就再也不详细描述了。好吧到这里您的第一个Flutter应用应该完成了吧。若是遇到问题能够留言咱们一块儿讨论，谢谢！