My-Project

Appearance

Flutter ​

起步 ​

安装 ​

bash
git clone https://github.com/flutter/flutter.git
git clone -b stable https://gitee.com/mirrors/Flutter.git flutter
flutter --version
flutter doctor -v
  • 从GitHub 下载 Flutter 源码，可以使用第二个镜像，速度会快很多
  • 配置环境变量
    • 在path环境变量下添加flutter/bin，如【D:\soft\flutter\bin】
    • 添加环境变量：名称【PUB_HOSTED_URL】值【https://pub.flutter-io.cn】
    • 添加环境变量：名称【FLUTTER_STORAGE_BASE_URL】值【https://storage.flutter-io.cn】
  • 第一次正常初始化 Flutter 工具链，因为之前从 GitHub 下的 zip 缺少缓存文件，Flutter 会自动补齐运行必需的 Dart SDK、编译命令行工具、更新内部依赖，走完这一次，以后再执行 flutter --version 就会秒出版本，不再下载。
  • flutter doctor会全自动检测本地开发环境所有依赖，逐项校验：
    • Flutter SDK 本身是否正常
    • Dart 版本匹配情况
    • Git 是否可用
    • Android SDK、Android 许可证、模拟器
    • Windows 开发依赖（VS、Visual Studio）
    • Chrome 浏览器、VS Code / Android Studio 编辑器插件

创建一个Flutter项目 ​

先从web项目进行起步，使用下面命令创建一个项目，同时进行启动项目，可以看到这是一个简单计数器的一个功能Demo，运行命令通过-d可以指定运行环境，这里指定为chrome

bash
flutter create --platforms web my_flutter
cd my_flutter
flutter run -d chrome

在WebStorm下使用flutter，安装一个Flutter插件，如果安装失败可以在https://plugins.jetbrains.com/search下载后再解压进行安装

  • 运行flutter devices命令，可以看到当前支持的运行环境

目录简单说明 ​

  • .dart_tool
  • build：编译输出目录
  • lib
    • main.dart: 入口文件
  • test：测试目录
  • web：web平台特定的配置和资源文件
  • metadata：Flutter 元数据文件（自动生成）
  • analysis_options.yaml：静态代码分析配置文件
  • flutter_core.iml：用于存储模块（Module）的特定设置
  • pubspec.yaml：项目配置文件

widget & 组件 ​

MaterialApp + Scaffold ​

code.dart

自定义组件 —— 无状态&有状态 ​

code.dart

  • 无状态组件
    • 继承StatelessWidget类，重写build方法
    • 只有一个生命周期方法build
  • 有状态组件
    • 继承StatefulWidget类，重写createState方法，返回一个新组件
    • 新组件继承State类，类型为第一个组件的泛型，重写build方法
    • 第一个类用来渲染，第二个类用来做动态数据处理&展示
    • 生命周期
      • 创建阶段
        • createState()：Widget初始化调用，创建State对象
        • initState()：State对象插入Widget树立刻执行，仅执行一次
        • didChangeDependencies()：initState后立刻执行，当所依赖的InheritedWidget更新时调用，可能多次
      • 构建与更新阶段
        • build()：构建UI方法，初始化或更新后多次调用
        • didUpdateWidget()：父组件传入新配置时调用，用于比较新旧配置
      • 销毁阶段
        • deactivate()：当State对象从树中暂时移除时调用
        • dispose()：当State对象被永久移除时调用，释放资源，仅执行一次
  • 通过快捷键stless和stful可以快速创建无状态、有状态组件
  • stanim带动画控制器的有状态组件，自带 AnimationController 模板

布局组件 ​

组件类别核心组件主要特点 / 使用场景
基础容器Container
Center
Align
Padding		提供装饰、对齐、边距等基础样式和布局控制，是使用频率极高的组件
线性布局Row
Column		在水平或垂直方向线性排列子组件，是构建界面的基础
弹性布局Flex
Expanded
Flexible		按照比例分配剩余空间，实现自适应布局，常与 Row 和 Column 配合使用
层叠布局Stack
Positioned		让子组件重叠堆叠，用于实现如图片上叠加文字、悬浮按钮等效果
流式布局Wrap
Flow		当主轴空间不足时自动换行或换列，常用于标签、滤镜等动态宽高内容的排列
滚动布局ListView
GridView		提供可滚动的列表或网格视图，高效展示大量数据

