Flutter(一): 入门教程

简介

Flutter 是 Google 开发的开源移动应用 SDK，它允许开发者使用 Dart 语言来创建跨平台的移动应用。Flutter 的一大特点是它的高性能和美观的用户界面，这使得它成为开发现代移动应用的热门选择。

前提条件

在开始之前，请确保你的开发环境满足以下条件：

操作系统：Windows、macOS 或 Linux。
磁盘空间：至少 2 GB 的可用空间。
Flutter SDK：最新版本的 Flutter SDK。
IDE：推荐使用 Visual Studio Code 或 Android Studio，但你也可以使用 IntelliJ IDEA 或其他支持 Dart 和 Flutter 的编辑器。

步骤 1: 安装 Flutter SDK

访问 Flutter 官网并下载适用于你操作系统的 Flutter SDK。
解压下载的文件到你选择的目录。例如，在 Windows 上，你可以选择 C:\src\flutter。
将 Flutter 的 bin 目录添加到你的 PATH 环境变量中。

环境变量设置

Windows：在“控制面板”中搜索“环境变量”，然后编辑 PATH 变量，添加 Flutter bin 目录的路径。
macOS/Linux：在你的 shell 配置文件（如 .bashrc 或 .zshrc）中，添加以下行：

export PATH="$PATH:/path/to/flutter/bin"

然后，运行 source ~/.bashrc（或对应的配置文件）来使更改生效。

步骤 2: 设置你的 IDE

Visual Studio Code

下载并安装 Visual Studio Code。
打开 VS Code，转到“扩展”视图（侧边栏中的方块图标）。
搜索并安装以下插件：

Flutter
Dart
Awesome Flutter Snippets
Flutter Color
Image Preview
Svg Preview
YAML
Todo Tree
Thunder Client
Git Graph
Bracket Pair Colorizer
Material Icon Theme
Error Lens
Json to Dart Model
Pubspec Assist

Android Studio / IntelliJ IDEA

下载并安装 Android Studio 或 IntelliJ IDEA。
打开 IDE，选择“Configure” > “Plugins”。
搜索并安装以下插件：

Flutter
Dart

步骤 3: 验证环境

在命令行或终端中运行以下命令来验证你的 Flutter 环境：

flutter doctor

这个命令会检查你的环境并提供任何缺失依赖项的安装指导。确保解决所有问题，因为它们可能会影响 Flutter 应用的开发。

步骤 4: 创建你的第一个 Flutter 应用

1. 打开命令行或终端。
2. 运行以下命令来创建一个新的 Flutter 项目：

flutter create my_first_flutter_app

3. 进入项目目录：

cd my_first_flutter_app

4. 启动应用：

flutter run

这将构建并运行你的应用。如果你连接了 Android 或 iOS 设备，应用将会在设备上运行。如果没有连接设备，它将在模拟器或模拟器中运行。

步骤 5: 探索你的 Flutter 应用

打开 lib/main.dart 文件，这是 Flutter 应用的入口点。你将看到以下代码：

import 'package:flutter/material.dart';

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

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

这段代码创建了一个简单的 Flutter 应用，它显示了一个带有 "Hello, World!" 文本的屏幕。

步骤 6: 运行和调试
使用 IDE 的运行按钮或命令行来启动你的应用。你可以在 IDE 中设置断点来调试你的代码。

Flutter(一): 入门教程