Flutter系列一：Flutter快速入门

时间 2019-11-08

标签 flutter 系列快速入门繁體版

原文原文链接

Flutter快速入门

前言

Flutter安装及Hello World请看官方文档，本教程不作介绍html

Flutter与其它移动开发框架

原生开发框架工做原理图

基于Webview框架的工做原理图

RN工做原理图（严重依赖OEM组件）

Flutter工做原理图

Flutter与其它方案对比

Flutter与JS解决方案同样，使用AOT（提早编译），而不是JIT（实时编译）
与其它方案相比，Flutter性能要好得多
Flutter消除了Bridge，且不依赖于OEM平台
Flutter容许自定义组件使用屏幕上的全部像素，即便用Flutter开发的应用程序在安卓和iOS的每一个版本上都显示相同的内容
Flutter使用Widgets Rendering来处理画布（canvas）和事件（events），使用Platform Channels来使用服务（位置、蓝牙等）
Flutter Hot Reload使用了Dart的JIT编译特性

Flutter的四种调试方式

Dart analyzer

能够建立analysis_options.yaml文件，指定配置，有助于编写更好的Flutter代码git

Dart observatory

能够经过添加断点或者debugger()语句，中断应用执行进行调试，更多说明github

Visual debugging

启用debugPaintSize选项，在入口文件处，指明debugPaintSizeEnabled为true，代码及效果以下：

void main() {
    debugPaintSizeEnabled=true;
    runApp(MyApp());
}
复制代码

相似的还有启用debugShowMaterialGrid，进行MaterialApp的网格调试
启用showPerformanceOverlay，将展现性能图，性能图分为上下两部分。上部为GPU线程花费的时间，下部为CPU线程花费的时间

Flutter widget inspector

相似于Web调试的浏览器选择工具，选择后效果以下web

Flutter的Widgets

说明

Flutter UI里一切皆Widgets，写过React及Styled-Components应该很容易理解，不过Flutter的部分样式也是由Widget组成，例如：Padding、Center等json

经常使用Widgets列表

Containercanvas

使用示例api

Center(
  child: Container(
    height: 200.0,
    width: 200.0,
    child: Image.network("https://flutter.io/images/flutter-mark-square-100.png"),
  ),
),
复制代码

Container能够用于条件表达式展现一个空组件，如浏览器

function getIcon(bool condition) {
    if (condition == true) return Icon(Icons.edit);
    else return Container();
}
复制代码

Imagebash

Text网络

Icon

RaisedButton

Scaffold：Scaffold用于展现drawers, snackbars, bottomsheets, floating-action buttons等，使用示例

RaisedButton(
    onPressed: () {
        Scaffold.of(context).showSnackBar(SnackBar(
            content: Text("HELLO!"),
        ));
    },
    child: Text("BUTTON"),
    color: Colors.blue,
),
复制代码

GestureDetector：为非按钮组件添加交互性

Stateless widget & Stateful widget

Stateless widget：无状态的小组件，示例

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}
复制代码

Stateful widget：有状态的小组件，示例（经过setState更改state）

class _MyHomePageState extends State<MyHomePage> {
    bool value = false;

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
          backgroundColor: value ? Colors.black : Colors.white,
          appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: Center(
            child: Switch(
                value: value,
                onChanged: (v) {
                  setState(() {
                    value = v;
                  });
                }),
            ),
        );
    }
}
复制代码

Flutter路由

经过Navigator.push()打开新页面，经过Navigator.pop()返回上一页，示例

onPressed() {
    Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SecondScreen()), // SecondScreen为要跳转到的页面
   );
}
复制代码

注：要达到全屏模态框的效果能够将MaterialPageRoute的fullscreenDialog属性设置为true

Flutter中的约束

约束给出高度与宽度的最小值与最大值 RenderBoxes有三种不一样的渲染机制

试图以当期容器的最大宽高渲染，如：ListView、Center等
试图以其子组件宽高做为自身宽高渲染
试图以特定宽度渲染，如：Image、Text等

特殊的：当未向Container构造函数传入宽高值时，它将倾向于最大渲染，但若是指明了宽高值，则使用特定大小。特定的约束是无界（限）约束，这种状况下最大宽高将被设置为double.INFINITY

Flutter中的网络请求

示例

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<Post> fetchPost() async {
  final response =
  await http.get('http://localhost:3000/Movies/1');

  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}

class Post {
  final int id;
  final String movieName;
  final int year;
  final String category;

  Post({this.id, this.movieName, this.year, this.category});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      movieName: json['movieName'],
      year: json['year'],
      category: json['category'],
    );
  }
}

void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSON Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.movieName);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}
复制代码

GET/POST的通用化原生封装

import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

class Api {
  static bool useHttps = false;
  static String prefix = "127.0.0.1:7001";

  static void init({String prefix, bool useHttps}) {
    Api.useHttps = useHttps;
    Api.prefix = prefix;
  }

  static Future<dynamic> get({
    String url,
    Map<String, dynamic> param = null,
    bool useDecode = true,
  }) async {
    url = (Api.useHttps ? 'https' : 'http') + '://' + prefix + url;
    if (param != null) {
      List<String> kv = [];
      for (String key in param.keys) {
        kv.add(key + '=' + param[key].toString());
      }
      url += '?' + kv.join('&');
    }
    print(url);
    var client = new http.Client();
    var resp = await client.get(url);
    if (resp.statusCode != 200) {
      return null;
    }

    if (useDecode) {
      var json = new JsonDecoder();
      return json.convert(resp.body);
    }

    return null;
  }

  static Future<dynamic> post({
    String url,
    Map<String, dynamic> param = null,
    bool useDecode = true,
  }) async {
    url = (Api.useHttps ? 'https' : 'http') + '://' + prefix + url;
    var client = new http.Client();
    var resp = await client.post(url, body: param);
    if (resp.statusCode != 200) {
      return null;
    }

    if (useDecode) {
      var json = new JsonDecoder();
      return json.convert(resp.body);
    }

    return null;
  }
}
复制代码

其它

IDE技巧编写Flutter效率技巧

Android Studio

quickfix(快速修复): Alt + Enter

VS Code

quickfix(快速修复): Ctrl + .

Flutter包管理

Flutter Pub

Flutter打开webview

使用flutter官方的url_launcher包

Flutter 经常使用命令

$ flutter packages get # 在项目内部执行，安装pubspec.yaml指明的依赖
$ flutter channel # 查看渠道列表，及当前在用的渠道
$ flutter channel dev # 切换渠道为dev
$ flutter doctor # 执行flutter环境检查
$ flutter upgrade # 升级
$ flutter run -d [device ID] # 经过该设备启动应用
复制代码