Flutter CircularProgressIndicator() 动画在 Riverpod 的 ref.watch().when 内不起作用

圆形进度指示器屏幕截图

我在用着Riverpod https://pub.dev/packages/flutter_riverpod用于状态管理

CircularProgressIndicator任何条件下仅占用4个像素

我在物理设备和模拟器上进行了测试

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_web_lights/providers.dart';

class SearchDevices extends ConsumerStatefulWidget {
  const SearchDevices({Key? key}) : super(key: key);

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

class _SearchDevicesState extends ConsumerState<SearchDevices> {
  @override
  Widget build(BuildContext context) {
    final ip = ref.watch(FutureIPsProvider);
    return Scaffold(
      appBar: AppBar(),
      // backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ip.when(
              data: ((data) {
                return ListView.builder(
                  shrinkWrap: true,
                  itemCount: data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Text(data[index]);
                  },
                );
              }),
              error: (error, stack) {
                return Text('err');
              },
              loading: () => const SizedBox.square(
                dimension: 40,
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: CircularProgressIndicator(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

FutureIPsProvider

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_web_lights/services/scan_service.dart';

final FutureIPsProvider = FutureProvider<List<String>>(((ref) async {
  return await ref.watch(IpProvider).Scan();
}));

IpProvider

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:network_info_plus/network_info_plus.dart';
import 'package:network_tools/network_tools.dart';

final IpProvider = Provider<IPScaner>(
  (ref) => IPScaner(),
);

class IPScaner {
  String ip = "";
  String subnet = "";
  int port = 80;

  Future<List<String>> Scan() async {
    List<String> IPs = [];
    var wifiInfo = NetworkInfo();
    ip = (await wifiInfo.getWifiIP())!;
    subnet = ip.substring(0, ip.lastIndexOf('.'));
    final stream = HostScanner.discover(subnet, firstSubnet: 1, lastSubnet: 50,
        progressCallback: (progress) {
      print('Progress for host discovery : $progress');
    });
    stream.listen((host) {
      print('Found device: ${host}');
      IPs.toList();
      IPs.add(host.ip);
    }, onDone: () {
      print('Scan completed');
    });

    return IPs;
  }
}

尺寸：300

CircularProgressIndicator()只能这样工作

return Scaffold(
      // backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
               CircularProgressIndicator()
            ],
          
        ),
      ),
    );

虽然第一个示例已经使用 ConsumerWidget，您可以直接观看并使用它的变量ip.

class SearchDevices extends ConsumerWidget {
  const SearchDevices({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final ip = ref.watch(FutureIPsProvider);
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ip.when(
            data: ((data) {
              return Text("Got Data");
            }),
            error: (error, stack) {
              return Text('err');
            },
            loading: () => const SizedBox.square(
              dimension: 40,
              child: FittedBox(
                fit: BoxFit.fill,
                child: CircularProgressIndicator(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}