快速开始Flutter开发

28 June 2018

Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，这无疑能为用户提供良好的体验。对于开发者来说，只需一套代码即可实现多平台，大大提高了产品开发效率，另外Dart运行效率较JavaScript有所提升，应用无疑会运行更为流畅。

flutter-01

Flutter 架构设计如下所示:

1. 安装

下载SDK

ln -s ~/bin/flutter/bin/flutter  ~/bin/flutter

VSCode

Flutter
Dart(安装Flutter时会自动安装)

$ flutter create myapp
$ cd myapp

目录结构如下：

.
├── README.md
├── android
├── ios
├── lib
├── myapp.iml
├── myapp_android.iml
├── pubspec.lock
├── pubspec.yaml
└── test

入口文件为lib/main.dart

2. 运行

2.1 Android

运行Android模拟器：

$ cd Library/Android/sdk/platform-tools
$ emulator @Pixel_2_API_25

运行demo：

$ flutter devices
1 connected device:

Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 7.1.1 (API 25) (emulator)

$ flutter run

flutter-01

2.2 iOS

启动模拟器
$ flutter run

flutter-01

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

Flutter的SDK的examples目录中提供了一些示例，更多可查看快速开始。

注: Flutter架构相关图片引用自 flutter.io。

Tech 95