Flutter之初体验

flutter

简介

2018年12月4日，Flutter 1.0 正式发布。Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码，免费且开源，在全球开发者中广泛被使用。Flutter 用 Dart 作为开发语言，对于有 Java 等高级语言开发经验的开发者来说 Dart 很容易上手。

环境搭建

flutter官网 给出的环境搭建步骤非常详细，Windows、macOS、 Linux 都有完善的安装文档。包括 Android Studio 安装 Flutter 插件等，针对不同的操作系统安装即可。我选择的是 macOS 平台的环境。

安装完成后执行 flutter doctor 如果出现下图所需SDK和开发 工具 都配置完成就会出现"对勾"。如果有未配置好的项， flutter doctor 会提示出哪里有问题以及应该执行什么命令，按照提示一步步配置好就可以进入 Flutter 世界啦。

初体验

针对不同平台的开发者，Flutter 提供了不同的入门指引。

新建项目

在 Android Studio 里安装好 Flutter 插件之后，点新建项目就会出现 Flutter 项目如下：

项目结构

可以看到项目创建好之后，Android Studio 帮我们生成了许多目录。

/android：标准的android工程结构

/ios：iOS工程结构

/build：最终编译出来的apk在 build/app/outputs/apk 目录下，apk还是挺大的，新创建的工程编译之后在25M左右

/lib：dart源代码

pubspec.yaml：这是一个比较重要的文件，依赖的包会在这里配置

接下来我们看一下整个工程结构的源码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '欢迎来到Flutter世界',
      home: Scaffold(
        appBar: AppBar(
          title: Text('奇舞移动'),
        ),
        body: Center(
          child: Text("show me the code", style: TextStyle(fontSize: 20)),
        ),
      ),
    );
  }
}

代码很简单，页面显示的就是 MyApp 这个 Widget。关于 Widget 会在接下来的文章中介绍。第一次编译的时候会比较慢，运行起来之后，我们尝试做一些修改然后点击 Hot Reload 就可以很快显示在页面上，类似于 Instant Run。

运行结果

以下是在 Pixel 和 iPhone XR 模拟器的运行结果

本文由 snow 创作，采用 知识共享署名4.0 国际许可协议进行许可

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名

最后编辑时间为: 2019/01/13 15:19