Flutter入门

一、Flutter概述

1. 是什么：
   • 一个由Google开发的开源UI工具包
2. 用途：
   • 快速构建高质量的移动应用程序
3. 特点：
   • 跨平台开发：单一代码库能创建适用于多平台的应用程序
   • 使用Dart为编程语言
   • 内置有丰富的UI组件
   • 支持热重载：应用运行时可即时查看代码更改的效果

二、Flutter相关环境安装

1. 安装环境：以win10为例
2. 参考资源1
   参考资源2
   flutter创建项目速度慢的解决方案
3. 设置Android开发环境
   • 安装Android Studio
4. 下载Flutter SDK并设置环境变量
   • Flutter SDK是用于构建平台移动应用程序的开源软件开发工具包
   • Flutter安装目录：不要安在C盘这样需要高权限的文件夹内
   • 环境变量：Flutter安装目录下的bin目录添加到用户path内
   • 重新打开命令行，输入命令查看flutter安装位置
     • cmd环境下：输入where flutter dart
     • powershell环境下：输入where.exe flutter dart
   • 在命令行里检查flutter相关依赖：flutter doctor
     • 可能产生的报错：
       • Error: Unable to find git
       • Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools
       • 无法访问maven.google.com
5. 配置Android设备
6. 配置Android模拟器
7. 安装visual studio, vscode
8. vscode里安装扩展：Flutter
9. vscode里验证扩展是否成功安装

三、通过模板实现一个Flutter应用

参考文档
实现效果

四、Flutter里的小部件(widgets)

1. 小部件是什么：
   • 一些临时对象，用于构建应用程序在当前状态下的表示
   • Flutter布局的核心机制
2. stateless widgets（无状态小部件）
   • Text widget：
     • 创建带有样式的文本
   • Flex widgets：
     • 创建灵活布局
   • Stack widget：
     • 配置元素之间的位置关系
   • Container widget：
     • 创建一个矩形容器
   • MaterialApp widgets：
     • 提供创建app顶部的相关小部件
   • GettureDetector widget：
     • 提供处理手势交互的相关小部件
3. Statefulwidgets （有状态小部件）

五、Flutter里的构建布局

1. 布局构建准备
   • 对布局进行图形分解
     • 识别出行和列、重叠的元素
     • 是否包含网格布局、是否需要选项卡
   • 创建一个新flutter应用【vscode环境】
     • 方法1
     • 方法2
       • 终端：flutter create item_name
         • 运行：flutter run
2. 我的实践

//Flutter应用程序的入口文件，定义了应用程序的根小部件和整体布局
//导入库flutter/material.dart：有提供许多用于构建用户界面的小部件
import 'package:flutter/material.dart';

//main()：应用程序的入口点
void main() {
  //创建一个MyApp小部件实例，并将其传递给runApp()函数
  runApp(const MyApp()); //MyApp：一个继承自StatelessWidget的小部件，它是你应用程序的根小部件
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //返回一个MaterialApp小部件作为应用程序的根小部件，MaterialApp：一个提供了基本Material Design布局的小部件
      home: Scaffold(
        //Scaffold小部件作为应用程序的主要布局容器
        appBar: AppBar(
          //标题栏
          title: const Text('Flutter Layout Tutorial'),
        ),
        body: Center(
          //内容区域
          child: Column(
            //Column小部件：将其子小部件按垂直方向排列
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                "欢迎来到Flutter布局教程",
                style: TextStyle(fontSize: 24),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 按钮点击事件处理
                },
                child: const Text('点击我'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 实践效果

参考资源：

• Flutter官网
• vscode扩展：Chat-GPT中文版