Alan Hou的个人博客

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

Flutter实例项目

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

在macOS上搭建Flutter开发环境

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

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

Android 环境变量

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

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

命令行打开 iOS 模拟器:

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

开发工具 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真机测试

Android 真机调试

依赖安装

在 pubspec.yaml 文件的dependencies下加入依赖包名称,Android Studio 中点击上方的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/4s3.5英寸326 ppi320*480 pt640*960 px@2x
5/5s/5c4英寸326 ppi320*568 pt640*1136 px@2x
6/6s/7/84.7英寸326 ppi375*667 pt750*1334 px@2x
6+/6s+/7+/8+5.5英寸401 ppi414*736 pt1242*2208 px@3x
X/Xs5.8英寸458 ppi375*812 pt1125*2436 px@3x
Xr6.1英寸326 ppi414*896 pt828*1792 px@2x
Xs Max6.5英寸458 ppi414*896 pt1242*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内部添加:

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

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

7、Some Android licenses not accepted

Android licenses status unknown

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

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

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

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

11、Insecure HTTP is not allowed by platform

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

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

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

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

14、安装 Google Analytics

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

 

 

 

 

退出移动版