我将带领大家尝试编写一个 Flutter 应用，感受一下 Flutter 开发的语法特点和运行效率。

Flutter 应用运行起来比 RN 流畅、编译快、热加载快，所以开发和调试的效率非常高。本文将着重给大家讲解下 Flutter 官方默认创建的应用，然后编写一个简单的 Flutter 尝鲜小应用。

本文将主要介绍：

• 用 Flutter 创建一个默认应用
• Flutter 默认应用的分析讲解
• Flutter 编写一个小 Demo

用 Flutter 创建一个默认应用

本文的开发工具 IDE 用的是 Visual Studio Code，当然也可以使用 Android Studio 进行开发。关于用 Visual Studio Code 创建新的 Flutter 项目前面讲过，这里就不再重复讲解了。

默认新建的 Flutter 项目都是这个简单的实例，运行效果如下图所示：

点击 + 号 FloatingActionButton，中间的 Text Widget 进行累加更新数字统计计数。整体功能还是很简单的，主要涉及内容为控件点击事件、Text Widget 的显示、 setState(() {...}) 更新内容等。

那么接下来通过代码结合注释讲解方式来看下这个官方实例 main.dart 的实现流程：

import 'package:flutter/material.dart';//main.dart为应用入口dart类，里面void main()方法为入口函数// 这里是lambda缩略写法，完整写法为下面这种：// void main(){//   return runApp(MyApp());// }void main() => runApp(MyApp());class MyApp extends StatelessWidget {  // 这个Widget是应用的根布局，类似于页面容器  //构建搭建页面  @override  Widget build(BuildContext context) {    //入口页使用MaterialApp这个页面脚手架    //可以快速构建页面    //MaterialApp这个脚手架默认自带顶部ToolBar、路由、主题、国际化等等配置    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        // 在这里我们可以配置应用全局主题，后面主题课程部分会详细讲解        //        // 我们可以通过flutter run命令来运行程序，会看到蓝色状态栏和标题栏        // 通过 primarySwatch属性来配置状态栏和标题栏颜色        primarySwatch: Colors.green,      ),      // 设置启动页面Widget      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }}// 继承StatefulWidget，有状态管理class MyHomePage extends StatefulWidget {  // 这个是有参构造方法，用来传值的，这里我们不管  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  //重写创建状态  @override  _MyHomePageState createState() => _MyHomePageState();}  // 自定义创建状态管理，继承自Stateclass _MyHomePageState extends State {  //声明变量临时存储次数  int _counter = 0;  // 定义方法来累加次数  void _incrementCounter() {    setState(() {      //setState里用于刷新UI和绑定数据      _counter++;    });  }  @override  Widget build(BuildContext context) {    // 这个方法每次调用 setState 都会调用    //    // Flutter框架已经帮我们优化了这部分，所以当我们需要刷新状态的时候不用担心性能问题    // 这个用来构建页面具体布局，这里使用了Scaffold脚手架    // 里面包含了AppBar、body、bottomNavigationBar、floatingActionButton等    return Scaffold(      appBar: AppBar(        // 通过配置AppBar属性来控制显示效果，这里通过title来设置标题内容        title: Text(widget.title),      ),      body: Center(        // body部分用Center Widget布局来加载Widget布局内容，子控件居中排列        child: Column(          // Column是一个纵向列布局，子控件纵向排列          mainAxisAlignment: MainAxisAlignment.center,          children: [            //子控件，Text Widget用来显示文字内容            Text(              'You have pushed the button this many times:',            ),            // 动态绑定数据            Text(              '$_counter',              style: Theme.of(context).textTheme.display1,            ),          ],        ),      ),      // 浮动+号按钮      floatingActionButton: FloatingActionButton(        // 设置点击事件，执行_incrementCounter方法累加计数        onPressed: _incrementCounter,        // 设置长按提示的信息        tooltip: 'Increment',        // 设置图标        child: Icon(Icons.add),      ),    );  }}

通过 primarySwatch 属性来配置状态栏和标题栏颜色效果如下图：

一般入口文件用 MaterialApp 脚手架构建，其它页面可以不使用。

