如何在刷新指示器隐藏后正确显示Snackbar

Question

我有RefresHindicator及其内部listView，因此RefresHindicator在list> listView 上工作，我也设置了<代码> globalkey＆lt; refreshindicatorState＆gt;（） to felreshindicator，以便我可以在按钮点击上显示指示器。

一切都是拳头

  final _refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();

  @override
  Widget build(BuildContext context) {
        return RefreshIndicator(
          key: _refreshIndicatorKey,
          onRefresh: _onRefresh,
          child: buidlListView(snapshot),
        );
  }

  Widget buidlListView(AsyncSnapshot<List<Model>> snapshot) {
    if (snapshot.hasData && snapshot.data!.isNotEmpty) {
      return buildModelList(snapshot);
    }

    return buildNoModelList();
  }

  Widget buildNoModelList() {
    return ListView(
      children: [
        ElevatedButton(
          onPressed: _onRefresh,
          child: const SizedBox(
          width: double.infinity,
          child: Text('Refresh', textAlign: TextAlign.center),
        ),
      ],
    );
  }

  Widget buildModelList(
    AsyncSnapshot<List<Model>> snapshot,
  ) {
    final modelList = snapshot.data!;

    return ListView.separated(
      padding: const EdgeInsets.all(16),
      itemCount: modelList.length,
      separatorBuilder: (context, index) => const SizedBox(height: 16),
      itemBuilder: (context, index) {
        
        final model = modelList[index];
  
        return ModelCard(
          key: ValueKey(model),
          model: model,
        );
      },
    );
  }

  Future<void> _onRefresh() async {
    // ignore: unawaited_futures
    _refreshIndicatorKey.currentState?.show();

    final isModelExist = await loadModels();

    // not returning this because i want to show snack bar after indicator hides
    Future<void>.delayed(const Duration(seconds: 3));

    if (!isModelExist) {
      showSnackBar();
    }

    return Future.value();
  }

  void showSnackBar() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        behavior: SnackBarBehavior.floating,
        content: Text('No Model Found'),
      ),
    );
  }

  Future<bool> loadModels() async {

  final snapshot = await modelCollectionRef().get();

  if (snapshot.size > 0) {

    //...

    return true;
  }

  return false;
}

Answer 1

请参阅以下示例，

我在下面使用的插件中使用了刷新指示器

pull_to_refresh： ^2.0.0

import 'package:flutter/material.dart';
import 'package:flutter_app_modal_sheet/ProviderModel/ProviderCNModel.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /*Controllers*/
  final RefreshController _refreshController =
      RefreshController(initialRefresh: false);

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _refreshController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SmartRefresher(
        controller: _refreshController,
        enablePullDown: true,
        header: MaterialClassicHeader(),
        onRefresh: () async {
          await Future.delayed(const Duration(seconds: 3), () {});
           _refreshController.refreshCompleted();
          showSnackBar();
        },
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text("Index Value: $index"),
            );
          },
        ),
      ),
    );
  }

  void showSnackBar() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        behavior: SnackBarBehavior.floating,
        content: Text('No Model Found'),
      ),
    );
  }
}

Answer 2

解决了该问题是_refreshindicatorKey.currentState？.show（）;我在_onrefresh（）上调用的问题刷新过程，然后在_ONREFRESH（）中，我们正在调用_refreshindicatorKey.currentState？.show（）;哪个告诉Code> RefreshIndicator 运行回电运行onrefresh也反对_onrefresh（），这就是为什么_ONREFRESH（）触发了两次，而Snakcbar显示了两次_refreshindicatorKey.currentState？.show（）; on按钮点击，然后refreshindicator它自动运行_ONREFRESH（） callback。

  Widget buildNoModelList() {
    return ListView(
      children: [
        ElevatedButton(
          onPressed: () {
            _refreshIndicatorKey.currentState?.show();
          },
          child: const SizedBox(
          width: double.infinity,
          child: Text('Refresh', textAlign: TextAlign.center),
        ),
      ],
    );
  }

  Future<void> _onRefresh() async {
    final isModelExist = await loadModels();

    // not returning this because i want to show snackbar after indicator hides
    await Future<void>.delayed(const Duration(seconds: 3));

    if (!isModelExist) {
      showSnackBar();
    }

    return;
  }