初识Flutter环境搭建

Flutter 介绍

Flutter app 使用了 Dart 语言,源自于 Google,现在是 ECMA 的标准。Dart 吸收了许多现代语言的特性,比如 Kotlin 和 Swift,同时能被转译成 js 代码。

作为一个跨平台框架,Flutter 和 React Native 非常像,因为 Flutter 支持响应式和声明式语法。但和 React Native 不同,Flutter 不需要 Javascript 桥接,这显著提升了 app 的加载时间和整体性能。Dart 是通过 AOT 编译来做到这一点的。

Dart 还有一个独特的地方,它也支持 JIT 编译。Flutter 的 JIT 编译改变了开发流程,它允许在开发中通过热加载来更新 UI,而无需进行新的 build。

Flutter 框架非常依赖 widget 的概念。在 Flutter 中, widget 不仅仅用在 app 的视图上,也可用于整在整个屏幕甚至是 app 自身。

除了 iOS 和 Android 平台,学习 Flutter 还会让你体验到在 Fuchsia 平台上的开发,这是 Google 开发中的实验性操作系统。

开始

可以在 macOS 、Linux 或者 windows 中进行 Flutter 开发。你可以用任意编辑器 + Flutter 工具链开发,也可以使用和 IntelliJ IDEA、、Android 和 Visual Studio Code 配套的 IDE 插件来让开发更轻松。macOS建议使用 Visual Studio Code。

配置开发环境

配置 Flutter 开发环境的详细指南请看这里。它的基本步骤因平台而异,但大部分都包括:

克隆 Flutter git 库 将 Flutter 的 bin 目录添加到 path 环境变量 运行 flutter doctor 命令,这会安装 Flutter 框架,包括 Dart,并提示你缺少的依赖项 安装缺失的依赖项 在你的 IDE 中安装 Flutter 插件/扩展 运行测试 app

在 Flutter 网站上的指南很详细,让你很容易就根据你的平台上配置好开发环境。本文接下来会假设你的 VSCode 已经为 Flutter 开发配置好了,同时通过 flutter doctor 解决了所有的问题。

如果你使用 Android Studio 的话,请确定你能够跟上进度。你还需要 iOS 模拟器、Android 模拟器或者拥有一台激活的 iOS 设备,或者可用于开发的 Android 设备

注:要在 iOS 模拟器或 iOS 设备上进行编译和调试,你必须使用 macOS 并装好 Xcode。需要Xcode 7.2或更高版本

注:cocoapods也需要升级到1.5.0以上

创建项目

在 VSCode 中安装好 Flutter extension 后,点击 View > Command Palette… 菜单或快捷键 cmd+shift+P (macOS) 或 ctrl+shift+P(Linux 或 Windows) 打开命令面板。在命令面板中输入 Flutter: New Project 然后回车 。

项目名称输入 “MyFlutterDemo”,回车。选择项目文件夹,等待 Flutter 在 VSCode 中创建项目。创建好项目后,maid.dart 会在编辑器中打开。

在 VSCode 中,你会看到左边有一个面板,显示了项目结构。有 iOS 和 Android 两个目录,以及一个包含了 main.dart 以及应用到两个平台的 lib 目录。在本教程中,你只用到 lib 目录。

将 main.dart 修改为:

import 'package:flutter/material.dart';

void main() => runApp(new GHFlutterApp());

class MyFlutterDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'GHFlutter', home: new Scaffold( appBar: new AppBar( title: new Text('FlutterDemo'), ), body: new Center( child: new Text('hello world'), ), ), ); } }

在顶部,main() 函数用到了 => 运算符,因为它只有一行语句,就是运行这个app。然后是一个名为 MyFlutterDemo 的类。

这个 app 自身也是一个 StatelessWidget。在 flutter app 中大部分对象都是 widget,无状态的或者有状态的。你覆盖了 widget 的 build() 方法,用以创建一个 app widget。然后用一个 MaterialApp widget 提供材料设计中会用到的大量组件。

如果你使用 macOS,请启动 iOS 模拟器。你以可以使用 Android 模拟器,它支持 macOS、Linux 或 Windows。 如果 iOS 模拟器和 Android 模拟器同时在运行,你可以用 VSCode 右下角的菜单切换它们:

点击 F5 或者 Debug > Start Debugging,Build & run 项目。Debug 控制台会打开,如果运行在 iOS 上,会用 Xcode 来编译项目。如果在 Android 中运行,则会调用 Gradle 来编译。

Flutter环境配置及项目创建介绍到此结束,谢谢大家~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容