flutter入门

1.flutter基本命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 1. 依赖管理
flutter pub get #安装和更新 pubspec.yaml 中定义的依赖包。
flutter pub upgrade #升级所有依赖包到符合 pubspec.yaml 中定义的版本范围的最新版本。
flutter pub outdated #检查已安装依赖包是否有新版本，用于发现哪些依赖可以升级。
flutter pub cache repair #修复缓存中损坏的依赖包，重新下载所有依赖项。

# 2. 构建项目
flutter build <platform> #为特定平台构建项目，生成可以发布的应用包。常见选项包括：
flutter build apk #为 Android 构建 APK 文件。
flutter build appbundle #为 Android 构建 App Bundle 文件，适合发布到 Google Play。
flutter build ios #为 iOS 构建发布版本（需要在 macOS 上运行）。
flutter build web #为 Web 构建项目，生成 HTML、CSS 和 JavaScript 文件。
flutter build windows #为桌面平台构建项目。
flutter build macos
flutter build linux 

# 3. 运行和调试
flutter run #运行 Flutter 应用，默认在已连接的设备或模拟器上调试应用。
#常用选项：flutter run -d <device_id>，可以指定设备 ID（比如模拟器或真机）。
flutter run -d all
flutter attach #用于连接到已在设备上运行的 Flutter 应用，方便调试无需重启应用。

# Flutter run key commands.
r # 热加载
R # 热重启
p # 显示网格
o # 切换android和ios的预览模式
q # 退出调试预览模式
h # List all available interactive commands.
d # Detach (terminate "flutter run" but leave application running).
c # Clear the screen

# 4. 检查和诊断
flutter doctor #检查开发环境是否已正确配置，列出 Flutter 运行所需的依赖项及其状态。
flutter analyze #静态分析代码，检查代码是否符合 Dart 规范，并发现潜在的错误和警告。
flutter clean #清除项目生成的临时文件和缓存文件。通常在遇到编译或构建问题时使用，可以强制项目重新构建。

# 5. 测试
flutter test #运行项目中的测试文件（通常位于 test/ 目录），用于单元测试和 Widget 测试。
flutter drive #用于运行集成测试，通常配合 integration_test 包使用，可以自动化地测试应用的整体功能。

# 6. 发布相关
flutter install #将构建好的应用安装到已连接的设备上，用于测试已构建的 APK 或 IPA 文件。
flutter pub publish #用于将 Dart 包发布到 pub.dev（通常用于发布 Flutter 插件或包，适用于需要共享的代码库）。
  • 查看可用设备
1
flutter devices

image-20240522142653086

1
2
3
4
# 运行在所有设备
flutter run -d all
# 指定设备运行
flutter run -d windows

代码对齐快捷键

1
2
3
4
# VSCode
Shift + Alt + F
# Android Studio
Ctrl + Alt + L

2. Flutter目录结构介绍

image-20240522111711427

文件夹 作用
.dart_tool 缓存项目依赖项的信息。
存储构建和编译过程中生成的临时文件。
包含一些工具和包的配置文件，这些文件会在 flutter pub get 或 flutter build 等命令执行时自动生成。
建议在 .gitignore 中排除它
.idea 项目特定的配置文件：例如代码样式、检查设置等。
本地开发者特有的设置：如最近打开的文件、调试配置、窗口布局等。
建议在 .gitignore 中排除它
android android平台相关代码
build 构建时生成的临时目录，用于存放编译后的文件、资源等构建产物
建议在 .gitignore 中排除它
ios ios平台相关代码
lib flutter相关代码，我们编写的代码就在这个文件夹
linux Linux平台相关的代码
macos macos平台相关的代码
test 用于存放测试代码
web web相关的代码
windows windows相关的代码
.gitignore git忽略文件
.metadata 记录了一些Flutter SDK 版本信息和项目的构建配置信息
建议在 .gitignore 中排除它
analysis_options.yaml 分析dart语法的文件，老项目升级成新项目有警告信息的话可以删掉
建议将其纳入版本控制系统
pubspec.lock 锁定依赖版本：记录每个依赖的确切版本，确保在不同环境中安装的依赖版本一致，避免因依赖更新导致的意外问题。
版本管理：如果只根据 pubspec.yaml 安装依赖，Flutter 可能会安装最新符合要求的版本，而 pubspec.lock 则确保安装的版本固定不变。
建议将其纳入版本控制系统
pubspec.yaml 配置文件，一般存放一些第三方库的依赖

image-20241030225111877

