使用flutter基础入门

安装

github上，下载flutter源码，运行flutter_console添加bin文件夹到path中 https://gitee.com/mirrors/Flutter.git 或者 dart：https://flutter.dev/docs/development/tools/sdk/releases#windows 配置flutter镜像（windows环境变量添加如下变量）

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

运行flutter doctor检查安装依赖项是否完成 或者新建flutter项目(flutter create project_name)，再vscode中打开项目，右下角弹出的flutter错误窗口中选择，定位flutter/bin目录即可

dart语言

dart和typescript一样，可以直接生成javascript，不同的市typescript是js的超集，dart类似c的编程语法 dart语言编译器下载：https://gekorm.com/dart-windows/

dart run a.dart dart2native a.dart -o a //输出原生程序

dart语言特性

• 箭头函数，一行表达式，()=>expression
• 匿名函数，(){}
• future只有then、stream接收多个异步函数结果sucess、fail
• dynamic任意类型，cast自动转换为具体类型

命令行

flutter

• 新建项目，flutter create
• 查看连接设备，flutter devices(vscode flutter select device选中输出设备)
• 执行flutter run运行程序，连接设备后，可运行打包安装android程序
• 安装项目依赖包，项目下的pubspec.yaml和nodejs类似，flutter packages\pub get安装依赖

dart

• 新建dart项目，dart create，dart pub（类似npm的包管理库）
• put get 安装依赖包，添加到.packages文件
• dart2js 转化dart文件为js
• dart run执行dart文件，执行单个文件
• pub run加载依赖包运行

vscode

flutter devices //查看设备编码（第二个字段） flutter run -d chrome //web调试 没有响应重启vscode

launch.json文件配置

{
    "name": "flutter_demo",
    "request": "launch",
    "type": "dart",
    "program": "lib/main.dart",
    "args": [
    	"-d",
        "chrome"
    ]
}

vscode下方切换设备，不能切换，flutter run后只能附加了

在这里插入图片描述

调试flutter，打开vscode中的flutter的devtool

在这里插入图片描述

widget

• Widget build(BuildContext context)函数，通过json配置构建ui
• StatefulWidget有状态窗口（多一个绑定前端的变量）、StatelessWidget无状态窗口
• Container(盒子模型容器布局,支持padding等属性)，Center(居中布局)，Padding(填充布局)，Align(对齐布局)，Colum（垂直布局），Row（水平布局），Expanded（配合Colum，Row使用），FittedBox（缩放布局），Stack（堆叠布局），overflowBox(溢出父视图容器)
• 布局：参考https://blog.csdn.net/kenkao/article/details/113778880
• flutter官网：https://flutterchina.club/tutorials/layout/
• 页面跳转，Navigator和Router，Navigator.push/pop页面导航，Navigator.pushNamed跳转到命名路由

生成器

参考：https://blog.csdn.net/qq_30447263/article/details/107248522