[toc]

安装flutter环境

参考 flutter中文网站官方文档

flutter命令

检测flutter版本

flutter doctor -v

新建flutter项目

flutter create project_name

新建dart包

flutter create --template=package package_name

包含 ：
lib/package_name.dart：Package的Dart代码
test/package_name_test.dart：Package的单元测试代码。

新建flutter插件

flutter create --org com.baidu.www --template=plugin -i objc -a java flutter_package_app

说明：

1. --org选项指定组织（反向域名），Android和iOS的标识符
2. -a指定android语言 java、kotlin(默认)
3. -i指定iOS语言 objc、swift(默认)

安装所需包

改动 pubspec.yaml 文件后

flutter packages get

或

flutter pub get

打包 app

iOS

flutter build ios

默认编译的release包,等同于

flutter build ios --release

Android

flutter build apk

调试 app

flutter run
需要安装模拟器或链接真机

清理编译缓存

flutter clean

常用命令：

AS开发Flutter的常用快捷键：

Cmd + Option + L ： 代码格式化。
Cmd + “-” 或者 “+” ：收起和展开代码。
Cmd + Shift + “-” 或者 “+” ： 收起和展开全部代码。
Cmd + Shift + Enter ：代码快速补全。
Cmd + F12 ：快速查看当前文件所有方法。
Cmd + Shift + F ：全局搜索。
Cmd + Shift + R ：全局替换。
Cmd + F ：当前文件搜索。
Cmd + R ：当前文件替换。
Cmd + Option + M ：方法抽离或重构。
Cmd + Option + V ： 抽离局部变量。
Cmd + Option + F ：抽离成员变量。
Cmd + O ：全局搜索类/文件/关键字/(包括系统类,自定义类)。
Cmd + Option + W ：抽取代码为单独的方法,或者抽取成get方法。
Cmd + Option + E ：创建文件，抽取代码为单独的方法,或者抽取成get方法。
Cmd + Option + B ：查看抽象类的实现。
Cmd + D ：复制单行。
Cmd+ Delete ：删除行。
Cmd + \ ：热重载(hot reload) 。
Cmd + Option + \ ：热重启(hot restart)。
Cmd+ Shift + Enter ：if后面自动加(){ }。
Cmd+ J ：快速生成模版代码块。
Ctl+ R ：运行项目。
Option + Enter ：在widget包裹一个新的widget。
Option + Enter ：自动修正错误（但是要把光标移动到错误上面）。
Option + Enter ：将StatelessWidget转 StatefulWidget。
Option + Up ：选择这个widget。
Option + Ctl + O ：清除无效包引用。
Option + Ctl + I ：自动缩进对齐/代码对齐。
Option + Shift + Up/Down ：上下移动代码。
Option + 双击 Up ：选择区域。
选中代码 + tab ：选中代码缩进。
选中代码 + shift + tab ：选中代码缩进。

————————————————

flutter项目结构

项目结构

项目结构如下图所示
[图片上传失败...(image-dc0f10-1650855720458)]

入口文件在 lib - main.dart

资源

Flutter 中 assets 可以是任意类型的文件，而不只是图片.

将 vip.png 放到 images 文件夹中

然后在 pubspec.yaml 中声明 assets：

assets:
 - images/vip.png

在代码中，通过路径访问它：

