flutter 入门尝鲜

Flutter 官网

克隆 Flutter 仓库

git clone -b beta https://github.com/flutter/flutter.git

配置环境变量

vi .bash_profile  //设置环境变量
 

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH= flutter所在目录/flutter/bin:$PATH

source .bash_profile //生效

flutter doctor //下载SDK

安装 iOS 和安卓 IED

由于我之前已经安装过了不再演示

安装 vscode 插件

搜索 dart code 安装 dart 插件

快捷键 shift + command + p 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ 验证操作

选择模拟器

flutter devices //检查Android设备是否在运行

flutter emulators  //列出所有模拟器

To run an emulator, run 'flutter emulators --launch <emulator id>'.  //选择一个模拟器打开
To create a new emulator, run 'flutter emulators --create [--name xyz]'.  //创建一个新的模拟器打开

flutter emulators --launch iOS Simulator  //用苹果浏览器打开

运行效果图

编写您的第一个 Flutter App

第 1 步: 创建 Flutter app

在这个示例中，你将主要编辑 Dart 代码所在的 lib/main.dart 文件,

替换 lib/main.dart.
删除 lib / main.dart 中的所有代码，然后替换为下面的代码，它将在屏幕的中心显示“Hello World”.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

运行效果如下图

第 2 步: 使用外部包(package)

在这一步中，您将开始使用一个名为 english_words 的开源软件包，其中包含数千个最常用的英文单词以及一些实用功能.

您可以在 pub.dartlang.org 上找到 english_words 软件包以及其他许多开源软件包

pubspec 文件管理 Flutter 应用程序的 assets(资源，如图片、package 等)。在 pubspec.yaml 中，将 english_words（3.1.0 或更高版本）添加到依赖项列表，如下面高亮显示的行：
```
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0
```
在 Android Studio 的编辑器视图中查看 pubspec 时，单击右上角的 Packages get，这会将依赖包安装到您的项目。您可以在控制台中看到以下内容：
```
flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0
```
在 lib/main.dart 中, 引入 english_words, 如高亮显示的行所示:
```
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
```
在您输入时，Android Studio 会为您提供有关库导入的建议。然后它将呈现灰色的导入字符串，让您知道导入的库尚未使用（到目前为止）

使用 English words 包生成文本来替换字符串“Hello World”.

Tip: “驼峰命名法” (称为 “upper camel case” 或 “Pascal case” ), 表示字符串中的每个单词（包括第一个单词）都以大写字母开头。所以，“uppercamelcase” 变成 “UpperCamelCase”

进行以下更改, 如高亮部分所示:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          child: new Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

如图所示

State_less_ widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

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

一个 StatefulWidget 类。
一个 State 类。 StatefulWidget 类本身是不变的，但是 State 类在 widget 生命周期中始终存在.

在这一步中，您将添加一个有状态的 widget-RandomWords，它创建其 State 类 RandomWordsState。State 类将最终为 widget 维护建议的和喜欢的单词对。

添加有状态的 RandomWords widget 到 main.dart。它也可以在 MyApp 之外的文件的任何位置使用，但是本示例将它放到了文件的底部。RandomWords widget 除了创建 State 类之外几乎没有其他任何东西
```
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}
```
添加 RandomWordsState 类.该应用程序的大部分代码都在该类中，该类持有 RandomWords widget 的状态。这个类将保存随着用户滚动而无限增长的生成的单词对，以及喜欢的单词对，用户通过重复点击心形 ❤️ 图标来将它们从列表中添加或删除。

你会一步一步地建立这个类。首先，通过添加高亮显示的代码创建一个最小类
```
class RandomWordsState extends State<RandomWords> {
}
```
在添加状态类后，IDE 会提示该类缺少 build 方法。接下来，您将添加一个基本的 build 方法，该方法通过将生成单词对的代码从 MyApp 移动到 RandomWordsState 来生成单词对。

将 build 方法添加到 RandomWordState 中，如下面高亮代码所示
```
class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}
```

通过下面高亮显示的代码，将生成单词对代的码从 MyApp 移动到 RandomWordsState 中

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();  // 删除此行

    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text(wordPair.asPascalCase),
          child: new RandomWords(),
        ),
      ),
    );
  }
}

第 4 步: 创建一个无限滚动 ListView

在这一步中，您将扩展（继承）RandomWordsState 类，以生成并显示单词对列表。当用户滚动时，ListView 中显示的列表将无限增长。 ListView 的 builder 工厂构造函数允许您按需建立一个懒加载的列表视图。

