【原】Flutter 简明指南

最近在用flutter开发APP，

总体感觉flutter安装过程对比react native比较顺畅，并且有专门的工具检测开发环境是否配置成功，不成功还有对应的提示；

flutter没有css的概念，在flutter里都是对象，例如，颜色的设置，通过颜色对象来设置：

Color ( 0xFF2DBD3A )

配合vscode的代码提示功能，书写代码很方便，有种莫名的快感；

控件分为StatelessWidget与StatefulWidget，类似于静态页面与动态页面的关系，这点跟react native是类似的；

def flutterGuide（ ）：

本文版本

flutter_macos_v1.0.0-stable

——请选择适合自己系统的版本

1 下载Flutter SDK

https:///docs/get-started/install/macos

——找下载工具下载或用终端命令行下载

——下载到Downloads目录下

2 把下载后的压缩包解压到一个目录里

——新建目录development

——终端输入

cd ~/development unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip

3 把flutter添加到命令行

——终端输入

export PATH=/development/flutter/bin:$PATH

——配置完后可以通过echo $PATH查看配置结果

4 检测相关的依赖包

——终端输入

flutter doctor -v

——查看提示信息，按指示安装

——其中，安卓装好Android Studio后打开plugin,搜索flutter，安装

5 IDE：VS Code

——IDE推荐使用VSCode，安装VSCode

6 为VSCode安装flutter插件

——打开 VS Code，选择View > Command Palette….

——输入 “install”, 选择 Extensions: Install Extensions.

——输入 “flutter” ，选择 Flutter 点击 Install.

——点击 Reload to Activate 重启vs code

7 在vscode测试下flutter

——选择 View > Command Palette….

——输入 “doctor”, 选择 Flutter: Run Flutter Doctor.

——查看 OUTPUT 面板输出的信息。

8 创建app

——打开vs code，选择 View > Command Palette.

——输入 “flutter”,选择 Flutter: New Project.

9 在模拟器中运行app

——安装xcode，并打开模拟器

——VSCode选择debug > start debug

10 最简单的APP

——修改lib目录下的main.dart

import 'package:flutter/material.dart'; void main() {  runApp(    new Text(        'Hello, world!'      ),  ); }

11 单页APP

——把main.dart拓展一下

import 'package:flutter/material.dart'; import 'package:getgo/pages/login_page.dart'; void main() {  runApp(new MyApp()); } class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      home: new Home(),    );  } } class Home extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text('MixLab GO'),      ),      body: new Text('home'),    );  }

至此，已经顺利运行Flutter，可以正式开发APP了～

return 开启Flutter之旅