编写第一个Flutter App

运行Demo

打开Android Studio菜单项选择 Start a new Flutter project ，进入选项选择默认即可。

进入项目把 gradle 配置镜像源，需要把 google() 和 jcenter 替换成：

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }

然后再进行gradle sync构建项目。

构建好可以在物理机或者虚拟机运行App了。

fltter project项目讲解

|flutter app
--|android/ # Android 环境源码
--|ios/ # iOS 环境源码
--|lib/ # 主要业务源码，我们重心在这开发
--|test/ # 测试环境
--|.gitignore # git上传忽略
--|.metadata # flutter元数据
--|.packages # 拉取依赖包信息
--|pubspec.lock # 依赖包锁
--|pubspec.yaml # 依赖说明

Hello World

删除 lib/main.dart 所有内容，并添加下面代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

如果要格式化代码在右键单击Dart代码，然后选择 Reformat Code with dartfmt 。

从上述一段代码来看，风格倒是和现在主流编程风格差不多，都是面向对象编程过程。

• void main() => runApp(MyApp()); 是程序进来第一步执行的函数，这个函数是 MyApp()
• MyApp() 继承 StatelessWidget 方法并且注解解释重写该方法。
• 返回是 MaterialApp widget 组件方法信息。

在Flutter设计理念是：一切皆为组件，即widget。

最小组件

根据上面描述的代码完全可以精简成最少的代码运行App：

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
          textAlign:TextAlign.right,
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

理解实例

在 Android Studio 新建项目里面包含个简单的项目，来大概了解下项目运行过程：

// 导入 UI 包，Material是 Google Android 特色 UI 风格
import 'package:flutter/material.dart';
 
// 应用入口，Main方法 => 类似 es6 的箭头函数，方法同样可以写成下面一样
void main() => runApp(MyApp());
 
//void main() {
//  runApp(MyApp())
//}
 
/**
* 应用结构
* MyApp 继承 `StatelessWidget`这个类，并且重写相关方法
*/
class MyApp extends StatelessWidget {
  // 应用程序根节点
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是 Material库中提供的Flutter APP框架，
    // 通过它可以设置应用的名称、主题、语言、首页及路由列表等。
    // MaterialApp 也是一个 widget。
    return MaterialApp(
      // 应用名称
      title: 'Flutter Demo',
      // 程序风格 蓝色
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 程序首页 并且含有`title`参数
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
/**
* 首页页面
* 该组件为 状态管理组件，意味着包含状态值相关业务
*/
class MyHomePage extends StatefulWidget {
  // 接受参数
  MyHomePage({Key key, this.title}) : super(key: key);
 
  // 定义标题，并且未常量，不可再次赋值
  final String title;
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
/**
* MyHomePage 继承 StatefulWidget 其中的一个`State`状态类，该类用于程序监听状态来实现程序交互
*/
class _MyHomePageState extends State<MyHomePage> {
 
  // int 类型 的变量 `_counter` 初始化为 0
  int _counter = 0;
 
  // 叫`_incrementCounter`方法
  void _incrementCounter() {
    setState(() {
      // 如果触发`_incrementCounter`方法就自增`_counter`
      _counter++;
    });
  }
 
  // 构建 UI 界面
  @override
  Widget build(BuildContext context) {
    // Scaffold 是Material库中提供的页面脚手架，它包含导航栏和Body以及FloatingActionButton。
    return Scaffold(
      // 导航栏
      appBar: AppBar(
        // 导航栏标题 参数填入 上面`MyHomePage`带进来的参数
        title: Text(widget.title),
      ),
      // 程序正文，内容居中
      body: Center(
        // 布局组件 Column的作用是将其所有子widget沿屏幕垂直方向依次排列
        child: Column(
          // 控制主轴方向为居中
          mainAxisAlignment: MainAxisAlignment.center,
          // 子类组件，以 list 形式展示
          children: <Widget>[
            // 输出文本内容
            Text(
              'You have pushed the button this many times:',
            ),
            // 输出文本内容，`$+变量名`可以在字符串中显示，并且style定义输出字符串风格
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      // 页面右下角圆形按钮
      floatingActionButton: FloatingActionButton(
        // 点击按钮触发
        onPressed: _incrementCounter,
        // 提示，长按按钮出现悬浮窗提示字段
        tooltip: 'Increment',
        // 渲染加号的图标
        child: Icon(Icons.add),
      ),
    );
  }
}

当右下角的floatingActionButton按钮被点击之后，会调用 _incrementCounter ，在 _incrementCounter 中，首先会自增 _counter 计数器（状态），然后 setState 会通知Flutter框架状态发生变化，接着， Flutter 会调用 build 方法以新的状态重新构建UI，最终显示在设备屏幕上。

尝试编写一个App

从编写这篇博文就有个写个App的计划，大概是Flutter功能展示方向的App，相信在Github有了一大堆轮子项目，且当对我来说是一个锻炼技术的项目吧，希望在这个项目过程中能够给自己带来App开发思考和设计理念。

在编写项目有必要了解下 Dart 语言和 Flutter 的规范：

Dart 文档：https://www.dartlang.org/guides/language/language-tour

Flutter 规范：https://github.com/alibaba/flutter-go/blob/develop/Flutter_Go%20%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md

上面显示的是目前正在编写的 Flutter Demo App ，目前就简单的做了下，后面日子没事添加一些新的页面并且解释编写过程。

项目代码地址： Github Hi-Flutter

参考教程： Flutter Codelabs

可以跟着教程了解 Flutter 编写 App 过程，这里面包括页面编写、状态管理组件使用、页面路由等相关知识，结合文档掌握更快，在编写App我会把遇到的问题和解决问题分享到博客上。