当前位置: 移动技术网 > IT编程>操作系统>Mac > Flutter1-初识

Flutter1-初识

2020年09月27日  | 移动技术网IT编程  | 我要评论
简介改用了,需要加进技术库里了目标1、编译环境2、HelloWord(启动主流程)3、对应控件(Android对应Flutter)4、打包运行1.编译环境前提:设备 Mac / Android工具 AndroidStudio(AS)1.1 下载SDK1.2 解压配置环境1.3 检查环境1.4 AS 安装插件2.HelloWord2.1 AS创建Flutter项目2.2 运行3.对应控件https://flutter.cn/docs/get-started/flu

简介

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

目标

  • 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两个插件;
(5VS 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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网