木辛老师来了，本节课咱们一起把Flutter开发环境搭建起来吧！

请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Flutter基础编程知识，变身快乐的编程达人吧~

大家好！木辛老师又来了！

好多同学都迫不及待地等着木辛老师把Flutter程序真正做出来啦呢！

好吧，既然我们已经将所有的开发工具准备好了，那么，这节课我们就做出一个真正的Flutter的小小程序吧！

从零开始

从零开始创建一个Flutter程序，最简单也是最快速的方式就是执行如下命令：

?  flutter_project flutter create demo        
Creating project demo...
  demo/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  demo/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created)
  demo/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  demo/ios/Runner/Info.plist (created)
  demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
  demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png (created)
  demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json (created)
  demo/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png (created)
  demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png (created)
  demo/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png (created)

……


  demo/android/app/src/profile/AndroidManifest.xml (created)
  demo/android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  demo/android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  demo/android/app/src/main/res/drawable/launch_background.xml (created)
  demo/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  demo/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  demo/android/app/src/main/res/values-night/styles.xml (created)
  demo/android/app/src/main/res/values/styles.xml (created)
  demo/android/app/src/main/res/drawable-v21/launch_background.xml (created)
  demo/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  demo/android/app/src/main/AndroidManifest.xml (created)
  demo/android/app/src/debug/AndroidManifest.xml (created)
  demo/android/gradle/wrapper/gradle-wrapper.properties (created)

 ……

  demo/.idea/runConfigurations/main_dart.xml (created)
  demo/.idea/libraries/Dart_SDK.xml (created)
  demo/.idea/libraries/KotlinJavaRuntime.xml (created)
  demo/.idea/modules.xml (created)
  demo/.idea/workspace.xml (created)
Running "flutter pub get" in demo...                             1,540ms
Wrote 78 files.

All done!
In order to run your application, type:

  $ cd demo
  $ flutter run

To enable null safety, type:

  $ cd demo
  $ dart migrate --apply-changes

Your application code is in demo/lib/main.dart.

?  flutter_project

命令执行完毕之后，会创建一个子目录，在这个目录下是名为demo的项目。

木辛老师说

flutter项目的名称是不区分大小写的。所以，建议你能够使用小写形式进行项目名称的命名，并且采用下划线加小写字母的方式作为完整的项目名称。

Flutter的项目结构

我们看下Flutter项目的目录结构。

通过这个目录结构，我们还看到这么几个目录和文件：

1. Android 和iOS目录：这两个目录分别对应的是Android和iOS平台所需要的代码，一般情况下我们是不需要对这两个目录下的diamante进行修改的；
2. lib目录：就像我们之前说的那样，主要文件放到了这个目录下，以Dart文件为主。你将要在这个目录下完成几乎所有的开发任务和源代码的编写。
3. test目录：如果你要进行单元测试什么的，就可以在这个目录下边折腾折腾啦。

同时，你还能看到这么几个文件：

1. pubspec.yaml：其实这个文件是Dart项目里需要的文件。通过这个文件我们可以设置诸如，项目名称，描述，依赖。如果你有时间、有精力，务必请好好阅读以下这里的内容，能够让你更加深入地了解和把控这个新的项目；
2. .gitignore and README.md：这两个文件咱们就不赘述了，满大街的项目都会存在这两个文件。它们就是为了git而生滴（虽然我们现在还有做版本管理(*^▽^*)）。
3. .metadata and .packages： 这俩货估计你在整个项目开发的过程中都不会打开看一眼，也没必要。之所以存在是因为它对于Flutter是非常重要的，千万不要手抖删除咯啊！

运行吧

既然Flutter项目已经创建完毕了，接下来最激动人心的时刻就到了，我们可以开始运行程序啦！

启动这个项目的方法有那么几个，最简单的方式是使用IDE的“执行”按钮启动程序。当然了，最直观的方法是使用命令行：

?  flutter run
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             15.2s
Debug service listening on ws://127.0.0.1:56430/eQmJuBr4sik=/ws

Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

然后看看会有什么效果？

