‌Flutter新手必看：从环境配置到界面开发的完整流程

报错，90%的环境问题可通过其指引解决！：遇到问题时优先查阅。

2501_93893097

817人浏览 · 2025-10-24 15:40:20

2501_93893097 · 2025-10-24 15:40:20 发布

Flutter新手必看：从环境配置到界面开发的完整流程

一、环境配置（Windows/macOS通用）

安装Flutter SDK
- 下载Flutter SDK
- 解压到指定目录（例如C:\flutter或~/flutter）
- 配置环境变量：
```
# 添加到PATH
export PATH="$PATH:`pwd`/flutter/bin"
```
- 验证安装：
```
flutter doctor
```
安装IDE与插件
- Android Studio（含Android SDK）
  - 安装Android Studio
  - 配置Android模拟器（AVD Manager）
- VS Code（推荐）
  - 安装扩展：Flutter和Dart
- 通过flutter doctor检查依赖项并修复警告（如Android许可）：
```
flutter doctor --android-licenses
```
配置开发环境
- 确保设备连接：
```
flutter devices  # 查看可用设备
```

二、创建第一个Flutter项目

初始化项目

flutter create my_first_app
cd my_first_app

项目结构解析

├── lib/          # 核心代码
│   └── main.dart  # 入口文件
├── android/      # Android平台配置
├── ios/          # iOS平台配置
└── pubspec.yaml  # 依赖管理文件

运行默认应用

flutter run  # 启动调试（需连接设备/模拟器）

三、界面开发基础

理解Widget树
Flutter界面由嵌套Widget构成，例如：

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("首页")),
    body: Center(child: Text("Hello Flutter!")),
  ),
)

状态管理入门

StatelessWidget（静态界面）

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("不可变内容");
  }
}

StatefulWidget（动态界面）

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  void increment() => setState(() => count++);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("计数: $count"),
        ElevatedButton(onPressed: increment, child: Text("+1")),
      ],
    );
  }
}

常用Widget速查

类型	Widget示例	用途
布局	`Row`, `Column`, `Stack`	水平/垂直/层叠排列
基础组件	`Text`, `Image`, `Icon`	显示文本/图片/图标
交互	`ElevatedButton`, `TextField`	按钮/输入框
容器	`Container`, `Padding`	样式控制与间距

四、实战：开发一个天气应用界面

添加依赖
编辑pubspec.yaml：

dependencies:
  http: ^0.13.5  # 网络请求
  flutter_spinkit: ^5.1.0  # 加载动画

运行flutter pub get

界面代码示例

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class WeatherApp extends StatefulWidget {
  @override
  _WeatherAppState createState() => _WeatherAppState();
}

class _WeatherAppState extends State<WeatherApp> {
  String temperature = "加载中...";

  Future<void> fetchWeather() async {
    final response = await http.get(Uri.parse("https://api.weather.com/data"));
    setState(() => temperature = "${response.body['temp']}°C");
  }

  @override
  void initState() {
    super.initState();
    fetchWeather();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("实时天气")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.wb_sunny, size: 100),
            Text("当前温度: $temperature", style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}