其实大多数东西我都是在flutter中文网copy过来的,我也是在学习过程中,每一步都是自己去实验的,每一步都是自己动手去操作的,所以也可以作为一个记录。今天就开始创建一个flutter应用,前期不懂可以慢慢自己动手跟着学吧,后面也许会突然有所领悟,这其实也是每个人要坚持的理由。

我以后都准备用VS Code去开发,所以知识截取相关VS Code相关的操作。

创建新的应用

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action(我选的Flutter:New Applcation Project )
  4. 输入 Project 名称 (如myapp:这个名字自己随便起就可以了,但是我发现好像命名必须是XXXX_XXXX的形式), 然后按回车键
  5. 指定放置项目的位置,然后按蓝色的确定按钮
  6. 等待项目创建继续,并显示main.dart文件

上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件(这个组件暂时不清楚干什么用的)的简单的演示应用程序。

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

体验热重载

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

  1. 用你喜欢的编辑器打开文件lib/main.dart
  2. 将字符串
    'You have pushed the button this many times:' 更改为
    'You have clicked the button this many times:'
  3. 不要按“停止”按钮; 让您的应用继续运行.
  4. 要查看您的更改,请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮).

你会立即在运行的应用程序中看到更新的字符串

当你创建项目的时候有时候会有两个异常信息

"XXX" is not a valid Dart package name​​​​​​​:这个解决办法是就是把名字改成XXXX_XXXX,也有可能是瞎猫碰上了死耗子,哈哈

​​​​​​​Waiting for another flutter command to release the startup lock:进入到你的flutter sdk目录中,然后找到bin/cache/lockfile文件,删除它即可。

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