经过了不短也不长的等待之后，我们终于看到了结果。

实在是太神奇了！程序竟然打开了默认的浏览器，并且把效果显示出来了，见上图。

看来默认不做任何设置，Flutter会直接在使用WEB模式调试程序（这个我还需要再消耗一下）？

然后，再来看下如果通过Android Studio执行程序会怎样？

系统会让你先选择目标设备，这里木辛老师用的是iPhone12 Pro Max（mobile）。选择之后，系统会自动打开iOS的模拟器，然后点击绿色下按钮之后，就开始编译程序了：

这个编译的过程可能也是需要一些时间，完全取决于你自己电脑的配置，或长或短。

一旦编译安装完成，模拟器上就行自动执行这个APP了。

如果你手头恰好有个手机（Android或者iOS系统）的，那么你就可以通过数据线连接到电脑上，按照相同的步骤将这个程序同步到手机上进行体验了。

通过这么一系列的步骤，我们就顺利完成了Flutter项目的体验，开心不？

当然了，如果你还想再玩一会，也是可以的。比如：查看一下你本机到底有多个设备可用，可以这么做：

?  flutter devices                
1 connected device:

Chrome (web) ? chrome ? web-javascript ? Google Chrome 88.0.4324.182
?  flutter emulators              
3 available emulators:

apple_ios_simulator ? iOS Simulator        ? Apple  ? ios
Nexus_5X_API_28     ? Nexus 5X API 28      ? Google ? android
Nexus_7_2012_API_R  ? Nexus 7 (2012) API R ? Google ? android

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager
?  

可以通过如上两个命令查看你本地的设备和模拟器的情况，是不是更加好玩啦！

当然了，这两个命令还是有很大区别的

flutter devices

这个命令是告诉咱们，你当前有多少个设备可用。因为我开着Chorme，所以只要运行程序的话，Chrome都会作为首选的设备被打开。但是因为刚才我关闭了iOS 模拟器，所以，你在这个命令中是看不到这个模拟器的，也就是说，不能使用iOS模拟器调试程序啦。

flutter emulators

而这个命令则不同，只要你存在的设备，它都会给你显示出来。注意一点，如果你曾经连接过手机或者平板设备，在这里也是仍然不会显示的哟。

热重载（Hot reload）

一旦你的APP在设备上（模拟器、浏览器、手机或者平板电脑）运行起来之后，你是不是有一种想动手修改的冲动吖？

是哒！我也有！

虽然有这种冲动，但是一想到之前的经历，就很快地打消了这种冲动：修改很小的一处代码，有可能整个项目要消耗很多时间重新编译，看着进度条，脑壳儿疼啊，脑壳儿疼！

但是！

Flutter一般不会，它有一个很牛牛的“大杀器”：热重载。

通过这个技术，可以很大程度地缓解你脑瓜子的疼痛。那么，这个热重载到底是个什么呢？

可以这么理解：就是说通过这个玩意儿，项目的代码经过你修改之后，并不会经过很长时间的编译什么的。而是在你中断的地方，在相同的位置，以相同的状态和一堆相同的数据继续执行。

帅不帅！酷不酷！激动吧！颤动吧！

完了。

完了？

完了！

这个技术也就这样，能减少你修改之后重新编译的时间，提高你的开发效果 ---- 在绝大部分情况下。

好了，今天就说到这里吧。通过这几节课的学习，虽然被你一不小心觉察到实现这种跨平台的程序，是那么的神奇，也多少有些繁琐。

但是一想到之后节约出来的极多的宝贵时间，是不是心里又有了些许安慰呢？

再告诉你一个好消息，如果你要开发一些不是太复杂的项目的话，目前这个开发环境已经足够了。

也就是说，接下来的课程内容里会充斥着更多的实际代码的学习和真实小案例的研究。

那么，咱们下节课见吧！

请大家关注木辛老师的课程哟，获取更多编程知识和编程技巧。接下来，木辛老师和大家一步一步地学习Flutter知识吧。

快乐编程，快乐成长！

咱们下节课再见，88~