Flutter 系列（一）：运行你的第一个 Flutter 应用 |
您所在的位置：网站首页 › flutter学多久可以上手 › Flutter 系列（一）：运行你的第一个 Flutter 应用 |
Flutter 系列（一）：运行你的第一个 Flutter 应用
|
前言
Flutter 是 Google 推出并开源的移动端开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码可以同时运行在 iOS 和 Android平台。 2018 年 12 月，Google 发布 Flutter 1.0。从那时候开始，Flutter 以迅雷不及掩耳之势，迅速崛起，并稳固了其在市场上的地位。 如今，Flutter 相关资源和社区都已渐渐成熟，得到了很多开发者和企业的信任。另外因为公司业务扩张，准备引入 Flutter 开发项目，所以学习 Flutter 势在必行，下面就跟着我的脚步进行 Flutter 的学习吧 一、Flutter 开发环境搭建注意：本文以 macOS 系统为例 1）、使用镜像由于在国内访问 Flutter 有时可能会受到限制， Flutter 官方为中国开发者搭建了临时镜像，我们只需将如下环境变量配置到用户环境变量中即可： export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 2）、下载 Flutter SDK方式有 2： 1、直接去 Flutter 官网下载最新的安装包即可下载地址：docs.flutter.dev/development… 2、通过 git clone 下载 git clone -b master https://github.com/flutter/flutter.git上述这句命令会将仓库克隆下来并切换到 master 分支 注意：上述两种方式第一种需要解压，第二种不需要，总之将它们放置到您想放的地方即可 3）、配置 Flutter 环境变量将 Flutter 环境变量配置到你的用户环境，下面以我个人的为例： # flutter 环境变量 export FLUTTER_HOME=/Users/zhouying/Library/flutter export PATH=${PATH}:${FLUTTER_HOME}/bin 4）、验证 Flutter 是否安装成功通过flutter doctor来检查是否需要安装其它依赖项来完成安装，这个过程第一次可能需要耗费一段时间，下次就会快很多 从上面诊断信息我们可以看出： 1、Flutter 版本和渠道号 ok 2、Flutter运行所需的 Android 工具链 ok 3、Flutter 所需的 iOS 开发环境不 ok 4、Chrome ok 5、AndroidStudio ok 6、连接的设备 ok 7、HTTP 主机可用性 ok 5）、一些额外常用的 Flutter 命令1、通过flutter --help查看所安装 Flutter 需要的帮助 2、通过flutter --version查看 Flutter 版本 3、通过flutter devices查看当前可用的设备 4、通过flutter run运行启动你的应用程序 二、平台设置注意：这里主要讲 Android 平台 1）、安装并配置你的 Android Studio1、下载并安装 Android Studio. 注意：Android Studio 需要 3.0 或更高版本 2、启动 Android Studio，然后执行 Android Studio 安装向导，这将安装最新的 Android SDK，Android SDK 平台工具和 Android SDK 构建工具，这是 Flutter 为 Android 开发时所必需的 2）、设置你的 Android 设备注意：Android 设备需要 Android 4.1（API level 16）或更高版本 1、真机1、在您的设备上启用 开发人员选项 和 USB调试 2、使用USB将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备 3、在终端中，运行 flutter devices 命令以验证Flutter识别您连接的Android设备 4、运行启动您的应用程序 flutter run 2、模拟器1、在您的机器上启用 VM acceleration 2、启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device 3、选择一个设备并选择 Next 4、为要模拟的 Android 版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image 5、在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速 6、验证AVD配置是否正确，然后选择 Finish 7、在 Android Virtual Device Manager 中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面. 8、运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for ，其中 platform 是芯片系列，如 x86 3）、在 AndroidStudio 上安装 Flutter 和 dart 插件 Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等) Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等)要安装这些: 启动 Android Studio 打开插件首选项 Preferences > Plugins 选择 Browse repositories…, 选择 Flutter 插件并点击 install 重启 Android Studio 后插件生效注意：当你安装 Flutter 插件后，会自动安装 Dart 插件 三、创建并运行你的第一个 Flutter 应用 1）、创建新应用1、选择 File > New Flutter Project 2、选择 Flutter 作为 project 类型, 然后点击 Next 3、输入项目名称 (如 myapp)，然后点击 Next 注意：Project name 字母必须都是小写，否则会提示你不能创建应用 4、点击 Finish 5、等待 Android Studio 安装 SDK 并创建项目 2）、Flutter 工程结构解析如下图就是我们创建好的一个 Flutter 项目工程结构： 简单的解释一下： 文件描述myapp项目工程名称.dart_toolDart 工具开发相关配置.ideaFlutter 开发环境配置androidAndroid 平台相关代码iosiOS 平台相关代码lib跨平台代码，也是 Flutter 项目主要关心的目录test测试相关代码.gitignoregit 提交仓库忽略文件.metadata对当前工程的配置记录.packages以 lib 结尾的文件绝对路径analysis_options.yaml静态分析文件myapp.iml工程文件的本地路径配置pubspec.lock当前项目依赖所生成的文件pubspec.yaml项目描述文件，包含了项目的描述信息以及所需要的依赖的库README.md项目描述信息External LibrariesAndroid 开发包，资源文件、Dart SDK 文件、工程开发依赖插件 API 等等Scratches and Consoles创建的临时文件和缓冲区列表 3）、运行应用1、定位到 Android Studio 工具栏，选择运行应用的 Android 设备，我这里选择的是真机 2、在工具栏中点击 Run 图标，或者调用菜单项 Run > Run，或者使用flutter run 命令来运行你的应用 3、如果一切正常, 你应该在你的设备或模拟器上会看到启动的应用： Flutter 可以通过 热重载（hot reload） 实现快速效果预览，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（这和 webpack 的热重载是一样的）。简单的对代码进行更改，然后告诉 IDE 或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改 1、将字符串You have pushed the button this many times:' 更改为You have clicked the button this many times:' 2、不要按Stop按钮，让你的应用继续运行 3、要查看你的更改, 只需调用command + s，或点击 热重载按钮 (带有闪电⚡️图标的按钮) 即可 本篇文章讲的一些重点内容： 1、Flutter 开发环境搭建 2、Flutter 在 Android 平台相关设置 3、创建并运行你的第一个 Flutter 项目，Flutter 工程结构解析 好了，本篇文章到这里就结束了，希望能给你带来帮助 🤝 感谢你阅读这篇文章 下篇预告因为 Flutter 是基于 Dart 语言开发的，所以下篇文章我会讲 Dart 语言相关的内容，敬请期待吧😄 参考和推荐Flutter 官方文档 《Flutter实战·第二版》- Preview 全文到此，原创不易，欢迎点赞，收藏，评论和转发，你的认可是我创作的动力 欢迎关注我的 公 众 号，微信搜索 sweetying ，文章更新可第一时间收到 |
【本文地址】
今日新闻 |
推荐新闻 |