- Flutter实战指南
- 李楠
- 664字
- 2021-04-04 00:06:11
2.1 创建一个Flutter项目
要创建一个Flutter项目,需要使用Flutter命令。首先需要配置Flutter的环境变量,在第1章已经介绍了,然后在命令提示符中运行命令flutter create加上项目名称,如图2.1所示,如果项目名称涉及多个单词,请使用下画线分隔,而不可以使用横线和空格,单击回车键。
这将在当前运行命令的目录下创建一个新的目录,所以要确认好当前的目录。新创建的目录中包含了大量Flutter自动创建的Android和iOS相关文件。项目创建完成后,在日志中会显示一些可以运行的命令。现在不需要运行它们,而是使用IDE打开这个新创建的项目。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P30_214.jpg?sign=1739397910-RgXCyuFsU4dJVTUMM04U0VR2tjSMnxRb-0-de21acdef929b2c17790847d75977253)
图2.1 创建Flutter项目的命令
这里使用Visual Studio Code打开这个项目,也可以使用Android Studio打开它。首先确保Visual Studio Code安装了Flutter插件,然后打开Visual Studio Code集成的终端,在View下选择Terminal,如图2.2所示。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P31_229.jpg?sign=1739397910-WUaHe4Xm8OXNwEPESTkDqt0aawbV1iYg-0-3c818e6730dcefeaba13926ee4c908fb)
图2.2 打开Visual Studio Code中的终端
在当前项目目录下的Terminal中运行Flutter命令,但是现在还启动不了,因为运行Flutter项目需要一个模拟器或一个真实的设备。这里使用模拟器,所以让我们快速启动一个模拟器,打开Android Studio,单击“Tools”按钮,再单击“AVD Manager”按钮,如图2.3所示。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P31_237.jpg?sign=1739397910-5ixDd5Gkj6a4a4gORzG8ngjukBavHFrH-0-f67b1c35f834fe66fcfc8f36c63aac1d)
图2.3 打开Visual Studio Code中的终端
选择一个设备,也可以创建一个新的设备,并单击右侧的“▶”运行按钮,如图2.4所示。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P32_245.jpg?sign=1739397910-LlhqjLNbqP0c5347lbYHxRX89RHyjSR6-0-4d59f5dc73e032a5ff6e6ce70f9c07a2)
图2.4 启动Android模拟器
模拟器运行起来后,回到Visual Studio Code中,启动Flutter项目,单击“Debug”按钮,选择“Start Debugging”,或者“Start Without Debugging”,如图2.5所示。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P32_254.jpg?sign=1739397910-OQjHajZBoJzvhyg3z7cHhTp89IXUiInJ-0-d5fb5eda41e2b263e449775a3601f2e2)
图2.5 启动Flutter项目
此时模拟器有可能会提示选择环境变量,只需选择Flutter And Dart即可。构建好Flutter项目后,IDE会发送给模拟器,如图2.6所示。
顶部有个控制面板,可以调试、重启、退出、暂停项目。这个应用程序如图2.6中模拟器所示,这是Flutter自带的,而不是我们编写的,下一节我们将重新编写一个应用程序。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P33_262.jpg?sign=1739397910-w5DQxPhyuYQC8oKdPJWrgw7b56wlgeta-0-6022ff3b7e1460a7e5ebb1ed8c447cfe)
图2.6 运行的Flutter项目