向 RandomWordsState 类中添加一个 _suggestions 列表以保存建议的单词对。该变量以下划线（_）开头，在 Dart 语言中使用下划线前缀标识符，会强制其变成私有的。

另外，添加一个 biggerFont 变量来增大字体大小
```
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}
```

向 RandomWordsState 类添加一个 _buildSuggestions() 函数. 此方法构建显示建议单词对的 ListView。

ListView 类提供了一个 builder 属性，itemBuilder 值是一个匿名回调函数，接受两个参数- BuildContext 和行迭代器 i。迭代器从 0 开始，每调用一次该函数，i 就会自增 1，对于每个建议的单词对都会执行一次。该模型允许建议的单词对列表在用户滚动时无限增长。

添加如下高亮的行:

class RandomWordsState extends State<RandomWords> {
  ...
  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      // 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
      // 在偶数行，该函数会为单词对添加一个ListTile row.
      // 在奇数行，该行书湖添加一个分割线widget，来分隔相邻的词对。
      // 注意，在小屏幕上，分割线看起来可能比较吃力。
      itemBuilder: (context, i) {
        // 在每一列之前，添加一个1像素高的分隔线widget
        if (i.isOdd) return new Divider();

        // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
        // 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
        final index = i ~/ 2;
        // 如果是建议列表中最后一个单词对
        if (index >= _suggestions.length) {
          // ...接着再生成10个单词对，然后添加到建议列表
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }
}

对于每一个单词对，_buildSuggestions 函数都会调用一次 _buildRow。这个函数在 ListTile 中显示每个新词对，这使您在下一步中可以生成更漂亮的显示行

在 RandomWordsState 中添加一个 _buildRow 函数 :

class RandomWordsState extends State<RandomWords> {
  ...

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

更新 RandomWordsState 的 build 方法以使用 _buildSuggestions()，而不是直接调用单词生成库。更改后如下面高亮部分：

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random(); // 删除这两行
    return new Text(wordPair.asPascalCase);
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

更新 MyApp 的 build 方法。从 MyApp 中删除 Scaffold 和 AppBar 实例。这些将由 RandomWordsState 管理，这使得用户在下一步中从一个屏幕导航到另一个屏幕时，可以更轻松地更改导航栏中的的路由名称。

用下面高亮部分替换最初的 build 方法：
```
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}
```

运行效果

第 5 步: 添加交互

在这一步中，您将为每一行添加一个可点击的心形 ❤️ 图标。当用户点击列表中的条目，切换其“收藏”状态时，将该词对添加到或移除出“收藏夹”。

添加一个 _saved Set(集合) 到 RandomWordsState。这个集合存储用户喜欢（收藏）的单词对。在这里，Set 比 List 更合适，因为 Set 中不允许重复的值。

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _saved = new Set<WordPair>();

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

在 _buildRow 方法中添加 alreadySaved 来检查确保单词对还没有添加到收藏夹中。

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  ...
}

同时在 _buildRow() 中，添加一个心形 ❤️ 图标到 ListTiles 以启用收藏功能。接下来，你就可以给心形 ❤️ 图标添加交互能力了。

添加下面高亮的行:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
  );
}

重新启动应用。你现在可以在每一行看到心形 ❤️ 图标 ️，但它们还没有交互。

在 _buildRow 中让心形 ❤️ 图标变得可以点击。如果单词条目已经添加到收藏夹中，再次点击它将其从收藏夹中删除。当心形 ❤️ 图标被点击时，函数调用 setState() 通知框架状态已经改变。

添加如下高亮的行:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
    onTap: () {
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else {
          _saved.add(pair);
        }
      });
    },
  );
}

如图所示

第 6 步: 导航到新页面

在这一步中，您将添加一个显示收藏夹内容的新页面（在 Flutter 中称为路由(route)）。您将学习如何在主路由和新路由之间导航（切换页面）。

在 Flutter 中，导航器管理应用程序的路由栈。将路由推入（push）到导航器的栈中，将会显示更新为该路由页面。从导航器的栈中弹出（pop）路由，将显示返回到前一个路由。

在 RandomWordsState 的 build 方法中为 AppBar 添加一个列表图标。当用户点击列表图标时，包含收藏夹的新路由页面入栈显示。

