在 Debian 上使用 Flutter 进行 UI 设计的完整流程
一 环境准备与安装
- 系统要求：建议使用 64 位 Debian，并具备基础编译工具。
- 安装方式一（推荐）手动安装 SDK：
- 下载 Flutter SDK（Linux 压缩包，通常为 .tar.xz）。
- 解压到用户目录，例如：
tar -xf ~/Downloads/flutter_linux_$(uname -m)-stable.tar.xz -C ~/
- 配置环境变量（~/.bashrc 或 ~/.zshrc）：
export PATH=“$HOME/flutter/bin:$PATH”
source ~/.bashrc
- 安装方式二 使用 Snap：
sudo apt update && sudo apt install snapd
sudo snap install flutter --classic
- 安装 Linux 图形依赖（用于桌面端运行与调试）：
sudo apt update && sudo apt install clang cmake build-essential pkg-config
libegl1-mesa-dev libxkbcommon-dev libgles2-mesa-dev libwayland-dev wayland-protocols
git curl wget unzip
- 验证环境：
flutter doctor（逐项检查并修复缺失项，如 Android SDK/设备、编辑器插件等）
二 创建项目与运行
- 创建项目：
flutter create my_app && cd my_app
- 运行与热重载：
flutter run（保存 Dart 文件后可触发 热重载，快速预览 UI 变化）
- 选择目标设备：
flutter devices 查看可用设备/模拟器；连接 Android 真机或启动模拟器后再次运行
三 UI 设计与布局要点
-
核心思想：Flutter 以 Widget 为基本单元，UI 通过组合与嵌套 Widget 实现。
-
常用布局组件：
- Row/Column：水平/垂直布局
- Stack：层叠布局
- Container：尺寸、装饰与对齐
- Padding/Align/Expanded/Flexible：间距、对齐与弹性填充
-
示例（在 lib/main.dart 中替换默认代码）：
import ‘package:flutter/material.dart’;
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘Flutter UI Demo’,
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(‘Home’)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(onPressed: () {}, child: const Text(‘Button 1’)),
const SizedBox(height: 20),
ElevatedButton(onPressed: () {}, child: const Text(‘Button 2’)),
],
),
),
);
}
}
要点：使用 MaterialApp/Scaffold 搭建页面骨架，借助 Column/Row/Container 组合界面，利用 Expanded 分配剩余空间
四 调试与性能优化
- 使用 Flutter DevTools：
flutter pub get
flutter run --debug
在 DevTools 中检查 Widget 树、状态、性能、网络 等，定位布局与性能瓶颈。
- 性能优化建议：
- 优先使用 const 构造函数创建不可变组件，减少重建
- 最小化 setState 范围，避免全量重建
- 耗时任务放入 Isolate，避免阻塞 UI 线程
- 使用 RepaintBoundary 隔离重绘区域
- 保持 Flutter 与依赖库 为较新稳定版本
五 桌面端与编辑器配置
- 桌面端运行：Flutter 支持在 Linux 桌面运行与调试，确保已安装上文的 图形依赖，并使用 flutter run 选择桌面设备（如 Linux）进行预览。
- 编辑器与插件：
- 安装 VS Code，在扩展市场安装 Dart 与 Flutter 插件，获得代码提示、调试、热重载集成体验。
- 也可使用 Android Studio 及其 Flutter 插件 进行深度集成开发。