environment-win.jpg

Flutter是谷歌开源的移动UI框架，可在iOS和Android快速创建原生用户界面，Flutter是完全免费和开源的，开发语言采用Dart。
Flutter组件采用现代响应式框架构建，从React中获得灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子，当组件状态改变，组件会重构它的描述(description)，Flutter会从底层渲染树将当前状态转换到下一个状态所需要的最小更改。

图片来源于网络
Flutter之环境配置与项目搭建 - 图3

一，下载flutter

根据您系统下载不同版本 https://flutterchina.club/get-started/install/

image.png

下载好以后，把文件解压放到一个目录里，（根据个人喜欢目录而定）。
我的目录 D:\flutter_windows_2.0.3-stable（此目录需要配置环境变量用到）

二，配置环境变量

具体可参考 https://flutterchina.club/setup-windows/

2.1,安装Flutter

由于访问限制问题sdk可能会获取不到

  1. export PUB_HOSTED_URL=https://pub.flutter-io.cn
  2. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

如下图所示：
image.png
第二步:获取Flutter SDK

下载地址 https://flutter.dev/docs/development/tools/sdk/releases

image.png

下载完解压到您对应目录之后 找到flutter_console.bat

image.png
第三步:配置环境变量

便于全局使用flutter
步奏 控制面板>用户帐户>用户帐户>更改我的环境变量

path 新增 D:\flutter_windows_2.0.3-stable\flutter\bin

第四步:运行 flutter doctor命令

检查所需要的安装依赖包

  1. flutter doctor

image.png
第五步:安装Android Studio和JDK
移步此处 https://flutterchina.club/setup-windows/#android%E8%AE%BE%E7%BD%AE

第五步:编辑器配置
此处用的VS Code编辑器，根据个人喜欢IDE就好

安装flutter插件

image.png

安装完成之后执行 ctrl+shift+p 出现如下则成功可以开始新建flutter项目。
image.png
以上就是开始项目前的准备工作~~~~

三,项目搭建

第一步:创建Flutter应用

  1. 可以直接用IDE vscode创建
  2. 可以在你项目存放目录
    1. flutter create "项目名"
    image.png

第二步:路由管理

Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈

第三步:包管理与资源配置
Flutter项目默认的配置文件是pubspec.yaml
image.png

  • dependencies：应用或包依赖的其它包或插件。
  • flutter：flutter相关的配置选项。

依赖包下载 flutter packages get
静态资源配置
image.png
需要使用什么资源,以图片中的格式在assets下继续添加配置。

根据项目需要搭建自己的通俗cli

项目脚手架，内含基础模块：

  • 底部导航；
  • 页面路由管理；
  • 网络请求基础封装类；
  • 本地数据库，本地个性化存储等；
  • 状态管理库；

第一步:底部导航配置

第二步: 路由管理
Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈

9125154-8738d8cf80436fa2.png

pushAndRemoveUntil: 跳转到新的页面，并把当前的页面关闭；

【pop与popUntil区别】
pop是直接返回上一个页面，popUntil是里边有一个判断；

maybePop经常用于if语句判断，判断是否可以导航，再做后续操作；

【pushAndRemoveUntil与pushNamedAndRemoveUntil区别】
pushAndRemoveUntil是面向普通路由，
pushNamedAndRemoveUntil面向命名路由；

【push与replace区别】
push推送时替换，replace直接替换；

主要关键点（对象）：

  • Navigator:路由管理器，就是用来实现页面跳转的
  • Route:页面的抽象，定义了路由线路
  • Overlay：遮罩，Navigator的下层widget;Navigator包裹了Overlay；

路由的实现
MaterialApp->WidgetsApp->Navigator
这是Navigator的widget层级包裹关系，也就是说Navigator在app启动时就 已经作为page(widegt)的上层；

注意点：
通过context获取最上层的NavigatorState
调用 NavigatorState的push方法

使用方法：

  1. 跳转：Navigator.push()
  2. 退出：Navigator.pop()
  4.  路由表
  5. 使用方法：Navigator.pushNamed()

路由表：

  1. MaterialApp(
  2.   // 定义APP启动时第一个显示的页面
  3.   initialRoute: '/',
  4.   routes: {
  5.     '/': (context) => page1(),
  6.   },
  7. );

路由表跳转方式

  1. 跳转： Navigator.pushNamed(context, '/second');
  2. 返回 ：Navigator.pop(context);

路由跳转带参数
arguments是跳转携带的参数，它是一个Object，意味着可以传递任意类型的参数!

  1. 传参：
  2. Navigator.of(context).pushNamed<T>('；路由名', arguments: '参数');
  4. 获取参数：
  5.  //获取传递的参数
  6.  final ScreenArguments args = ModalRoute.of(context).settings.arguments;

简易示例

pageone到pagetwo
传入一个route对象，用MaterialPageRoute包裹
image.png

pagetwo返回pageone
image.png

命名路由

类似Vue 里面路由配置，其实就是一个别代替方法 譬如： ‘/ home’ 表示 homePage。

路由表

想使用命名路由，必须先提供并注册一个路由表（routing table），这样应用程序才知道哪个名称与哪个路由Widget对应。路由表的定义如下：

  1. Map<String, WidgetBuilder> routes;

它是一个Map， key 为路由的名称，是个字符串；value是个builder回调函数，用于生成相应的路由Widget。我们在通过路由名称入栈新路由时，应用会根据路由名称在路由表中找到对应的WidgetBuilder回调函数，然后调用该回调函数生成路由widget并返回

声明注册表
image.png

过滤（跟vue比较类似）
image.png

注册表导入
image.png

网络请求dio

vue项目中使用的axios比较类似
https://pub.dev/packages/dio
**
image.png
数据本地存储
基本API（key就是你存贮的名称，value就是你存储的值）修改和增加一样的操作

  1. SharedPreferences prefs = await SharedPreferences.getInstance();
  2. prefs.setString(key, value)
  3. prefs.setBool(key, value)
  4. prefs.setDouble(key, value)
  5. prefs.setInt(key, value)
  6. prefs.setStringList(key, value)

import ‘package:shared_preferences/shared_preferences.dart’;
https://pub.dev/packages/shared_preferences
image.png
删除：

  1. SharedPreferences prefs = await SharedPreferences.getInstance();
  2. prefs.remove(key); //删除指定键
  3. prefs.clear();//清空键值对

状态管理库

https://www.yuque.com/docs/share/ddf4e224-dd81-4ad2-8199-2d8ada2e776d?# 《flutter项目》