提示: 某些 widget 属性需要单个 widget（child），而其它一些属性，如 action，需要一组 widgets(children），用方括号[]表示。

将该图标及其相应的操作添加到 build 方法中：

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

向 RandomWordsState 类添加一个 _pushSaved() 方法.
```
class RandomWordsState extends State<RandomWords> {
  ...
  void _pushSaved() {
  }
}
```
热重载应用，列表图标将会出现在导航栏中。现在点击它不会有任何反应，因为 _pushSaved 函数还是空的。
当用户点击导航栏中的列表图标时，建立一个路由并将其推入到导航管理器栈中。此操作会切换页面以显示新路由。

新页面的内容在在 MaterialPageRoute 的 builder 属性中构建，builder 是一个匿名函数。

添加 Navigator.push 调用，这会使路由入栈（以后路由入栈均指推入到导航管理器的栈）
```
void _pushSaved() {
  Navigator.of(context).push(
  );
}
```

添加 MaterialPageRoute 及其 builder。现在，添加生成 ListTile 行的代码。ListTile 的 divideTiles() 方法在每个 ListTile 之间添加 1 像素的分割线。该 divided 变量持有最终的列表项。

void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute(
      builder: (context) {
        final tiles = _saved.map(
          (pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();
      },
    ),
  );
}

builder 返回一个 Scaffold，其中包含名为“Saved Suggestions”的新路由的应用栏。新路由的 body 由包含 ListTiles 行的 ListView 组成; 每行之间通过一个分隔线分隔。

添加如下高亮的代码:

void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute(
      builder: (context) {
        final tiles = _saved.map(
          (pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();

        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Saved Suggestions'),
          ),
          body: new ListView(children: divided),
        );
      },
    ),
  );
}

如图所示

第 7 步：使用主题更改 UI

在这最后一步中，您将会使用主题。主题控制您应用程序的外观和风格。您可以使用默认主题，该主题取决于物理设备或模拟器，也可以自定义主题以适应您的品牌。

您可以通过配置 ThemeData 类轻松更改应用程序的主题。您的应用程序目前使用默认主题，下面将更改 primary color 颜色为白色。

通过如下高亮部分代码，将应用程序的主题更改为白色：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new RandomWords(),
    );
  }
}

总结

你已经编写了一个可以在 iOS 和 Android 上运行的交互式 Flutter 应用程序。在这个例子中，你已经做了下面这些事：

从头开始创建一个 Flutter 应用程序.
编写 Dart 代码.
利用外部的第三方库.
使用热重载加快开发周期.
实现一个有状态的 widget，为你的应用增加交互.
用 ListView 和 ListTiles 创建一个延迟加载的无限滚动列表.
创建了一个路由并添加了在主路由和新路由之间跳转逻辑
了解如何使用主题更改应用 UI 的外观.

flutter 入门尝鲜

Flutter 官网

克隆 Flutter 仓库

配置环境变量

安装 iOS 和安卓 IED

安装 vscode 插件

选择模拟器

运行效果图

编写您的第一个 Flutter App

第 1 步: 创建 Flutter app

第 2 步: 使用外部包(package)

第 3 步: 添加一个有状态的部件（Stateful widget）

第 4 步: 创建一个无限滚动 ListView

第 5 步: 添加交互

第 6 步: 导航到新页面

第 7 步：使用主题更改 UI

总结

相关帖子

CSS - :hover 样式在移动端的兼容处理

移动端拖拽

Solo 有什么移动端的主题吗？

招聘人啦！

黑客派有手机 APP 吗？

Flutter KLine 实现（chart,websocket）

Flutter 的一些知识点

欢迎来到这里！

flutter 入门尝鲜

Flutter 官网

克隆 Flutter 仓库

配置环境变量

安装 iOS 和安卓 IED

安装 vscode 插件

选择模拟器

运行效果图

编写您的第一个 Flutter App

第 1 步: 创建 Flutter app

第 2 步: 使用外部包(package)

第 3 步: 添加一个 有状态的部件（Stateful widget）

第 4 步: 创建一个无限滚动 ListView

第 5 步: 添加交互

第 6 步: 导航到新页面

第 7 步：使用主题更改 UI

总结

相关帖子

CSS - :hover 样式在移动端的兼容处理

移动端拖拽

Solo 有什么移动端的主题吗？

招聘人啦！

黑客派有手机 APP 吗？

Flutter KLine 实现（chart,websocket）

Flutter 的一些知识点

欢迎来到这里！

第 3 步: 添加一个有状态的部件（Stateful widget）