美文网首页
初识Flutter环境搭建

初识Flutter环境搭建

作者: 湛蓝_q7108297 | 来源:发表于2018-12-12 11:00 被阅读0次

    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环境配置及项目创建介绍到此结束,谢谢大家~

    相关文章

      网友评论

          本文标题:初识Flutter环境搭建

          本文链接:https://www.haomeiwen.com/subject/qxsuhqtx.html