搭建开发环境

我们是在学习编程,就是自己上手实验一番,Hello Flutter,上手第一步就是环境搭建,如下参考就好了,

https://flutterchina.club/get-started/install/

你可能会遇到一些小问题

在安装过程中有问题不妨往下看看有没有答案。

问题1:
  • 在mac的Android Studio 3.x上,怎么看不到File>New Flutter Project?AS高版本不支持?

答:先确保dart和flutter插件都安装了。把 Android APK support的插件重新安装了一把,重启就好了,是不是很容易?

frc f442083e79f38f1bf1e9e427d45510d2 - Flutter 配置 - Hello Flutter
出来了
问题2:
  • Flutter SDK path not given

    frc 68ab2bda79762c2f2e215c899d7ae394 - Flutter 配置 - Hello Flutter
    image.png

这个很容易,你只需要在 Android Studio 中设置一下 Flutter SDK的路径就好了,如果没有下载过,就点击 install SDK 就行了,科学上网。

如果已经安装就查找一下 SDK 的目录。【Mac 环境】根据命令行可查找 Flutter 目录,终端 -> export $PATH 查看各配置项目录;【Windows 环境】相对容易可以在文件夹中直接找到 Flutter 路径。

frc 4be831de32f9c6e23c86f919e036ccaf - Flutter 配置 - Hello Flutter
image.png

这里我已经下载过了所有我设置一下就行了

frc 00266f983a919de2961c0cc898d25a32 - Flutter 配置 - Hello Flutter
image.png

接下来可以愉快的 hello flutter 了

frc 0a6df61bca90ca79ea7a8b46ab204f82 - Flutter 配置 - Hello Flutter
是不是期待很久的界面
frc e70262fc371282a4ffe7b683b5834805 - Flutter 配置 - Hello Flutter
image.png

打开目录结构:

frc e1f72d62cc485dcf275fa4396a9cdf1d - Flutter 配置 - Hello Flutter
image.png

在项目目录中,应用程序的代码位于 lib/main.dart

Android 里面还是很熟悉的,还有原来的MainActivity

frc cc0c6ef51b80794666fc0c21fef79a83 - Flutter 配置 - Hello Flutter
image.png

好了已经跑起来了,Hello Flutter也完成了

frc a84706464fce448c32d1661173c7c62e - Flutter 配置 - Hello Flutter
image.png
frc 036c65950e5362d8afa1ffee936edb5b - Flutter 配置 - Hello Flutter
image.png

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。

Flutter 配置 – Hello Flutter