内容组件 ​

  • Text
  • Image
  • TextField

滚动组件 ​

组件特点使用场景
SingleChildScrollView让单个子组件可以滚动，所有内容一次性渲染长表单、设置页、内容不固定但是总量不多的页面
ListView线性列表，通过 builder 可以实现懒加载，性能优异聊天记录、新闻、常见的单列滚动的数据列表
GridView网格布局列表，支持懒加载，可以固定列数图片墙、商品网格、应用图标列表
CustomScrollView复杂布局方案，通过组合多个 Sliver 组件实现滚动电商首页、社交 App 个人主页多个滚动紧密联动
PageView整页滚动效果，支持横向和纵向应用引导页、图片轮播图、书籍翻页

事件 Tap ​

code.dart

组件通信 ​

通信方式方向场景
构造函数父传子
回调子传父
InheritedWidget祖先-->后代跨层级数据共享
Provider任意组件之间状态管理推荐方案
EventBus任意组件之间全局事件通信
Bloc、Riverpod任意组件之间复杂状态管理

code.dart

网络请求 Dio ​

bash
flutter pub add dio

code.dart

Router 路由 ​

  • 基本路由
  • 命名路由

code.dart

Project 实战 ​

项目结构 ​

目录说明
api接口目录
assets静态资源目录
components组件目录
constant常量目录
pages页面目录
router路由目录
stores状态管理目录
types类型定义目录
utils工具目录
index.dart入口文件

项目重、难点 ​

  • 轮播图组件 carousel_slider
  • 下拉刷新：RefreshIndicator
  • 上拉加载：通过controller监听滚动位置，判断是否滚动到底部，然后请求数据
  • GlobalKey GlobalKey<T>
  • 状态管理：GetX
  • Token持久化
  • 退出登录弹框
  • loading...

Android 适配 ​

  • 安装JDK
  • 安装 Android Studio
    • 选择自定义安装，更改SDK路径【改到c盘以外】后面都是默认选下一步即可，等待安装
    • 在setting里面选择android sdk --> sdk tools --> 勾选 Android SDK Command-line Tools (latest) 进行安装
    • 从上一步安装这里复制Android SDK Location路径来进行配置环境变量 ANDROID_HOME
    • 运行命令：flutter doctor --android-licenses 一直同意协议
    • 安装Virtual Device Manager虚拟设备，这里就选一个Pixel 9 Pro然后进行安装【大小在2g左右，耗时比较久】
  • 上两步弄好之后，通过命令查看状态：flutter doctor -v
  • 补全其他平台代码：flutter create .
  • 修改配置：android/gradle/wrapper/gradle-wrapper.properties的distributionUrl改为国内镜像地址
    • distributionUrl=https\://mirrors.cloudflare.com/gradle/gradle-9.1.0-all.zip
  • 添加网络权限：android/app/src/main/AndroidManifest.xml
    • <user-permission android:name="android.permission.INTERNET"/>
  • 添加maven配置：android/settings.gradle.kts
kts
        maven { url = uri("https://maven.aliyun.com/repository/google") }
        maven { url = uri("https://maven.aliyun.com/repository/releases") }
        maven { url = uri("https://maven.aliyun.com/repository/central") }
        maven { url = uri("https://maven.aliyun.com/repository/public") }
        maven { url = uri("https://maven.aliyun.com/repository/gradle-plugin") }
        maven { url = uri("https://maven.aliyun.com/repository/apache-snapshots") }
        maven { url = uri("https://maven.aliyun.com/nexus/content/groups/public/") }
        maven { url = uri("https://jitpack.io") }

By Modify.

Copyright © 2023-present Evan You

选择字体进行切换