Flutter学习总结

学习原文： https://flutterchina.club/

1. 安装：

配置环境变量：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

下载sdk解压到目录并把目录添加到path中：

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

export PATH=`pwd`/flutter/bin:$PATH

用flutter doctor检查环境及具体环境设置

https://flutterchina.club/setup-macos/

编辑器使用Android Studio（IntelliJ IDEA Ultimate）或者Visual Studio Code

2. 开发步骤

第一个MaterialApp（material.dart代码文件）

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

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

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

使用外部包，在pubspec.yaml文件中加入需要导入的包如下，然后用命令flutter pub get更新依赖包

english_words: ^3.1.5

在material.dart代码文件头中加入

import 'package:english_words/english_words.dart';

3 widgets

Basic widgets：Text，Row, Column，Stack，Container

Material Components：MaterialApp， Navigator,   AppBar， Scaffold， leading ， actions ， title

https://flutter.dev/docs/development/ui/widgets/material

熟悉StatelessWidget和StatefulWidget控件，区别在于状态的改变：

StatelessWidget面向那些始终不变的UI控件，比如标题栏中的标题；

而StatefulWidget则是面向可能会改变UI状态的控件，比如有点击反馈的按钮。

StatefulWidget的创建需要指定一个State，在需要更新UI的时候调用setState(VoidCallback fn)，并在VoidCallback中改变一些变量数值等，组件会重新build以达到刷新状态也就是刷新UI的效果。

Handling gestures：https://flutter.dev/docs/development/ui/advanced/gestures

使用 GestureDetector widget 包含 Container, GestureDetector 里面有 onTap() 回掉, 其它的 taps, drags, and scales都有回掉.

 IconButton, ElevatedButton, FloatingActionButton 有 onPressed() 手势回掉.