运行第一个Flutter App

前文

1. 运行第一个Flutter App
2. Flutter基础Widgets-Text
3. Flutter可滚动Widgets-ListView
4. Flutter主题切换之flutter redux
5. Flutter插件开发之APK自动安装
6. Flutter 开发一个 GitHub 客户端OpenGit及学习总结

文本是在 AndroidStudio 开发工具中开发 Flutter 的。

我的博客

运行第一个Flutter App

1：启动AndroidStudio，选择Start a new Flutter project。

2：选择Flutter Application。

3：配置信息。

4：设置包名。

5：运行flutter_hello_world App。

分析lib/main.dart

1： Flutter程序入口。

Flutter程序入口是一个main()函数：

void main() => runApp(MyApp());
复制代码

在main()函数中调用runApp()函数，传入一个MyApp()widget的参数。

2：建立一个无状态的部件（Stateless widget）

有状态的部件和无状态部件的区别主要在于状态的改变：

• Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 全部的值都是最终的。

• Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少须要两个类:

  1. 一个 StatefulWidget类。

  2. 一个 State类。 StatefulWidget类自己是不变的，可是 State类在widget生命周期中始终存在。

MyApp()是一个无状态的部件，全部的界面UI都是在build()函数中处理，以下面代码所示

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
复制代码

在build()函数中引用了MaterialApp()widget，主要实现了Material风格的相关部件，包括标题、主题、主界面。

2：建立一个有状态的部件（Stateful widget）

MyHomePage()是一个有状态的部件，除了建立State类以外几乎没有其余任何东西，以下面代码所示

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
复制代码

3：建立_MyHomePageState()类

该类持有MyHomePage() widget的状态，而且该应用程序的大部分代码都在该类中。界面主要展现标题栏、居中展现两行文本以及悬浮按钮，以下面代码所示

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}
复制代码

4：添加交互

与有状态的部件进行交互，主要是经过setState()函数，当调用该函数时，会触发build()函数刷新，以下面代码所示

setState(() {
});
复制代码

用户能够经过点击悬浮按钮，来刷新点击的次数，以下面代码所示

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}
复制代码

这部份内容就不深究了，简单了解一下就行