了解flutter

Flutter 是 Google 开源的应用开发框架，仅通过一套代码库，就能构建精美的、原生平台编译的多平台应用。

Flutter 为应用开发带来了革新：只要一套代码库，即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。

开发环境（window）

1.获取 Flutter SDK

2.添加环境变量

3.测试

如果可以在电脑命令行运行flutter就表示sdk包已经配置完成

如果你在中国的网络环境下使用 Flutter，需要对网络环境进行特别设置。你需要为此设置两个环境变量：PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL，然后再运行 Flutter 命令行工具。（建议使用一下两个）

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

详情看这篇文章

运行环境（运行依赖）

检查运行环境

flutter doctor

上述命令会检查你的现有环境，并将检测结果以报告形式呈现出来。仔细阅读它显示的内容，检查是否有尚未安装的软件或是有其他的步骤需要完成（通常会以粗体呈现）

安装中出现问题

1.配置Java环境

www.oracle.com/java/techno…

2.下载Visual Studio 2022运行环境

visualstudio.microsoft.com/zh-hans/tha…

3.安装Android证书

flutter doctor --android-licenses

在命令行输入上述代码然后一直输入同意（Y）即可---（*读不懂系列）

4.安装开发工具Android Studio（我后来改用了vscode）

developer.android.google.cn/studio

运行 Android Studio，并进入 ‘Android Studio Setup Wizard’，这会安装最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是在开发 Android Flutter 应用时所需要的----（*其实就是一直下一步就可以了）

这里要注意两点，在window 上这两个缺一不可，否则运行检查命令会报却是sdk 或者 studio 未安装

（1）配置sdk-dir

flutter config --android-sdk-dir <directory>设置你的 Android SDK 的安装目录

（2）配置--android-studio-dir

flutter config --android-studio-dir <directory> 设置你的 Android Studio 的安装目录

vscode配置开发环境

1.安装 Flutter 和 Dart 插件

在vscode中使用flutter 显得格外简单，只需要安装flutter插件即可，此过程中会自动安装必需的 Dart 插件

2.在vscode通过 Flutter Doctor 命令验证是否安装成功

（1）打开 View > Command Palette…。

（2）输入 “doctor”，选择 Flutter: Run Flutter Doctor。

（3）打开 OUTPUT 面板查看是否有错误，确保在不同的输出选项 (Output Options) 的下拉列表中选择了 Flutter。

大功告成，我所有的开发环境已经准备好，接下来就可以创建hello world 项目了

使用vscode创建项目也变得格外简单

使用快捷键ctru+shift+p调出命令行，输入flutter,在下拉列表中选择flutter:New Project。vscode会自动帮你完成一直最基本的flutter项目

（在vscode中使用热更新也变得有趣，只需要终端命令中输入字母r\R 实现手动热更新）

创建hello world

在这个项目示例中，我将主要编辑 Dart 代码所在的 lib/main.dart 文件

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

2022年了，你还不会flutter!!!