文件夹 作用
.gradle Gradle 构建缓存
建议在 .gitignore 中排除它
.idea 项目特定的配置文件：例如代码样式、检查设置等。
本地开发者特有的设置：如最近打开的文件、调试配置、窗口布局等。
建议在 .gitignore 中排除它
app Android 原生代码和资源文件
gradle **gradle-wrapper.properties：指定了 Gradle 的版本，并配置了 Gradle Wrapper 的下载 URL。通过该文件，项目可以使用正确的 Gradle 版本，无需开发者手动安装。
wrapper/**：存放 Gradle Wrapper 相关的文件，确保在不同开发环境中使用相同的 Gradle 版本，以保证构建一致性。
需要将其纳入版本控制系统，保证团队成员或其他开发环境在构建时自动使用正确的 Gradle 版本。
build.gradle Android 项目构建配置的核心，控制了项目的依赖、构建行为和目标平台的兼容性。
gradle.properties 用于设置一些 Gradle 构建系统的全局属性和配置选项，以便优化构建性能和控制构建过程。
建议将其纳入版本控制系统
gradlew 版本控制：gradlew 允许你在项目中指定 Gradle 的版本。这样，开发者无需手动安装 Gradle，只需使用项目中定义的版本进行构建。
环境一致性：通过使用 Gradle Wrapper，确保所有开发者在构建项目时使用相同的 Gradle 版本，避免因版本不一致引起的构建问题。
简单的构建命令：使用 ./gradlew（在 Unix 系统上）或 gradlew.bat（在 Windows 上）运行构建命令，可以直接在项目根目录中使用，而不需要全局安装 Gradle。
建议将其纳入版本控制系统
gradlew.bat 执行 Gradle 构建：通过 gradlew.bat 文件，Windows 用户可以运行 Gradle 构建命令，而无需安装 Gradle。
版本控制：它确保用户在构建项目时使用与项目配置中指定的 Gradle 版本一致，避免因版本不一致而导致的构建问题。
通常在版本控制中，应将 gradlew.bat 与 gradlew 和 gradle/wrapper/ 文件夹一并提交，以确保跨平台的构建一致性。
local.properties 主要用于存储与本地环境相关的配置信息，如 SDK 路径等
建议在 .gitignore 中排除它
settings.gradle 定义项目结构：该文件用于定义和包含一个或多个模块。对于 Android 项目来说，通常会有一个主应用模块和一些其他的库模块或子模块。
配置项目名称：可以在该文件中设置项目的名称，这在构建过程中使用。

3. Flutter入口文件，入口方法

每一个flutter项目的lib目录里面都有一个main.dart这个文件就是flutter的入口文件

main.dart里面的

1
2
3
4
5
void main(){
runApp(MyApp());
}
也可以简写
void main()=>runApp(MyApp());

其中的main方法是dart的入口方法。runApp方法是flutter的入口方法。

MyApp是自定义的一个组件。

4. Flutter第一个Demo,Center组件的使用

4.1 Demo1

1
2
3
4
5
6
7
8
9
import 'package:flutter/material.dart';
void main() {
	runApp(const Center(
		child: Text(
			"我是一个文本",
			textDirection: TextDirection.ltr, // 文本方向为从左到右
		),
	));
}

image-20240522133527784

4.2 Demo2

给Text组件增加一些装饰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import 'package:flutter/material.dart';
void main() {
  runApp(const Center(
    child: Text(
      "我是一个文本",
      textDirection: TextDirection.ltr, // 文本方向为从左到右
      style: TextStyle(
        fontSize: 40.0,
        // color: Colors.yellow,
        color: Color.fromRGBO(244, 233, 121, 0.5),
      ),
    ),
  ));
}

image-20240522140620525

4.3 Demo3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const Center(
        child: Text(
          "我是一个文本",
          textDirection: TextDirection.ltr, // 文本方向为从左到右
          style: TextStyle(
            fontSize: 40.0,
            // color: Colors.yellow,
            color: Color.fromRGBO(244, 233, 121, 0.5),
          ),
        ),
      ),
    ),
  ));
}

image-20240522143522882

4.4 Demo4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const HomeWidget(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Text(
          "我是一个文本",
          textDirection: TextDirection.ltr, // 文本方向为从左到右
          style: TextStyle(
            fontSize: 40.0,
            // color: Colors.yellow,
            color: Color.fromRGBO(244, 233, 121, 0.5),
          ),
        ),
      );
  }
}

image-20240522144618358

5. Flutter单独将内容抽离成一个组件

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget

StatelessWidget 是无状态组件，状态不可变的widget

StatefulWidget 是有状态组件，持有的状态可能在widget生命周期改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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) {
// TODO: implement build
    return const Center(
      child: Text(
        "我是一个文本内容",
        textDirection: TextDirection.ltr,
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")),
        body:const HomeWidget(),
      ),
  ));
}
class HomeWidget extends StatelessWidget{
  const HomeWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "我是一个文本",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
// color: Colors.yellow,
          color: Color.fromRGBO(244, 233, 121, 0.5),
        ),
      ),
    );
  }
}

6. 用MaterialApp和Scaffold两个组件装饰App

6.1 MaterialApp

MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

常用的属性：

  • home（主页）
  • title（标题）
  • color（颜色）
  • theme（主题）
  • routes（路由）

6.2 Scaffold

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

Scaffold 有下面几个主要属性：

appBar - 显示在界面顶部的一个 AppBar。

body - 当前界面所显示的主要内容 Widget。

drawer - 抽屉菜单控件。

7. Container容器组件

名称 功能
alignment topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter底部居中对齐bottomLeft：底部居左对齐 bottomRight：底部居右对齐
decoration decoration: BoxDecoration( color: Colors.blue, border: Border.all( color:Colors.red, width: 2.0), borderRadius:BorderRadius.circular((8)),// 圆角 ，boxShadow: [ BoxShadow( color: Colors.blue, offset: Offset(2.0, 2.0),blurRadius: 10.0, ) ], ) //LinearGradient 背景线性渐变 RadialGradient径向渐变gradient: LinearGradient( colors: [Colors.red, Colors.orange], ),