如何在连接到api或使用StreamProvider<T>.value()获取数据时显示shimmer

Question

我有一个简单的小部件。我希望在客户端仍在获取或连接到api时使用一个shimmer。

这是我一直在挣扎的条件。我已经创建了shimmer小部件。在客户端已经完成获取/连接之后，如果没有发现英雄，希望显示一个文本供客户添加新的英雄，如下图所示。

class HeroesHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        StreamProvider<List<Hero>>.value(
          value: //...db_fetch_here...
        ),
        //...other providers
      ],
      child: HeroesScreen()
    )
  }
}

class HeroesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final heroes = Provider.of<List<Hero>>(context, listen: false) ?? [];

    if(heroes.length <= 0) return Text('No heroes yet. Tap here to add');

    // Not sure where or what condition should I write 
    // to show shimmer while client still fetching data
    // or client still connecting to api

    return SomeWidget();
  }
}

class Hero {
  String id;
  String name;
}

Answer 1

嗨，根据文档，使用StreamProvider.Value传递值是不可取的。尤其是当价值容易变化的时候。检查文档这里。您可以提供一个初始值，然后处理它，如下所示。

class HeroesHomeScreen extends StatelessWidget {
  Stream<List<Hero>> getHeroes(BuildContext context) async* {
    //do a db fetch here
    List<Hero> heroes = [
      Hero()
        ..id = '1'
        ..name = 'IronMan',
      Hero()
        ..id = '2'
        ..name = 'CaptainAmerica',
    ];
    await Future.delayed(Duration(seconds: 5)); // simulate a delay.

    yield heroes;
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        StreamProvider<List<Hero>>(
          create: getHeroes,
          initialData: null,
        ),
        //...other providers
      ],
      child: HeroesScreen(),
    );
  }
}

相反，您可以检查传递给使用者小部件的数据，如下面所示，并决定呈现什么。这里，我检查列表是否为null，并显示一个循环进度指示符。

class HeroesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Consumer<List<Hero>>(
        builder: (context, List<Hero> heroes, child) {
          if (heroes == null)
            // replace the return with your shimmer widget
            return Card(child: CircularProgressIndicator());

          return ListView.builder(
            itemCount: heroes.length,
            itemBuilder: (context, index) {
              return Card(
                child: Text('My hero is hero ${heroes[index].name}'),
              );
            },
          );
        },
      ),
    );
  }
}