1基本介绍
本文章在构建您的第一个 Flutter 应用指导下进行实践
可作为项目实践的辅助参考资料
Flutter 是 Google 的界面工具包，用于通过单一代码库针对移动设备、Web 和桌面设备构建应用。在此 Codelab 中，您将构建以下 Flutter 应用。
该应用可以生成好听的英文名，例如"newstay""lightstream""mainbrake"或"graypine"。用户可以请求生成下一个英文名，收藏当前英文名，以及在单独的页面上查看收藏的英文名列表。该应用可自适用不同的屏幕尺寸。
学习内容
-
Flutter 的基本工作原理
-
在 Flutter 中创建布局
-
关联用户互动（如按下按钮）与应用行为
-
让 Flutter 代码井然有序
-
让应用能够自适用不同的屏幕尺寸
-
让应用具有一致的外观和风格
您将从一个基本的基架开始构建应用，这样您就可以直接跳到感兴趣的部分。
2设置您的 Flutter 环境
Flutter环境配置，见在macOS上构建Flutter iOS应用-CSDN博客
3创建项目
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => MyAppState(),
child: MaterialApp(
title: 'Namer App',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
),
home: MyHomePage(),
),
);
}
}
class MyAppState extends ChangeNotifier {
var current = WordPair.random();
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();
return Scaffold(
body: Column(
children: [
Text('A random idea:'),
Text(appState.current.asLowerCase),
],
),
);
}
}简单实现基本框架
4添加按钮
在3的基础上添加了next按钮，类似这样的效果迁移到模拟器上
5改善应用外观
水平垂直居中，字母格式、颜色调整
6添加功能
加入like功能，将按钮关联至 toggleFavorite()。
7添加侧边导航栏
8添加新页面
9后续步骤
-
基于您在此 Codelab 中编写的应用，开展进一步的尝试和探索。
-
查看此高级版本的同一应用的代码，了解如何添加动画列表、渐变、淡出淡入效果等。