How to add refresh indicator outside stream builder flutter

Question

I am trying to add pull to refresh in my streambuilder widget.. here is part of my code that I have tried so far

@override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      key: _refreshIndicatorKey,
      onRefresh: _handleRefresh,
      child: StreamBuilder<DataModel>(
          stream: dataBloc.subject.stream,
          builder: (context, AsyncSnapshot<DataModel> snapshot) {
            if (snapshot.hasData) {
              return passData(snapshot.data);
            } else if (snapshot.hasError) {
              return .....
            } else {
              return ......
            }
          }),
    );
  }

Future<void> _handleRefresh() async {
    try {
      bool trustSelfSigned = true;
      HttpClient httpClient = new HttpClient()
        ..badCertificateCallback =
            ((X509Certificate cert, String host, int port) => trustSelfSigned);
      IOClient http = new IOClient(httpClient);
      final response = await http.post('...',
          headers: {
            HttpHeaders.contentTypeHeader: 'application/json',
          },
          body: json.encode({...}));
      Map<String, dynamic> responseJson = json.decode(response.body);
      return;
    } catch (ex) {
      print(ex.message);
    }
  }

but whenever I try to swipe down...I can not see the reload icon of refresh indicator.. is there something that I should add more? I also have added this code

final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      GlobalKey<RefreshIndicatorState>();

Solution

You need to put the refresh indicator inside the stream builder:

    @override
    Widget build(BuildContext context) {
        return StreamBuilder<DataModel>(
        stream: dataBloc.subject.stream,
            builder: (context, AsyncSnapshot<DataModel> snapshot) {
                if (snapshot.hasData) {
                    return Expanded(
                        child: RefreshIndicator(
                            child: methodToHandleTheData(snapshot.data)
                        )
                    );
                } else if (snapshot.hasError) {
                    return .....
                } else {
                    return ......
                }
            }
        );
    }

    Widget methodToHandleTheData(DataModel data) {
        return SingleChildScrollView(
            physics: const AlwaysScrollableScrollPhysics(),
            child: MyAwesomeWidget(data)
        );
    }

It's necessary that the first child of the RefreshIndicator is a scrollable widget, i.e. a SingleChildScrollView or a ListView, and also you need to add the parameter physics: const AlwaysScrollableScrollPhysics()in order to make it work.

Comments

[uyhaW]

I have added this code return SingleChildScrollView(child: passData(snapshot.data)); but I still get the same result... is there somethng that I miss?

[Saiful Islam Adar]

No, add it right after RefreshIndicator, before the streambuilder

[Saiful Islam Adar]

Because you used ListView, we can use any scrollable widget

[uyhaW]

Hi.. I have added this code just nowRefreshIndicator( onRefresh: _refreshLocalGallery, key: _refreshIndicatorKey, child: SingleChildScrollView() but I still get the same result..is there something wrong