Flutter项目试水

1基本介绍

本文章在构建您的第一个 Flutter 应用指导下举行实践
可作为项目实践的辅助参考资料
Flutter 是 Google 的界面工具包，用于通过单一代码库针对移动设备、Web 和桌面设备构建应用。在此 Codelab 中，您将构建以下 Flutter 应用。
该应用可以生成好听的英文名，例如“newstay”“lightstream”“mainbrake”或“graypine”。用户可以请求生成下一个英文名，收藏当前英文名，以及在单独的页面上检察收藏的英文名列表。该应用可自实用不同的屏幕尺寸。
学习内容

• Flutter 的基本工作原理
  
• 在 Flutter 中创建布局
  
• 关联用户互动（如按下按钮）与应用行为
  
• 让 Flutter 代码井然有序
  
• 让应用能够自实用不同的屏幕尺寸
  
• 让应用具有一致的外观和风格
  

您将从一个基本的基架开始构建应用，如许您就可以直接跳到感爱好的部分。

2设置您的 Flutter 环境

Flutter环境设置，见在macOS上构建Flutter iOS应用-CSDN博客

3创建项目

1.  import 'package:english_words/english_words.dart';
2.  import 'package:flutter/material.dart';
3.  import 'package:provider/provider.dart';
4.  ​
5.  void main() {
6.    runApp(MyApp());
7.  }
8.  ​
9.  class MyApp extends StatelessWidget {
10.    const MyApp({super.key});
11.  ​
12.    @override
13.    Widget build(BuildContext context) {
14.      return ChangeNotifierProvider(
15.        create: (context) => MyAppState(),
16.        child: MaterialApp(
17.          title: 'Namer App',
18.          theme: ThemeData(
19.            useMaterial3: true,
20.            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
21.          ),
22.          home: MyHomePage(),
23.        ),
24.      );
25.    }
26.  }
27.  ​
28.  class MyAppState extends ChangeNotifier {
29.    var current = WordPair.random();
30.  }
31.  ​
32.  class MyHomePage extends StatelessWidget {
33.    @override
34.    Widget build(BuildContext context) {
35.      var appState = context.watch<MyAppState>();
36.  ​
37.      return Scaffold(
38.        body: Column(
39.          children: [
40.            Text('A random idea:'),
41.            Text(appState.current.asLowerCase),
42.          ],
43.        ),
44.      );
45.    }
46.  }

复制代码

简朴实现基本框架

4添加按钮

在3的基础上添加了next按钮，类似如许的结果迁移到模拟器上

5改善应用外观

水平垂直居中，字母格式、颜色调解

6添加功能

加入like功能，将按钮关联至 toggleFavorite()。

7添加侧边导航栏

8添加新页面

9后续步骤

• 基于您在此 Codelab 中编写的应用，开展进一步的尝试和探索。
  
• 检察此高级版本的同一应用的代码，了解如何添加动画列表、渐变、淡出淡入结果等。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。