我之前讲过如何创建flutter的环境，环境搭建好了就尝试一下这个框架的好处，我之前以为这个东西就是一个前端的UI界面，弄了后发现这个居然有操作逻辑的东西，只用flutter就可以创建一个app了，而且还能生成IOS端的app；
说明一下，https://flutterchina.club/里面的教程有点过时的感觉。英语好的还是去看官方的最新教程，我生成apk文件时按中文教程弄了一下午没弄出来，各种Error报错。英文教程几十就搞出来了！
Steps
创建一个项目
如下选项创建，按步骤操作即可；
修改main.dart
具体教程去看https://flutterchina.club/get-started/codelab/,我这里只贴出Main.dart文件！其他按需修改！
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) {
return new MaterialApp(
title: 'Startup Name Generator',
// 使用主题更改UI
theme: new ThemeData(
primaryColor: Colors.white,
),
home: RandomWords(),
);
}
}
//添加一个 有状态的部件（Stateful widget）
class RandomWords extends StatefulWidget {
@override
_RandomWordsState createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = TextStyle(fontSize: 18.0);
final _saved = new Set<WordPair>();// 添加一个 _saved Set(集合) 到RandomWordsState。这个集合存储用户喜欢（收藏）的单词对。 在这里，Set比List更合适，因为Set中不允许重复的值。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
// 在RandomWordsState的build方法中为AppBar添加一个列表图标。当用户点击列表图标时，包含收藏夹的新路由页面入栈显示。
actions: [ // NEW lines from here...
IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
], // ... to here.
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: /*1*/ (context, i) {
if (i.isOdd) return Divider(); /*2*/
final index = i ~/ 2; /*3*/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);//在 _buildRow 方法中添加 alreadySaved来检查确保单词对还没有添加到收藏夹中。
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
// 同时在 _buildRow()中， 添加一个心形 ❤️ 图标到 ListTiles以启用收藏功能。接下来，你就可以给心形 ❤️ 图标添加交互能力了
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
// 重新启动应用。你现在可以在每一行看到心形❤️图标️，但它们还没有交互。
// 在 _buildRow中让心形❤️图标变得可以点击。如果单词条目已经添加到收藏夹中， 再次点击它将其从收藏夹中删除。当心形❤️图标被点击时，函数调用setState()通知框架状态已经改变。
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
// 向RandomWordsState类添加一个 _pushSaved() 方法.
// 热重载应用，列表图标将会出现在导航栏中。现在点击它不会有任何反应，因为 _pushSaved 函数还是空的。
void _pushSaved() {
Navigator.of(context).push(
MaterialPageRoute<void>(
// NEW lines from here...
builder: (BuildContext context) {
final tiles = _saved.map(
(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
return Scaffold(
appBar: AppBar(
title: Text('Saved Suggestions'),
),
body: ListView(children: divided),
);
}, // ...to here.
),
);
}
}
模拟器中运行
- android studio
在AVD manager（倒数第二个图标）按步骤创建模拟器，三角绿标是运行，闪电是Hot reload（即修改后按下可即时在模拟器中查看改动）；
- 命令行运行
进入项目目录，输入如下命令即可运行（要先打开模拟器）,推荐使用这一个启动方法；
flutter run
发布生成APP
详细请参考https://flutterchina.club/android-release/,我这里讲重要的点！
获取签名
要想把 app 发布到 Play store，还需要给 app 一个数字签名。我们可以采用以下步骤来为 app 签名：
- 创建一个密钥库
如果我们已经有一个密钥库，可以跳到下一步。如果没有，在命令行中运行以下的命令来创建一个：
在 macOS 或者 Linux 系统上，执行下面的代码
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
On Windows, use the following command:
keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key
- 备忘
保证这个文件的私有性，不要将它提交到公共的代码管理空间。 - 备忘
keytool 可能不在我们的系统路径中。它是 Java 的一部分，在安装 Android Studio 的时候会被一起安装。运行 flutter doctor -v，’Java binary at:’ 之后打印出来的就是它的路径，然后用 java 来替换以上命令中的 keytool，并加上 keytool 的完整路径即可。如果文件路径包含空格，类似 Program Files 这样的，你需要在路径上加入转义符：/"Program Files"/。
只有 Java 9 或更高版本才需要 -storetype JKS 标签。从 Java 9 版本开始，keystore 类型默认为 PKS12。 -
从 app 中引用密钥库
创建一个名为/android/key.properties 的文件，它包含了密钥库位置的定义：
storePassword=<上一步骤中的密码>
keyPassword=<上一步骤中的密码>
keyAlias=key
storeFile=<密钥库的位置，e.g. /Users/<用户名>/key.jks>
- 备忘
（再次）请保证这个文件的私有性，不要将它提交到公共的代码管理空间。
app 生成
windows 是无法生成iOS的；
- android studio
-
命令行（推荐）
分处理器编译
flutter build apk --split-per-abi
不分处理器
flutter build apk --release
