Flutter 入门教程

Flutter 介绍

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

为方便公司成员学Flutter跨端技术，现将有关资料整理如下：

• 中文官网flutter.cn，参考中文文档进行相关的开发环境搭建。
• Flutter Widget 目录
• Flutter API 目录
• Flutter 命令行文档

初始化项目

1. 使用命令创建

1、通过运行以下命令来创建一个新的 Flutter 应用：

   flutter create my_app

2、上述命令创建了一个 my_app 的目录，包含了 Flutter 初始的应用模版，切换路径到这个目录内：

   cd my_app

3、确保模拟器已经处于运行状态，输入以下命令来启动应用：

   flutter run

更多相关命令点击参考

2. 使用IntelliJ IDEA or Android Studio工具创建

进入idea开发工具后在菜单栏中找到 File> New > Project...

找到 FLutter 点击 `Next`，填写红色备注的相应信息 点击`Finish`，等待一会就好了。

编辑工具设定点击参考

推荐目录结构

- android 
- ios
- json          // 存放 后台返回的实体类 json 文件 用于自动生成 model文件
- fonts         // 存放字体文件夹
- images        // 存放图片文件夹
- jsons         // 存放实体JSON文件夹
- lib
  - models      // 存放所有数据类
  - pages       // 存放所有的页面
  - provider    // 存放所有的 Provider 状态管理、共享
  - routes      // 存放路由相关
  - services    // 存放请求服务
  - utils       // 存放所有的工具类
  - widgets     // 存放所有封装好的组件
- test          // 测试目录

使用

   flutter docter    // 检查本地环境
   flutter upgrade   // 升级Flitter 
   flutter devices   // 启动运行APP 模拟器环境 ， 前提是你够在本地正常启动ANDROID OR iOS 模拟器 
   flutter run       // 运行 

   flutter pub get   // 获取项目中的依赖包

网络请求、屏幕适配插件说明及使用方式

• dio 网络请求 使用参考

• flutter_screenutil 屏幕适配

屏幕适配使用说明

在项目初始化入口执行下面代码

    /// 填入设计稿中设备的屏幕尺寸
    /// 默认 width : 1080px , height:1920px ,
    /// allowFontScaling:false  设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
    /// 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    ScreenUtil.init(context, width: 750, height: 1334);

推荐插件及插件说明

• Provider 状态管理，UI、数据 分离
• shared_preferences 本地存储数据，持久化
• dio_http_cache Flutter 的 http 缓存库
• fluro 路由管理
• connectivity 网络状态监听
• common_utils Dart 常用工具类
• permission_handler 权限处理
• path_provider 沙柜路径
• extended_image 屌炸天的 Image 扩展
• json_model Json转Dart Model类
• jpush_flutter 极光推送官方支持的插件
• image_picker 一个适用于iOS和Android的Flutter插件，用于从图像库中拾取图像，并使用相机拍摄新照片
• flutter_picker Flutter插件选择器
• sticky_headers Flutter插件 使您可以将标题放置在可滚动内容上，该内容在滚动内容时将粘贴在容器的顶部。
• extended_nested_scroll_view 扩展 NestedScrollView。
• qrscan 二维码扫描插件；目前没有支持IOS。
• qr_flutter 生成二维码插件。
• barcode_scan 二维码扫描插件。
• qr_code_scanner 二维码扫描插件(可以自定义扫码页面)。
• url_launcher Flutter插件，用于在移动平台中启动URL。支持iOS和Android。
• package_info Flutter插件，用于 获取APP 本身的信息，如版本号等。
• flutter_downloader Flutter插件，用于创建和管理下载任务的插件。支持iOS和Android。
• open_file Flutter插件，可以调用本机APP打开带有字符串的文件的插件会产生抖动，支持iOS（UTI）和android（intent）
• flutter_slidable Flutter插件，滑动删除等功能
• amap_location_fluttify Flutter插件，高德定位组件
• amap_location Flutter插件，高德定位组件
• image_gallery_saver flutter中用于保存图片到相册的Plugin
• loading_more_list 加载更多列表支持ListView,GridView以及瀑布流。

可能使用不到的插件

• dio_cookie_manager dio cookie 工具
• cookie_jar Cookie 管理

需要其他组件可以来这里查询 pub.dev

使用 JSON_MODEL 工具

1、将你的JSON文件存放在 jsons 文件目录下

{
  "name":"wendux",
  "father":"$user",       // 可以通过"$"符号引用其它model类
  "friends":"$[]user",    // 可以通过"$[]"来引用数组
  "keywords":"$[]String", // 同上
  "age":20
}

• 注意：不要在 JSON 中加注释容易报错

2、在 lib 目录下找到 build_model.dart 文件运行即可

• 更多使用参考 json_model

3、推荐一些小工具

• idea 插件 FlutterJsonBeanFactory插件

• 大佬推荐 json_to_dart