学习 Flutter 3.27+ 开发跨平台应用
基于 Dart 3.5+ 的新特性，使用单个代码库构建精美的原生应用。Impeller 渲染引擎全面取代 Skia，提供更强的性能表现。
为什么选择 Flutter？
高性能
使用原生渲染，提供60fps的流畅体验
跨平台
支持 iOS、Android、Web 和桌面平台
Material 3
全新的 Material Design 3 主题，开箱即用的现代化 UI
Impeller 引擎
新一代渲染引擎，120fps 的极致流畅体验
Dart 3.5+
Records、Patterns、Switch 表达式等现代语言特性
Flutter GPU
底层图形 API，高性能游戏和图形应用支持
Web 生产就绪
Web 平台性能和兼容性大幅提升，支持更多场景
入门指南
1
安装 Flutter SDK
下载 Flutter SDK 并配置环境变量
# 使用 FVM 管理 Flutter 版本
fvm install 3.27.0
fvm use 3.27.0
fvm global 3.27.0
# 或直接下载
# https://docs.flutter.dev/release/archive
export PATH="$PATH:`pwd`/flutter/bin"2
配置开发环境
安装 VS Code 或 Android Studio 并安装 Flutter 插件
flutter doctor -v
# 确保显示 Dart 3.5+ 版本
# 检查 Impeller 状态
flutter run -d macos --enable-impeller3
创建第一个项目
使用命令行创建你的第一个 Flutter 应用
flutter create my_first_app
cd my_first_app
flutter run教程系列
代码示例
Hello World
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(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello World'),
),
body: const Center(
child: Text('Hello, Flutter!'),
),
);
}
}计数器示例
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(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
),
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State createState() => _CounterPageState();
}
class _CounterPageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('计数器'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'你按下了按钮次数:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: '增加',
child: const Icon(Icons.add),
),
);
}
}