Flutter从入门到进阶实战App学习笔记

Alan

5 年前

Flutter实例项目

https://github.com/iampawan/FlutterExampleApps

开发工具准备与开发环境搭建

在macOS上搭建Flutter开发环境

下载页面：https://flutter.dev/docs/development/tools/sdk/releases

注：Mac 请切换至macOS 进行下载，否则会出现env: bash\r: No such file or directory的报错

mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip
# vi vi ~/.bash_profile
export PATH="$PATH:~/development/flutter/bin"
source ~/.bash_profile
# 运行如下命令来查看是否有需要安装和完成配置所需要的依赖
flutter doctor

# 国内镜像可使用如下设置（https://flutter.dev/community/china）：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

mkdir ~/development

cd ~/development

unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip

# vi vi ~/.bash_profile

export PATH="$PATH:~/development/flutter/bin"

source ~/.bash_profile

# 运行如下命令来查看是否有需要安装和完成配置所需要的依赖

flutter doctor

# 国内镜像可使用如下设置（https://flutter.dev/community/china）：

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Android 环境变量

#Android 环境变量
export ANDROID_HOME=/Users/用户名/Library/Android/sdk
#Android 模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#Android tools 路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#Android 平台工具路径
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
#Android NDK路径
#ANDROID_NDK_HOME=/Users/用户名/Library/Android/ndk/android-ndk-r10e

#Android 环境变量

export ANDROID_HOME=/Users/用户名/Library/Android/sdk

#Android 模拟器路径

export PATH=${PATH}:${ANDROID_HOME}/emulator

#Android tools 路径

export PATH=${PATH}:${ANDROID_HOME}/tools

#Android 平台工具路径

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

#Android NDK路径

#ANDROID_NDK_HOME=/Users/用户名/Library/Android/ndk/android-ndk-r10e

注：Windows 为在环境变量（Win+R 并输入 env）中添加 ANDROID_HOME 并使用将%ANDROID_HOME%\emulator添加到 PATH 中

安装 Xcode，并配置 Xcode 命令行工具来使用新安装的 Xcode 版本

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

1	sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

命令行打开 iOS 模拟器：

open -a Simulator

1	open -a Simulator

创建运行一个简单的 Flutter 项目

flutter create my_app
cd my_app
flutter run

flutter create my_app

cd my_app

flutter run

开发工具 Android Studio，在它的Preferences>Plugins中安装 Flutter 插件

Dart SDK path: /usr/local/opt/dart/libexec/

Flutter SDK path: 刚刚安装 Flutter 的路径

Android Studio 用户指南：https://developer.android.google.cn/studio/intro

iOS真机测试

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

# 进入项目目录
open ios/Runner.xcworkspace

#Xcode 中选择账号(Team)并生成证书
# 运行 flutter run
# 可能需要在手机的设置 > 通用 > 设备管理中进行信任处理

brew update

brew install --HEAD usbmuxd

brew link usbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstaller ios-deploy cocoapods

pod setup

# 进入项目目录

open ios/Runner.xcworkspace

#Xcode 中选择账号(Team)并生成证书

# 运行 flutter run

# 可能需要在手机的设置 > 通用 > 设备管理中进行信任处理

Android 真机调试

emulator -avd AVD_NAME # AVD_NAME为创建虚拟设备时设置的名称
# 在手机中设置  开发人员选项 > USB调试，同时还应允许从 USB 安装应用
flutter devices # 查看当前可用的设备
# flutter run -d 'iPhone X'

emulator -avd AVD_NAME # AVD_NAME为创建虚拟设备时设置的名称

# 在手机中设置开发人员选项 > USB调试，同时还应允许从 USB 安装应用

flutter devices # 查看当前可用的设备

# flutter run -d 'iPhone X'

依赖安装

在 pubspec.yaml 文件的dependencies下加入依赖包名称，Android Studio 中点击上方的Packages Get 链接，或直接执行如下命令

flutter packages get

1	flutter packages get

快速上手Flutter开发

DartPad 在线练习

其它：Online Dart Compiler

Flutter 插件网站：pub.dev

Flutter 提供的布局：flutter.dev

Apple’s iOS design language

Flutter 学习资源列表

Icon 查询：https://material.io/resources/icons/

JSON to Dart在线转换工具

Dart线上文档

华为在线测试

一键生成所有尺寸的 iOS 及 Android 图标：http://icon.wuruihong.com/（修改图标需要分别进入 Android 和 iOS 的项目代码中来完成：Android 替换android > app > main > res下的文件，iOS 替换ios > Runner > Assets.xcassets下的文件）

导包时可通过hide取消导入部分内容，如import 'package:chewie/chewie.dart' hide MaterialControls;

iPhone 各版本屏幕尺寸

手机型号	屏幕尺寸	屏幕分辨率	开发尺寸	像素尺寸	倍图
4/4s	3.5英寸	326 ppi	320*480 pt	640*960 px	@2x
5/5s/5c	4英寸	326 ppi	320*568 pt	640*1136 px	@2x
6/6s/7/8	4.7英寸	326 ppi	375*667 pt	750*1334 px	@2x
6+/6s+/7+/8+	5.5英寸	401 ppi	414*736 pt	1242*2208 px	@3x
X/Xs	5.8英寸	458 ppi	375*812 pt	1125*2436 px	@3x
Xr	6.1英寸	326 ppi	414*896 pt	828*1792 px	@2x
Xs Max	6.5英寸	458 ppi	414*896 pt	1242*2688 px	@3x

可用于学习的实例项目

https://github.com/flutter/flutter/tree/master/examples

https://github.com/flutter/samples

https://github.com/nisrulz/flutter-examples

https://github.com/iampawan/FlutterExampleApps

Android Studio 常用快捷键

Cmd + N：快速生成构造函数，getter, setter 等

Cmd + Opt +L：格式化代码

stf, stl: 快速创建 widget

Opt + 回车: 快速修复、自动生成…

双击 Shift: 万能搜索

Cmd + E: 查看最近打开的文件

重命名： Fn + Shift + F6

查看当前类结构： Cmd + Fn + F12

全局搜索/替换：Cmd + Shift + F/R

查找引用：Opt +Shift + F7

VSCode 常用快捷键

stful 快速生成 StatefulWidget 代码

Cmd+Shift+P：新建flutter 及其它安装命令容口

Cmd + .：调出 Wrap in widget…弹窗

Cmd+Shift+T：重新打开关闭的编辑页面

Cmd+T：通过匹配文本打开文件

Shift+Option+F：代码格式化

Cmd+J：打开Console

Cmd+F12：查看类型的子类

Option+上下方向键：将当前行与上一行/下一行互换位置

Option+Shift+下方向键：快速复制当前行

Cmd + Enter：转至下一行

常见问题

1、This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.

卸载手机上的软件重新执行安装即可

2、加速审核：

https://developer.apple.com/contact/app-store/?topic=expedite

3、codesign wants to access key xxx in your keychain

注意在输入密码后要勾选 Always Allow，否则会弹出多次而让人认为是操作未成功

4、如何取消右上角的 debug 图标？

在主入口 main.dart 文件的MaterialApp内部添加：

debugShowCheckedModeBanner: false,

1	debugShowCheckedModeBanner: false,

5、如何配置加快打开 Flutter 的速度？

# 进入 Android Studio 安装目录下的 bin 目录，编辑 idea.properties
disable.android.first.run=true

1 2	# 进入 Android Studio 安装目录下的 bin 目录，编辑 idea.properties disable.android.first.run=true

6、部分兼容问题机型的 CPU 配置

# 根目录/android/app/build.gradle，在 android 节点内添加类似
splits{
    abi{include'x86', 'armeabi-v7a', 'x86_64'}
}

# 根目录/android/app/build.gradle，在 android 节点内添加类似

splits{

abi{include'x86', 'armeabi-v7a', 'x86_64'}

}

7、Some Android licenses not accepted

Android licenses status unknown

flutter doctor --android-licenses

1	flutter doctor --android-licenses

8、安卓10无法进行缓存下载的问题

open failed: EACCES (Permission denied)

1	open failed: EACCES (Permission denied)

很多朋友会发现在安卓10中仅打开相册权限是无法进行内容的下载的，当前的一种解决方案是将如下配置中 true 更改为 false

<manifest ... >
  <application android:requestLegacyExternalStorage="true" ... >
    ...
  </application>
</manifest>

...

</application>

</manifest>

9、谷歌浏览器开启触屏模式：chrome://flags/#top-chrome-touch-ui

10、Execution failed for task ‘:app:compileDebugJavaWithJavac’打开 Android Studio 的 Terminal

./gradlew compileDebugSource --stacktrace -info
# macOS   env: bash\r: No such file or directory
brew install dos2unix 
find . -type f -exec dos2unix {} \;

./gradlew compileDebugSource --stacktrace -info

# macOS env: bash\r: No such file or directory

brew install dos2unix

find . -type f -exec dos2unix {} \;

11、Insecure HTTP is not allowed by platform

# ios/Runner/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

# android/app/src/main/AndroidManifest.xml
<application
...
android:usesCleartextTraffic="true"
...   >

# ios/Runner/Info.plist

<key>NSAppTransportSecurity</key>

<dict>

<key>NSAllowsArbitraryLoads</key>

<true/>

</dict>

# android/app/src/main/AndroidManifest.xml

<application

...

android:usesCleartextTraffic="true"

... >

12、如何修改应用的名称？

默认应用的显示名称使用项目名称，而如果希望修改，可以在安卓中修改android > app > src > main> AndroidManifest.xml：

<application
        android:label="your_app_name"
...

<application

android:label="your_app_name"

...

iOS中修改ios > Runner > Info.plist：

<key>CFBundleDisplayName</key>
<string>your_app_name</string>

1 2	<key>CFBundleDisplayName</key> <string>your_app_name</string>

13、 Could not find ‘ffi’ (>= 1.3.0) among 96 total gem(s) (Gem::MissingSpecError)

brew reinstall cocoapods
brew link --overwrite cocoapods

1 2	brew reinstall cocoapods brew link --overwrite cocoapods

14、安装 Google Analytics

dart pub global activate flutterfire_cli
export PATH="$PATH":"$HOME/.pub-cache/bin"
firebase login:ci
flutterfire configure


Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
...
      navigatorObservers: <NavigatorObserver>[observer],
...
    );
  }
}

dart pub global activate flutterfire_cli

export PATH="$PATH":"$HOME/.pub-cache/bin"

firebase login:ci

flutterfire configure

Future<void> main() async {

WidgetsFlutterBinding.ensureInitialized();

await Firebase.initializeApp(

options: DefaultFirebaseOptions.currentPlatform,

);

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

static FirebaseAnalytics analytics = FirebaseAnalytics.instance;

static FirebaseAnalyticsObserver observer =

FirebaseAnalyticsObserver(analytics: analytics);

@override

Widget build(BuildContext context) {

return MaterialApp(

...

navigatorObservers: <NavigatorObserver>[observer],

...

);

}

15、macOS桌面应用出现_ClientSocketException，无法对外请求接口，需配置 DebugProfile.entitlements 和 ReleaseProfile.entitlements文件：

<key>com.apple.security.network.client</key>
<true />

1 2	<key>com.apple.security.network.client</key> <true />