Flutter1-初识

文章目录

• 简介
• 目标
• • 1.编译环境
  • 2.HelloWord
  • 3.对应控件
  • 4.打包运行
• 参考资料

简介

该用了，需要加进技术库里了

目标

• 1、编译环境
• 2、HelloWord（启动主流程）
• 3、对应控件（Android对应Flutter）
• 4、打包运行

1.编译环境

前提：

• 设备 Mac / Android
• 工具 AndroidStudio（AS）

1.1 下载SDK

点击下载

1.2 解压配置环境

1、vim ~/.bash_profile
2、输入下面项配置
export PATH=${PATH}:/Users/***/Library/Android/sdk/tools
export PATH=${PATH}:/Users/***/Library/Android/sdk/platform-tools

#flutter environment
export PATH=/Users/***/Android/SDK/flutter/bin/:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
3、source ~/.bash_profile

1.3 检查环境

命令：flutter doctor
作用：检查flutter需要的环境是否完整，按照以上提示配置所有的软件环境；
（1）Flutter 版本信息；
（2）android toolchain 也就是android的sdk，没有授权的按照提示执行：flutter doctor --android-licenses
（3）Xcode 需要安装xcode，提示错误的，按照提示输入命令执行；除了xcode，还需要cocospod，自行搜索安装；
（4） android studio，还需要安装Flutter plugin和Dart plugin两个插件；
（5）VS Code（选装），喜欢vscode编辑方式的可以安装；
（6）模拟器，androidsdk和xcode自带，打开创建即可

1.4 AS 安装插件

AndroidStudio --> Preferences..-->Plugins -->Dart和Flutter

2.HelloWord

2.1 AS创建Flutter项目

File --New Flutter Project

2.2 运行

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) {
//    final wordPair = new WordPair.random();
    return new MaterialApp(
      title: 'Startup Flutter',
      theme: new ThemeData(
        primaryColor: Colors.amberAccent,
      ),
      home: new RandomWords(),
    );
  }
}

/**
 * 获得单词动态view
 */
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

/**
 *创建单词动态view
 */
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  //Set集合不允许重复
  final _saved = new Set<WordPair>();

  //样式
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.favorite, color: Colors.red),
              onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  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]);
        });
  }

  Widget _buildRow(WordPair pair) {
    //查确保单词对还没有添加到收藏夹中相当于boolean
    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);
          }
        });
      },
    );
  }

  //跳转新的界面
  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),
          );
        },
      ),
    );
  }
}

3.对应控件

给 Android 开发者的 Flutter 指南

4.打包运行

构建发布release

4.1、配置app签名

通过在运行以下命令来创建一个： keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

注意：保持文件私密; 不要将它加入到公共源代码控制中。

注意: keytool可能不在你的系统路径中。它是Java JDK的一部分，它是作为Android Studio的一部分安装的。有关具体路径，请百度。

4.2、配置gradle

通过编辑/android/app/build.gradle文件为您的应用配置签名
1、替换

android {

为

def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

android {

2、替换

buildTypes {
    release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now, so `flutter run --release` works.
        signingConfig signingConfigs.debug
    }
}

为

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    release {
        signingConfig signingConfigs.release
    }
}

3、开启混淆
创建 /android/app/proguard-rules.pro 文件，并添加以下规则：

#Flutter Wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }

上述配置只混淆了 Flutter 引擎库，任何其他库（比如 Firebase）需要添加与之对应的规则。

android {

    ...

    buildTypes {

        release {

            signingConfig signingConfigs.release

            minifyEnabled true
            useProguard true

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        }
    }
}

4、构建
cd ( 为您的工程目录).
运行flutter build apk (flutter build 默认会包含 --release选项).
结果如下：

参考资料

1、https://flutter.cn
2、https://flutterchina.club/

本文地址：https://blog.csdn.net/Bingsman/article/details/108800814