flutter第一个示例

我之前讲过如何创建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

参考

除非特别说明,本博客所有作品均采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。转载请注明转自-https://www.emperinter.info/2020/06/29/flutter-project-startup-namer/

Leave a Comment