![Flutter技术入门与实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/607/24027607/b_24027607.jpg)
1.3 第一个Flutter程序
万事开头难,我们用Hello World来看一个最简单的Flutter工程,具体步骤如下。
步骤1:新建一个Flutter工程,选择Flutter Application,如图1-21所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1739657726-crMprf2gfVDSfetN8upkrj2FaHYb36a1-0-7184cb5e971fc874170fe06d8bb27c4d)
图1-21 新建工程
步骤2:点击Next按钮,打开应用配置界面,其中在Project name中填写helloworld,Flutter SDK path使用默认值,IDE会根据SDK安装路径自动填写,Project location填写为工程放置的目录,在Description中填写项目描述,任意字符即可,如图1-22所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1739657726-hKdaWP5Tq4Scpg0vmovvjh23fYUc942c-0-c835631941a953da5b418773a07f2560)
图1-22 配置Flutter工程
步骤3:点击Next按钮,打开包设置界面,在Company domain中填写域名,注意域名要反过来写,这样可以保证全球唯一,Platform channel language下面的两个选项不需要勾选,如图1-23所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1739657726-OJEOp6puPmmu4PCrMJWH5mPVjenx5Eby-0-d2e04f52236f02c8c33fd5866be15a0f)
图1-23 设置包名界面
步骤4:点击Finish按钮开始创建第一个工程,等待几分钟,会创建如图1-24所示工程。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1739657726-8pbj1Cy7rudQVk80EIEnwl4l9diENUjX-0-6f3d1bebece14c3b1d8318b9b79ef696)
图1-24 示例工程主界面
步骤5:工程建好后,可以先运行一下看看根据官方创建的示例运行的效果,点击Open iOS Simulator打开iOS模拟器,具体操作如图1-25所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0029_0002.jpg?sign=1739657726-iGf47VdclLfgVQcqyyl919L1ukt4KxyF-0-079e2a13c2c06ba6edce093fac8e1ff3)
图1-25 打开模拟器菜单示意图
步骤6:等待几秒钟后会打开模拟器,如图1-26所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0030_0001.jpg?sign=1739657726-X4Vc9lZorWzIvAA7F0MuzbUiKOWrTLfd-0-a88c905309d9f70ff80fc0522cbfc1c7)
图1-26 模拟器启动完成图
步骤7:点击debug(调试)按钮,启动官方示例程序,点击+号按钮,可以自动加1,此示例是一个基于Material Design风格的应用程序,如图1-27所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1739657726-vxDR5azccsVHkzGWVJEvJu0805pHdxs7-0-2be3b3940ad5fb44da2f517fe1bd5a80)
图1-27 官方示例运行效果图
步骤8:接下来我们打开工程目录下的main.dart文件,清空main.dart代码,如图1-28箭头所指。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1739657726-FzAXBgWmNpm2OZrwI6brD0PtT78Yk7KJ-0-76eedcfff36ae06ae9de3de7f6f34336)
图1-28 打开main.dart文件
步骤9:把Hello World代码粘贴至main.dart文件里,完整代码如下所示:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } }
步骤10:重新运行此程序,标题栏显示Welcome to Flutter,页面中间显示Hello World。这样,第一个Flutter程序就运行出来啦,如图1-29所示。
![](https://epubservercos.yuewen.com/BBB2AF/12837008604804106/epubprivate/OEBPS/Images/figure_0032_0001.jpg?sign=1739657726-vVh6zbC1ESqEgWqtFW0oWmCKDCGMVKlW-0-393a3aa1bced73bb1f0b8acfcd77db6c)
图1-29 Hello World运行效果图