Flutter经验

[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

说明：

--org选项指定组织（反向域名），Android和iOS的标识符

-a指定android语言 java、kotlin(默认)

-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

常用命令：

常用命令	含义
--version	查看Flutter版本
-h或者--help	打印所有命令行用法信息
analyze	分析项目的Dart代码。
build	Flutter构建命令。
channel	列表或开关Flutter通道。
clean	删除构建/目录。
config	配置Flutter设置。
create	创建一个新的Flutter项目。
devices	列出所有连接的设备。
doctor	展示了有关安装工具的信息。
drive	为当前项目运行Flutter驱动程序测试。
format	格式一个或多个Dart文件。
fuchsia_reload	在Fuchsia上进行热重载。
help	显示帮助信息的Flutter。
install	在附加设备上安装Flutter应用程序。
logs	显示用于运行Flutter应用程序的日志输出。
packages	命令用于管理Flutter包。
precache	填充了Flutter工具的二进制工件缓存。
run	在附加设备上运行你的Flutter应用程序。
screenshot	从一个连接的设备截图。
stop	停止在附加设备上的Flutter应用。
test	对当前项目的Flutter单元测试。
trace	开始并停止跟踪运行的Flutter应用程序。
upgrade	升级你的Flutter副本。

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 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的文档注释除了有 /** /外，还有 /// 。三斜杠一般单行文档注释使用，多行时每行有个三斜杠效果和/* */ 一样。

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

/// @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);
    });
  };
}

约定

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

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

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

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

统一使用 Android Studio 编辑器来格式化代码,快捷键Ctrl+Alt+L.
避免一行的长度超过 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

Flutter经验

安装flutter环境

flutter命令

检测flutter版本

新建flutter项目

新建dart包

新建flutter插件

安装所需包

打包 app

iOS

Android

调试 app

清理编译缓存

常用命令：

AS开发Flutter的常用快捷键：

flutter项目结构

项目结构

资源

依赖

开发调试

界面调试工具 Flutter Inspector

Flutter 断点调试

代码规范整理

标识符

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

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

类型名使用大写驼峰

其它标识符使用小写驼峰

常量名称

缩写相关

规定代码的顺序

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

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

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

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

注释

约定

flutter 资料

flutter中文网

Dart语言开发文档

咸鱼技术-

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

Material 还是 Cupertino？

flutter开源项目

flutter中国开源项目

flutter + getx 参考项目

好用的三方flutter库

状态管理器,路由管理

网络请求框架

网络连接状态监测

播放器

动画库

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

透明占位图

获取设备信息

线程同步

本地数据存储

瀑布流控件

图片展示库

屏幕常亮

Toast提示

应用内分享

轮播图组件

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

加载动画库

格式化日期时间组件

你可能感兴趣的:(Flutter经验)