Flutter项目试水

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 中编写的应用,开展进一步的尝试和探索。

  • 查看此高级版本的同一应用的代码,了解如何添加动画列表、渐变、淡出淡入效果等。

相关推荐
某非著名程序员1 小时前
Flutter 新手绕不过的坑:ListView 为啥顶部老有空白?
flutter·客户端
恋猫de小郭2 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
九丝城主1 天前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克1 天前
七、性能优化
flutter·性能优化
恋猫de小郭2 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡2 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克2 天前
十、高级概念
flutter
帅次3 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡3 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter