初识 Flutter

2021-12-16 17:40:58 浏览数 (1)

知道Flutter 已经很久，然而项目中一直没有机会使用，所以一直也就没有深入的了解过。 最近还是决定要花点时间来学习了解下。

搭建环境

系统环境 Mac OS

1， 去flutter官网下载其最新可用的安装包 下载SDK 注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。

2，解压安装包到你想安装的目录，如：

代码语言：javascript复制
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

3, 添加环境变量

代码语言：javascript复制
export PATH=`pwd`/flutter/bin:$PATH

或者添加到 open ~/.bash_profile文件中

使用IDE（Android Studio）创建Demo工程

1， 安装Flutter和Dart插件

  • 启动Android Studio.
  • 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & >Linux).
  • 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
  • 重启Android Studio后插件生效.

如下图：

2， 创建Flutter应用

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如 myapp), 然后点击 Next
  4. 点击 Finish
  5. 等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。 在项目目录中，应用程序的代码位于 lib/main.dart.

如下图：

3， 运行Flutter应用 和其他android工程一样，通过点击 Run图标 的方法可以运行查看效果。 tips： - Flutter工程不仅仅可以在Android Studio中运行，也可以通过xcode来运行，查看ios设备上的效果 - Flutter中修改代码保存后，无需重启app，通过热重载就可以实时加载修改后的代码

demo在Android机器上运行的效果：

END！

参考： Flutter 中文网

flutter ios android androidstudio sdk

0 人点赞