Flutter和Dart系列一：工欲善其事，必先利其器

Flutter和Dart系列一：工欲善其事，必先利其器

Flutter是google用以帮助移动开发者进行跨平台开发，类似已有的react native。Flutter使用的编程语言是Dart。专栏会同时记录Flutter以及Dart的学习。本篇是系列的第一篇，我们就来介绍如何搭建Flutter的开发环境。Flutter的官网：https://flutter.io/。

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

这是官网对于Flutter的描述：Flutter是Google提供的用来在Android和iOS平台编写高质量的原生接口的SDK，并且是免费开源的。直接点击官网“GET STARTED”按钮，我们开始：

1. 开发环境的选择：我这里选择MACOS

2. 下载SDK压缩包：

3. 然后解压到某个路径：

比如这就是我的路径

4. 配置环境变量：

• 打开终端：vim ~/.bash_profile
• 添加： export PATH=[flutter放置路径]/flutter/bin:$PATH
• 保存退出

5. 测试是否设置成功：

在终端输入：flutter doctor 出现welcome字样表示配置成功 补充一句：Flutter的SDK中内嵌了Dart语言相关，无需单独下载。

6. 安装Android Studio插件

但是我们平时开发，比如Android需要使用到AS，那么我们如何在AS中使用Flutter呢？这里需要安装Flutter插件：在Android Studio的设置：plugin -> Browse repositories,输入Flutter，点击install，下载完成后重启AS即可。

7. 重启后

出现了New Flutter Project说明安装成功

8. 创建一个Flutter的HelloWorld工程：

File -> New Flutter Project -> Flutter Application 

Finish.

我们可以看一下整个工程的目录结构：

android、ios这两个目录下的代码都是自动生成的，是不需要你进行编辑的。我们主要的工作目录是这个lib下，打开main.dart文件：

• a. 修改代码，使得main.dart文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1import 'package:flutter/material.dart';

2

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

4

5class MyApp extends StatelessWidget {

6

7  @override

8  Widget build(BuildContext context) {

9    return new MaterialApp(

10        title: "Welcome to Flutter",

11        home: Scaffold(

12          body: Center(

13            child: Text("Hello world"),

14          ),

15        )

16    );

17  }

18}

19

• b. 运行到真机，显示效果：

这样，我们今天的任务算是完成了。