flutter cindularProgressIndicator（）动画在Riverpod的Ref.Watch（）中都无法使用。

Question

循环progressIndicator屏幕截图

正在使用 riverpod 用于州 - 管理

我 代码>

在我在物理设备和模拟器上测试的

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(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

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 dimension

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;
  }
}

dimension：300

​代码>仅像这样的作品

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

Answer 1

虽然第一个示例已经使用了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(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

我的提供商正在造成Issure

stream.listen(
      (host) {
        print('Found device: ${host}');
      },
      onDone: () {
        print('Scan completed');
        isDone = true;
      },
    );
    return IPs;

修复程序：

await for (final res in stream) {
      IPs.toList();
      IPs.add(res.ip);
    }
    return IPs;

我知道这是什么愚蠢的EROOR，但感谢@yeasin Sheikh帮助我