本博客包含多个文档和书籍的翻译,但有能力者推荐阅读英文原版

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

Coding Alan 1年前 (2019-08-19) 2307次浏览 0个评论 扫描二维码

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

在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 的项目代码中来完成)

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:格式化代码

VSCode 常用快捷键

stful 快速生成 StatefulWidget 代码

常见问题

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

 

喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址