美文网首页
初识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环境搭建

    Flutter 介绍 Flutter app 使用了 Dart 语言,源自于 Google,现在是 ECMA 的标...

  • Flutter 之路

    Dart 磨刀 - Flutter Mac 下环境搭建磨刀- 初识 Dart磨刀- Dart 关键字磨刀- Dar...

  • Flutter.1.基础搭建

    一. flutter环境搭建 环境搭建跟着搭建flutter走. 问题 在执行flutter docter 的时候...

  • iOS中RN与Flutter混合开发

    一 搭建环境 1. 搭建flutter环境 1.1 搭建系统开发环境 参考链接:https://flutter....

  • Flutter环境搭建

    Flutter环境搭建这里只介绍在macOS中Flutter的环境搭建,如需了解windows下的Flutter开...

  • Flutter开发环境搭建

    补一篇Windows搭建Flutter开发环境,由于Flutter发展很快,现在环境搭建也简单很多,Flutter...

  • sharesdk flutter集成从零指南

    Flutter环境搭建可以看下:Flutter环境搭建介绍flutter 使用的工具是VSCode 一 创建一个f...

  • Flutter开发准备

    Flutter开发准备 Flutter 介绍 Flutter 环境搭建 Flutter开发工具 Flutter 介...

  • android flutter 文章汇总

    flutter环境搭建flutter填坑flutter 技术专辑flutter 开发web应用flutter 开发...

  • 初识Flutter-搭建环境(Mac)

    刚刚接触了Flutter,这里把搭建环境的,以及从中遇到的坑过程记录下来。 环境搭建 1、配置用户环境变量 终端打...

网友评论

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

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