Flutter 教程

  • 安装 Flutter SDK
  • Dart SDK 附带 Flutter SDK
  • Android Studio 或 XCode 或 VS Code

Android Studio

  • 从市场安装 Flutter 插件

项目结构

  • android – 原生 android 项目，build gradle 等
  • ios – 原生 iOS 项目，
  • lib – dart 和 flutter 代码
  • test – 测试文件
  • pubspec.yaml

lib

  • 您的 dart 文件存放位置
  • main.dart

pubspec.yaml

  • 依赖管理
  • 应用版本
    • buildName: 1.0.0
    • buildNumber: 1
  • Flutter sdk 版本
  • dependencies
  • pub dev

Flutter 构建命令

  • flutter doctor – 清理
  • flutter pub get – 获取依赖
  • flutter pub upgrade – 将依赖更新到最新版本

小部件

  • 有状态 (Stateful)

    • 拥有状态对象

    • setState(() {})

      • 每次调用 setState 时都会运行 build 方法
      • 类似于 Reactjs 中的 render

    • initState

      • 在构建小部件之前初始化状态

  • 无状态 (Stateless)

    • 无状态
    • 所有字段都为 final
    • 仅用于渲染视图

  • 布局小部件

    • 有一个子级
      • Center – 将子级定位在父级中心
      • SizedBox – 指定小部件的大小
      • Padding – 可以将任何小部件包裹在 Padding 中
    • 有子级
      • Column – 垂直排列，接受任何类型小部件的列表
      • Row – 相同，但水平排列
      • Stack – 几乎像相对布局，将内容堆叠在一起

  • mainAxisAlignment

    • Columns 是垂直的，所以主轴是垂直的
    • Rows 是水平的，所以主轴是水平的

  • crossAxisAligment

路由

  • 您的 App 小部件有一个 routes 字段
  • 定义您应用的路由/小部件/屏幕
  • Navigator.of(context).pushNamed(“routeName”)
  • Navigator.pop()

HTTP 请求

  • http – https://pub.dev/packages/http

  • Dio – https://pub.dev/packages/dio

  • http.get(path, {“Authorisation”:”Basic nduewief=”})

  • http.post(path, {“field1”:”value1:}, {“Authorisation”:”Basic nduewief=”})

  • response.statusCode

  • response.body

  • response.error

  • decodeJson() as Class

代码风格

https://dart.ac.cn/guides/language/effective-dart/style

  • UpperCamelCase (类、扩展)
  • lowerCamelCase (常量、变量、方法名)
  • lowercase_with_underscores (Dart 文件)

资源

  • 图片资源
    • 根目录下的 assets 文件夹
    • pubspec.yaml
      assets
      – assets/bdcs-logo.png
    • Image.asset(“assets/bdcs-logo.png”)

测试

GitHub

查看 Github