![Flutter技术入门与实战(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/1/27185001/b_27185001.jpg)
1.3 写第一个Flutter程序
万事开头难,让我们开始写第一个简单的Flutter程序,具体步骤如下。
步骤1新建一个Flutter工程,选择Flutter Application,如图1-21所示。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0029-0030.jpg?sign=1739277037-fENeLPJaH2a0p5IRR0Oc7i67lG4CCbsO-0-e926d91c0b12f029c31758d4cd766ba3)
图1-21 新建工程
步骤2点击Next按钮,打开应用配置界面,在Project name中填写helloworld,Flutter SDK path使用默认值,IDE会根据SDK安装路径自动填写,Project location填写为工程放置的目录,在Description中填写项目描述,任意字符即可,如图1-22所示。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0029-0031.jpg?sign=1739277037-bT7aVUNnM1jNm4B0AqHVSVRUd64q1azN-0-ea97b6230e88a2fa0e4c7ba1bd2624b0)
图1-22 配置Flutter工程
步骤3点击Next按钮,打开包设置界面,在Company domain中填写域名,注意域名要反过来写,这样可以保证全球唯一,Platform channel language下面的两个选项不需要选中,如图1-23所示。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0030-0032.jpg?sign=1739277037-tRirEKmDeXatdF56QoBs9giqAs4ZufcR-0-ef33cabe5766503fb87de4428778a804)
图1-23 设置包名界面
步骤4点击Finish按钮开始创建第一个工程,等待几分钟,会创建如图1-24所示的工程。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0030-0033.jpg?sign=1739277037-Wr9IyW1YeiYPhOfhPtCZS1R69X2IABRg-0-96e8f8354ca2bf4e855b137673dbaf1e)
图1-24 示例工程主界面
步骤5工程创建好后,可以先运行一下官方创建的示例,看一看运行效果,点击Open iOS Simulator打开iOS模拟器,具体操作如图1-25所示。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0031-0034.jpg?sign=1739277037-eA7A1ene7Hpwma4NhP406whuxeBPgnQa-0-12aa195f9211d539ece02a584cc56667)
图1-25 打开模拟器菜单示意图
步骤6等待几秒钟后会打开模拟器,如图1-26所示。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0031-0035.jpg?sign=1739277037-u3aqqHx2euJTpGhvyUdh1utmbgMuaA8i-0-db88b3a482a9f8e174ff08fe864eb4e6)
图1-26 模拟器启动完成图
步骤7点击debug(调试)按钮,启动官方示例程序,点击+按钮,可以自动加1,此示例是一个基于Material Design风格的应用程序,如图1-27所示。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0032-0036.jpg?sign=1739277037-cD8KYGFgoZfYWJ1XsvxK7H8cGBLt1h60-0-28891556e5b4d92034a6e78b34ff181e)
图1-27 官方示例运行效果图
步骤8接下来我们打开工程目录下的main.dart文件,清空main.dart代码,如图1-28箭头所指。
![](https://epubservercos.yuewen.com/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0032-0037.jpg?sign=1739277037-VEfuBZJ6Gj5BtkbXUhI3VfNUbWbHQSPG-0-527720099fc3fe3e8a0111f8dacc0290)
图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/0DFF55/15532105805769406/epubprivate/OEBPS/Images/Figure-0033-0038.jpg?sign=1739277037-dxCwahxCSFlWqJxgWJDEEJIguZWRFGTm-0-03c99126dc294361ac580a126a023e0b)
图1-29 Hello World运行效果图