Image.asset('assets/images/vip.png',

将不同分辨率的图片放到不同的文件夹，可以这样写：先将 icon.png 放入到 images 文件夹中，把其它分辨率图片放入对应的子文件中：

images/icon.png
images/2.0x/icon.png
images/3.0x/icon.png

依赖

添加依赖应该在 pubspec.yaml 中添加，如：

dependencies:
    flutter:
        sdk: flutter
    google_sign_in: ^3.0.3

添加完不要忘记执行 flutter packages get

开发调试

编辑器使用的 Android Studio.

界面调试工具 Flutter Inspector

在 Android Studio 中，对 Flutter 项目，有了很好的扩展工具支持，默认情况下，在Android Studio 开发工具的右侧边栏上有一个 Flutter Inspector 工具，可以快速的定位 UI 代码.
使用方式参考: https://flutterchina.club/inspector/

Flutter 断点调试

定位问题时经常需要进行断点调试,打印调试信息,错误日志等.
参考链接: https://blog.csdn.net/shulianghan/article/details/115333983

代码规范整理

下面是我总结的一些规范和约定,希望可以在开发过程中大家一起遵循,增大代码可读性

Flutter是使用Dart语言开发的。

Dart语言是基于类的纯面向对象语言。

Dart 中的所有东西都是对象，包括数字、函数等，它们都继承自 Object，并且对象的默认值都是 null（包括数字）。

Dart 中类和接口是统一的，类就是接口。

标识符

在 Dart 中标识符有三种风格：

• 大写驼峰：每个单词的第一个字母大写，包括第一个单词。
• 小写驼峰：每个单词的第一个字母大写，除了 第一个单词一直小写，即使第一个单词是缩写。
• 小写加下划线：只使用小写字母，即使是缩写，然后使用下划线_分隔。

包名、文件名使用小写加下线划

一些文件系统是不区分大小写的，所以许多项目要求文件名全小写。使用分隔符使得那种方式下名字仍然可读。使用下划线作为分隔符确保名字仍然是有效的 Dart 标识符。

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

导入别名使用小写加下划线

当导入包时, 如果涉及到别名 as, 一律使用小写+下划线方式

import 'dart:math' as math;
import 'package:english_words/english_words.dart' as ew;

类型名使用大写驼峰

类，枚举，自定义类型和参数类型，应该使用大写驼峰，且不能使用分隔符。

class SliderMenu { ... }
class HttpRequest { ... }
typedef bool Predicate<T>(T value);

甚至包括作为元数据注解的类。

class Foo {const Foo([arg]);}
@Foo(anArg)class A { ... }
@Foo()class B { ... }

其它标识符使用小写驼峰

类成员，顶级的定义，变量，参数，命名参数使用小写驼峰。

var item;
HttpRequest httpRequest;
void align(bool clearItems) {// ...}

常量名称

建议使用小写驼峰式命名

const pi = 3.14;
const defaultTimeout = 1000;
final urlScheme = new RegExp('^([a-z]+):');
class Dice {static final numberGenerator = new Random();}

缩写相关

大写首字母缩略词有点难以阅读，并且多个相邻的缩写可能导致模棱两可的名字。例如，一个以HTTPSFTP开始的名字，没有办法判断提及的是HTTPS FTP还是HTTP SFTP。
为了避免这种情况，除了两个字母的首字母缩略词以及缩写词，其它的还是像常规单词那样首字母大写。（两个字母的缩写词，像 ID 和 Mr. 仍然首字母大写。）

HttpConnectionInfo
uiHandler
IOStream
HttpRequest
Id
DB

规定代码的顺序

为了保持文件的整洁，我们规定指令出现的顺序。每个部分应该使用空行隔开。

在其它导入之前导入 “dart:”

import 'dart:async';
import 'dart:html';
import 'package:bar/bar.dart';
import 'package:foo/foo.dart';

在相对导入之前导入 “package:”

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';
import 'util.dart';

在其它导入前导入第三方 “package:”

import 'package:bar/bar.dart';
import 'package:foo/foo.dart';
import 'package:my_package/util.dart';

在所有导入之后的单独部分指定导出

import 'src/error.dart';
import 'src/foo_bar.dart';
export 'src/error.dart';

注释

Dart的文档注释除了有 /** /外 ，还有 /// 。三斜杠一般单行文档注释使用，多行时每行有个三斜杠效果和/* */ 一样。

1. 推荐使用///作为注释。
2. Dart的文档注释中可以有markdown的标记语法
3. 文件头统一注释模板

/// @desp:
/// @time ${DATE} TIME
/// @author: {USER}

/// 主要用于文档注释来注释成员和类型。// 主要用于方法体内的注释

///item 点击
void _itemClick() {
  
_btnClick() {
  return () {
    //开始请求网络，显示提交框
    LcfarmUtil.showSubmitDialog(context);
    UserService.passwordVerify(_password, (data) {
      //成功回调
      //隐藏提交对话框
     
      Navigator.of(context).pop();

      LogUtil.v("登录成功");

      //进入修改密码页-静态路由表
      Navigator.pushNamed(context, Router.passwordUpdate,
          arguments: {"phone": "138****8175"});
    }, (HttpError error) {
      //失败回调
      //隐藏提交对话框
      Navigator.of(context).pop();
      LcfarmUtil.showTipDialog(context, error.message);
    });
  };
}

约定

1. 函数体代码不宜过多，最好在20 - 30行以内 过多改用调用 一个方法中尽量只做一件事
2. flutter嵌套层数最好3以内 改为调用
3. 入参过多（4个以上），建议封类型
4. 函数参数定义要写参数类型
5. 加下划线代表private
6. 不使用 new 创建（官方）
7. if格式定死 条件判断请写好注释 不要嵌套太多的逻辑判断 不能超过3层

if (true) {
// aa
} else {
// bb
}

这样避免了else 悬挂的问题。

if (isWeekDay) {
print('Bike to work!');
} else {
print('Go dancing or read a book!');
}

8. 统一使用 Android Studio 编辑器来格式化代码,快捷键Ctrl+Alt+L.
9. 避免一行的长度超过 80 个字符

flutter 资料

flutter中文网

Dart语言开发文档

咸鱼技术-简书

Flutter超全开源框架、项目和学习资料汇总

Material 还是 Cupertino？

flutter开源项目

flutter中国开源项目

flutter + getx 参考项目

好用的三方flutter库

状态管理器,路由管理

get

网络请求框架

dio

网络连接状态监测

connectivity_plus

播放器

fijkplayer

动画库

lottie

辅助工具,帮助生成与原生交互插件模板

pigeon

透明占位图

transparent_image

获取设备信息

device_info_plus

线程同步

synchronized

本地数据存储

mmkv

瀑布流控件

flutter_staggered_grid_view

图片展示库

extended_image

屏幕常亮

wakelock

Toast提示

fluttertoast

应用内分享

share_extend

轮播图组件

flutter_swiper

Flutter上拉刷新，下拉加载框架

pull_to_refresh

加载动画库

flutter_spinkit

格式化日期时间组件

date_format