我们看下 MaterialApp 脚手架构造方法都提供了哪些可配置的属性功能：

const MaterialApp({    Key key,    this.navigatorKey,    this.home,    this.routes = const {},    this.initialRoute,    this.onGenerateRoute,    this.onUnknownRoute,    this.navigatorObservers = const [],    this.builder,    this.title = '',    this.onGenerateTitle,    this.color,    this.theme,    this.darkTheme,    this.locale,    this.localizationsDelegates,    this.localeListResolutionCallback,    this.localeResolutionCallback,    this.supportedLocales = const [Locale('en', 'US')],    this.debugShowMaterialGrid = false,    this.showPerformanceOverlay = false,    this.checkerboardRasterCacheImages = false,    this.checkerboardOffscreenLayers = false,    this.showSemanticsDebugger = false,    this.debugShowCheckedModeBanner = true,  })

再看下 Scaffold 脚手架构造方法给我们提供的可配置的属性功能：

const Scaffold({    Key key,    this.appBar,    this.body,    this.floatingActionButton,    this.floatingActionButtonLocation,    this.floatingActionButtonAnimator,    this.persistentFooterButtons,    this.drawer,    this.endDrawer,    this.bottomNavigationBar,    this.bottomSheet,    this.backgroundColor,    this.resizeToAvoidBottomPadding,    this.resizeToAvoidBottomInset,    this.primary = true,    this.drawerDragStartBehavior = DragStartBehavior.down,  })

具体这些属性作用，大家可以大致有所了解，这里不再详细解释，后面课程会讲解。

看到这里，你觉得怎么样，Flutter 实现一个页面就是这样简单的。

用 Flutter 编写一个小 Demo

接下来我们动手自己写一个简单的页面，实现页面显示一段文字加一张图片，点击按钮切换文字内容的小 Demo：

import 'package:flutter/material.dart';void main() {  return runApp(ShowApp());}class ShowApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.green,      ),      home: ShowAppPage(),    );  }}class ShowAppPage extends StatefulWidget {  @override  _ShowAppPageState createState() {    return _ShowAppPageState();  }}class _ShowAppPageState extends State {  String title = '春天的脚步近了，我们应该更加青春有朝气';  bool change = false;  void _changeTextContent() {    setState(() {      //setState里用于刷新UI和绑定数据      title = change ? "这个图片很好看，描述了春天的气息" : "春天的脚步近了，我们应该更加青春有朝气";      change = !change;    });  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('春天的气息'),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: [            Padding(              padding: EdgeInsets.all(10),              child: Image.network(                  'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=eaad8629b0096b63951456026d5aec21/342ac65c103853431b19c6279d13b07ecb8088e6.jpg'),            ),            // 动态绑定数据            Padding(              padding: EdgeInsets.all(10),              child: Text(                '$title',                style: Theme.of(context).textTheme.title,              ),            ),            RaisedButton(              onPressed: _changeTextContent,              child: Text('点击更换内容'),            ),          ],        ),      ),    );  }}

用 flutter run 编译运行到真机或者模拟器上，运行效果如下图所示：

怎么样，效果是不是很好？构建这一个页面，对于其他语言可能要花费比较多的工作量，而 Flutter 构建的非常快，运行体验也很流畅。

总结

本文主要是给大家实践用 Flutter 搭建一个小应用 Demo，给大家一个入门的印象。俗话说熟能生巧，我们不但要理解理论知识，也需要动手实践，才能够更好地进行深入的研究和开发。建议如下：

• 将本文内容动手敲一遍，亲身体验 Flutter 的应用编写和运行的流畅度。
• 先了解 Flutter 的入口文件和入口函数，以及简单了解 MaterialApp、Scaffold 脚手架的概念。

---

? 彩蛋

Flutter 现已进入 GitHub Top 20 软件库！通过专栏《Flutter：从入门到实践》，希望大家可以对 Flutter 进一步了解，也希望大家有所收获：入门 Flutter，掌握未来技术主流的主动权！

即日起至 2 月 14 日，订阅本专栏将享受限时特惠！欢迎你加入进来，和我一起开启这段 Flutter 学习之旅！

点击阅读原文，查看更多试读章节