Flutter之初体验

/ 移动技术 / 3 条评论 / 335浏览

简介

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 世界啦。

http://p0.qhimg.com/t013864067c44d021b3.png

初体验

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

http://p0.qhimg.com/t012a31b17e6eeb4506.png

新建项目

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

http://p0.qhimg.com/t01790612a877e0492a.png

项目结构

http://p0.qhimg.com/t01d5940af277cd0ef5.png

可以看到项目创建好之后,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 模拟器的运行结果

http://p0.qhimg.com/t01c039c3ef05aa3124.png

  1. hello ,我们是蒲公英开发者服务平台(www.pgyer.com),想转载这篇文章至蒲公英的公众号上,不知道可不可以呢?

    回复
    1. @蒲公英开发者服务平台

      可以的,最好注明来源哈

      回复
    2. @snow

      好的,谢谢~

      回复