flutter入门干货，开撸！

官方介绍

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

1、跨平台：Linux、Android、IOS、Fuchsia
2、原生用户界面：它是原生的，让我们体验更好，性能更佳
3、开源免费：完全开源，开源进行商用

Flutter中文网： https://flutterchina.club

Dart中文网： https://www.dartdoc.cn

Flutter与主流框架对比

Cordova：混合式开发框架（Hybrid App）
里面是html+css js利用桥接的形式进行开发

RN（React Native）：生成原生App，但以View为基础嵌入
将view编译成原生view，复杂UI渲染依赖多个view叠加，例如渲染List合并，每一个小的控件都是单个view，滑动刷新需要渲染多个对象，会变慢，60fps是一个瓶颈。RN是多层view组成的。

Fultter：在渲染技术上，选择了自己实现（GDI）
使用了Google的Dart语言，避免通过桥接器与javascript通信导致的效率低下的问题，能达到120fps，Flutter是整个的布局。

Flutter生态环境

1、Google公司出品和推广，并且在中国也有推广中心
2、第三方组件发展也很迅猛 https://github.com/Solido/awesome-flutter
3、已经开始使用的公司 Alibaba Tencent JD

开发环境搭建

一、下载Flutter SDK
https://flutterchina.club/get-started/install/

二、解压SDK

15545238273545.jpg

将解压的SDK目录拷贝至自己需要放置的地方，然后根据个人实际情况配置环境变量。
export PATH=/usr/local/flutter/bin:$PATH

三、检测环境
flutter doctor
以上命令可以检测flutter所需环境，检测时可能会出现下列情况：

15545278245787.jpg

上面的报错提示可以分两种情况，一种是安装Android Studio，另外一种是安装Xcode来支持Flutter的开发。
我这里选择的是安装Xcode，按照上面的提示完成工具链的安装。
注意：安装Xcode需要直接去App Store进行安装，免费的。

手写HelloWorld

StatefullWidget（动态组件）和StatelessWidget（静态组件）
VSCode中常用快捷键和热加载
升级FlutterSDK（==flutter upgrade== 或者删除SDK包重新下载）

VSCode中常用快捷键

R键：点击后热加载, 直接查看预览效果
P键：在虚拟机中显示网格, 工作中经常使用
O键：切换Android和IOS的预览模式
Q键：退出调试预览模式

代码

// 引入UI组件基础样式
import 'package:flutter/material.dart';
// 运行app
void main() => runApp(MyApp());
// 继承静态组件
class MyApp extends StatelessWidget {
  /**
   * 重写build
   * @context 上下文
   */
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello World"),
        ),
        body: Center(
          child: Text("Hello World"),
        ),
      )
    );
  }
}

TextWidget文本组件

使用一个最简单的TextWidget
TextWidget常用属性
Style属性的用法

TextWidget常用属性

TextAlign：文本对齐属性
maxLines：文本显示的最大行数
overflow：控制文本的溢出效果

代码

// 引入UI组件基础样式
import 'package:flutter/material.dart';
// 运行app
void main() => runApp(MyApp());
// 继承静态组件
class MyApp extends StatelessWidget {
  /**
   * 重写build
   * @context 上下文
   */
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextWidget"),
        ),
        body: Center(
          child: Text(
            "Hello Flutter!!!Hello Flutter!!!Hello Flutter!!!",
            textAlign: TextAlign.left,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 25.0,
              color: Color.fromRGBO(255, 150, 150, .3),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid
            ),
          ),
        ),
      )
    );
  }
}