第一个Flutter应用：Hello World与个人信息卡片 引言学习任何编程语言或框架Hello World都是第一步。在Flutter中我们不仅可以创建简单的Hello World应用还可以快速构建一个具有实用功能的个人信息卡片应用。本文将引导你从创建第一个Flutter应用开始逐步构建一个完整的个人信息展示页面。一、创建Flutter项目1.1 环境准备在创建Flutter应用之前确保你已经安装了以下工具Flutter SDK代码编辑器推荐VS Code或Android Studio模拟器或真机1.2 创建项目打开终端执行以下命令创建一个新的Flutter项目flutter create myappcdmyapp这个命令会创建一个名为myapp的Flutter项目包含所有必要的文件和配置。1.3 项目结构创建项目后你会看到以下目录结构myapp/ ├── lib/ │ └── main.dart # 应用入口文件 ├── pubspec.yaml # 项目配置文件 ├── README.md # 项目说明文档 ├── ios/ # iOS平台代码 ├── android/ # Android平台代码 └── ohos/ # 鸿蒙平台代码二、Hello World应用2.1 查看默认代码打开lib/main.dart文件你会看到Flutter自动生成的Hello World代码importpackage:flutter/material.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter Demo,theme:ThemeData(colorScheme:ColorScheme.fromSeed(seedColor:Colors.deepPurple),useMaterial3:true,),home:constMyHomePage(title:Flutter Demo Home Page),);}}classMyHomePageextendsStatefulWidget{constMyHomePage({super.key,requiredthis.title});finalStringtitle;overrideStateMyHomePagecreateState()_MyHomePageState();}class_MyHomePageStateextendsStateMyHomePage{int _counter0;void_incrementCounter(){setState((){_counter;});}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(backgroundColor:Theme.of(context).colorScheme.inversePrimary,title:Text(widget.title),),body:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:Widget[constText(You have pushed the button this many times:,),Text($_counter,style:Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton:FloatingActionButton(onPressed:_incrementCounter,tooltip:Increment,child:constIcon(Icons.add),),);}}2.2 运行Hello World应用执行以下命令运行应用flutter run你会看到一个简单的应用包含一个计数器和一个悬浮按钮。点击悬浮按钮计数器会递增。2.3 代码解析第一部分入口与根组件voidmain(){runApp(constMyApp());}main函数是应用的入口点runApp函数启动Flutter框架。第二部分MyApp组件classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter Demo,theme:ThemeData(...),home:constMyHomePage(title:Flutter Demo Home Page),);}}MyApp是应用的根组件返回一个MaterialApp。第三部分MyHomePage组件classMyHomePageextendsStatefulWidget{constMyHomePage({super.key,requiredthis.title});finalStringtitle;overrideStateMyHomePagecreateState()_MyHomePageState();}MyHomePage是一个StatefulWidget包含可变状态。第四部分状态管理class_MyHomePageStateextendsStateMyHomePage{int _counter0;void_incrementCounter(){setState((){_counter;});}// ...}_counter是状态变量setState方法触发UI更新。三、构建个人信息卡片应用3.1 修改main.dart现在我们将修改main.dart来创建一个个人信息卡片应用importpackage:flutter/material.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:个人信息应用,debugShowCheckedModeBanner:false,theme:ThemeData(primarySwatch:Colors.blue,brightness:Brightness.light,),home:constHomePage(),);}}classHomePageextendsStatelessWidget{constHomePage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(个人信息)),body:constCenter(child:Card(elevation:4,child:Padding(padding:EdgeInsets.all(24),child:Column(mainAxisSize:MainAxisSize.min,children:[CircleAvatar(radius:48),SizedBox(height:16),Text(张三,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold)),Text(28岁),Text(软件工程师),],),),),),);}}3.2 代码解析第一部分入口与根组件voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:个人信息应用,debugShowCheckedModeBanner:false,theme:ThemeData(primarySwatch:Colors.blue),home:constHomePage(),);}}这段代码定义了应用入口和根组件。MaterialApp配置了应用标题、主题和首页。第二部分首页组件classHomePageextendsStatelessWidget{constHomePage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(个人信息)),body:constCenter(child:Card(elevation:4,child:Padding(padding:EdgeInsets.all(24),child:Column(mainAxisSize:MainAxisSize.min,children:[CircleAvatar(radius:48),SizedBox(height:16),Text(张三,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold)),Text(28岁),Text(软件工程师),],),),),),);}}这段代码定义了首页组件包含Scaffold页面骨架包含AppBar和bodyAppBar顶部导航栏显示个人信息标题Center居中对齐子组件Card卡片组件带有阴影效果Padding内边距Column垂直布局CircleAvatar圆形头像Text文本组件显示姓名、年龄和职业3.3 运行应用执行以下命令运行应用flutter run你会看到一个显示个人信息的卡片应用。四、增强个人信息卡片4.1 添加更多信息让我们添加更多个人信息包括邮箱、电话和地址classHomePageextendsStatelessWidget{constHomePage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(个人信息)),body:constCenter(child:Card(elevation:4,margin:EdgeInsets.all(16),child:Padding(padding:EdgeInsets.all(24),child:Column(mainAxisSize:MainAxisSize.min,children:[CircleAvatar(radius:48),SizedBox(height:16),Text(张三,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold)),Text(28岁),Text(软件工程师),SizedBox(height:24),Divider(color:Colors.grey),SizedBox(height:16),Row(children:[Icon(Icons.email,color:Colors.blue),SizedBox(width:8),Text(zhangsanexample.com),],),SizedBox(height:8),Row(children:[Icon(Icons.phone,color:Colors.green),SizedBox(width:8),Text(138-0000-0000),],),SizedBox(height:8),Row(children:[Icon(Icons.location_on,color:Colors.red),SizedBox(width:8),Text(北京市朝阳区),],),],),),),),);}}4.2 添加悬浮按钮添加一个悬浮按钮用于编辑个人信息classHomePageextendsStatelessWidget{constHomePage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(个人信息)),body:constCenter(child:Card(// ... 卡片内容),),floatingActionButton:FloatingActionButton(onPressed:()_showEditDialog(context),child:constIcon(Icons.edit),),);}void_showEditDialog(BuildContextcontext){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text(编辑功能开发中)),);}}4.3 添加底部导航栏添加底部导航栏包含首页和设置两个选项classHomePageextendsStatefulWidget{constHomePage({super.key});overrideStateHomePagecreateState()_HomePageState();}class_HomePageStateextendsStateHomePage{int _selectedIndex0;void_onItemTapped(int index){setState((){_selectedIndexindex;});}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(个人信息)),body:constCenter(child:Card(// ... 卡片内容),),floatingActionButton:FloatingActionButton(onPressed:()_showEditDialog(context),child:constIcon(Icons.edit),),bottomNavigationBar:BottomNavigationBar(items:const[BottomNavigationBarItem(icon:Icon(Icons.home),label:首页,),BottomNavigationBarItem(icon:Icon(Icons.settings),label:设置,),],currentIndex:_selectedIndex,onTap:_onItemTapped,),);}void_showEditDialog(BuildContextcontext){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text(编辑功能开发中)),);}}五、运行与调试5.1 运行应用# 运行在Android模拟器flutter run-dandroid# 运行在iOS模拟器flutter run-dios# 运行在鸿蒙模拟器flutter run-dohos# 运行在Chrome浏览器flutter run-dchrome5.2 热重载在应用运行过程中修改代码后按r键可以进行热重载# 在终端中按r键r热重载会保留应用状态快速更新UI。5.3 热重启按R键可以进行热重启# 在终端中按R键R热重启会重置应用状态重新执行main函数。六、构建发布版本6.1 构建Android APKflutter build apk构建产物位于build/app/outputs/flutter-apk/app-release.apk。6.2 构建iOS IPAflutter build ios构建产物位于build/ios/iphoneos/Runner.app。6.3 构建鸿蒙HAPflutter build hap构建产物位于build/ohos/outputs/hap/release/。6.4 构建Web版本flutter build web构建产物位于build/web/。七、常见问题与解决方案7.1 问题1应用无法启动问题描述执行flutter run时应用无法启动。解决方案检查是否安装了正确的SDK版本检查模拟器是否正常运行执行flutter doctor检查环境7.2 问题2热重载不生效问题描述修改代码后热重载不生效。解决方案确保代码没有编译错误确保修改的是Widget树中的内容尝试使用热重启7.3 问题3布局溢出问题描述页面内容超出屏幕边界。解决方案使用ListView包裹内容使用SingleChildScrollView包裹内容调整Column的mainAxisSize八、总结通过本文的学习我们掌握了以下核心知识点创建Flutter项目使用flutter create命令创建项目Hello World应用理解Flutter应用的基本结构构建个人信息卡片使用Scaffold、Card、Column等组件构建页面增强功能添加更多信息、悬浮按钮、底部导航栏运行与调试热重载、热重启、构建发布版本创建第一个Flutter应用是学习Flutter的起点。在后续章节中我们将深入探讨更多高级主题包括状态管理、路由导航、网络请求等。参考资料Flutter官方文档https://docs.flutter.dev/Flutter入门指南https://docs.flutter.dev/get-started/codelabMaterial Design官方文档https://material.io/design