Flutter从入门到进阶实战App学习笔记Flutter实例项目 - https://github.com/flut

Flutter实例项目

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

在macOS上搭建Flutter开发环境

注：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

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

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

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

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

命令行打开 iOS 模拟器：

open -a Simulator

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

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 用户指南：developer.android.google.cn/studio/intr…

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
# 可能需要在手机的设置 > 通用 > 设备管理中进行信任处理

Android 真机调试

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

快速上手Flutter开发

DartPad 在线练习

其它：Online Dart Compiler

Flutter 插件网站：pub.dev

Flutter 提供的布局：flutter.dev

Apple's iOS design language

Flutter 学习资源列表

Icon 查询：material.io/resources/i…

JSON to Dart在线转换工具

Dart线上文档

华为在线测试

一键生成所有尺寸的 iOS 及 Android 图标：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

可用于学习的实例项目

github.com/flutter/flu…

github.com/flutter/sam…

github.com/nisrulz/flu…

github.com/iampawan/Fl…

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、加速审核：

developer.apple.com/contact/app…

3、codesign wants to access key xxx in your keychain

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

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

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

debugShowCheckedModeBanner: false,

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

# 进入 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'}
}

7、Some Android licenses not accepted

Android licenses status unknown

flutter doctor --android-licenses

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

open failed: EACCES (Permission denied)

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

<manifest ... >
  <application android:requestLegacyExternalStorage="true" ... >
    ...
  </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 {} ;

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"
...   >

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

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

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

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

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

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