最近看了一些代码上的东西，偶然看到了 Flutter，感觉他的代码很高级，而且调试起来很简单，所以想来尝试一下。我计划以一个图片浏览器为出发点来开始这个语言的学习，希望能继续下去。

配置 Flutter 环境

参考Flutter很容易配置好 linux 下面的环境。

检测安装

在配置过程中，可能会遇到 android-license 的问题，此时执行lutter doctor --android-licenses即可

安装好后，执行 Flutter doctor，可以得到

Flutter doctor

就可以开始下一步的编写了。

开始新项目

我习惯用 vscode 来编写我的代码，此时，我们可以执行命令Flutter new project

new proj

便可构建出一个模板项目

temple hello

我们的主要逻辑也是在这个main.dart中执行的，按下 F5 我们便可以得运行。

debug

得到运行结果：

有状态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

无状态页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:flutter/material.dart';
import '../generated/l10n.dart';

class SettingsWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).setPage),
      ),
      body: Center(
        child: Text(S.of(context).setPageDesc),
      ),
    );
  }
}

导航页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class NaviBar extends StatefulWidget {
  @override
  NaviBar({Key key, this.title}) : super(key: key);
  final String title;
  _NaviBarState createState() => _NaviBarState();
}

class _NaviBarState extends State<NaviBar> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    TestWidget('set1'),
    TestWidget('set2'),
    SettingsWidget()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text(S.of(context).home)),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), title: Text(S.of(context).favorite)),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), title: Text(S.of(context).settings))
        ],
      ),
    );
  }

  void onTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}