每天进步一点点027 - Flutter异步UI更新

Preface

其实这几篇笔记都是记录几种ui的更新方式。

这一篇是记录的 StreamBuilder

Contents

两个例子

Example 1

import 'dart:async';

import 'package:flutter/material.dart';

class StreamBuilderPage extends StatefulWidget {
  StreamBuilderPage({Key? key}) : super(key: key);

  @override
  _StreamBuilderPageState createState() => _StreamBuilderPageState();
}

class _StreamBuilderPageState extends State<StreamBuilderPage> {
  var count = 0;
  // StreamSubscription 用于管理监听，关闭暂停等
  // late StreamSubscription<String> subscription;
  // StreamController
  late StreamController<String> streamController;
  // StreamSink用于发射事件
  StreamSink<String> get streamSink => streamController.sink;
  // 获取Stream，用于监听
  Stream<String> get streamData => streamController.stream;

  void dispath() {
    // 发射一个事件
    streamSink.add(count.toString());
    count++;
  }

  @override
  void initState() {
    super.initState();
    streamController = StreamController<String>();
    streamSink.add("0");

    // subscription = streamData.listen((event) {
    //   print("stream updated $event");
    // }, onError: (err) {
    //   print("stream error: $err");
    // }, onDone: () {
    //   print("stream done");
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Stream Builder"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StreamBuilder(
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return Text("Result: ${snapshot.data}");
              },
              stream: streamData,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: dispath,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Example 2

StreamBuilder 与 FutureBuilder，两个都差不多，差别只是数据源一个是 Stream 一个是 Future.

import 'package:flutter/material.dart';

Future<String> mockNetwork() async {
  return Future.delayed(
    Duration(seconds: 3),
    () => "Data from network, u know...",
  );
}

Stream<int> counter() {
  return Stream.periodic(Duration(seconds: 1), (i) {
    return i;
  });
}

class StreamBuilderPage2 extends StatelessWidget {
  const StreamBuilderPage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Stream Builder test 2"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 20,
          ),
          Center(
            child: StreamBuilder<int>(
              stream: counter(),
              builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                if (snapshot.hasError) {
                  return Text("Error: ${snapshot.error}");
                }
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                    return Text("No stream");
                  case ConnectionState.waiting:
                    return Text("Wating");
                  case ConnectionState.active:
                    return Text("active: ${snapshot.data}");
                  case ConnectionState.done:
                    return Text("Stream closed...");
                }
              },
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          FutureBuilder(
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text("Error: ${snapshot.error}");
                } else {
                  return Text("Success: ${snapshot.data}");
                }
              } else {
                // Loading
                return CircularProgressIndicator();
              }
            },
            future: mockNetwork(),
          )
        ],
      ),
    );
  }
}

Reference

1. StreamBuilder