RefreshIndicator not working on FutureBuilder?

Question

Here's my full code

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'package:weathercheck/Weather.dart';
import 'dart:convert';

Here's where i connect my WeatherData Class

Future<WeatherData> fetchWeatherdetail() async {
  final response = 
          await http.get('http://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22');
  if (response.statusCode == 200) {   
    // If server returns an OK response, parse the JSON.
    return WeatherData.fromJson(json.decode(response.body));

  } else {
    // If that response was not OK, throw an error.
    throw Exception('Failed to load post');
  }

}





void main(){
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/' : (context) => MyHome(),
      '/weatherResult' : (context) => WeatherResult1()
    }
  )
  );
}

 Widget myAppBar(String txtTitle){
       return AppBar(
          title: Text(txtTitle),
          backgroundColor: Colors.orange[300],  
        );
 }

class MyHome extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppBar('Find your city weather'),
      body: Column(children:[
        TextField(
          onChanged: (text){

          },
        ),
        RaisedButton(
          child: Text('Search'),

          onPressed: (){
            Navigator.pushNamed(context, '/weatherResult');
          },
        ),
      ],)
      );
  }
}



class _WeatherResult1State extends State<WeatherResult1>{
      final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
          new GlobalKey<RefreshIndicatorState>();

 Future<WeatherData> weatherData;

  @override
  void initState() {
    super.initState();
    weatherData = fetchWeatherdetail();  
  }

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppBar('Find your city weather'),
      body:

From here want to refresh but not working

        RefreshIndicator(
        key: _refreshIndicatorKey,
        onRefresh: _refresh,
        child:
          FutureBuilder<WeatherData>(
          future: fetchWeatherdetail(),
          builder: (context, snapshot) {
              if (snapshot.hasData) {
                for(var i = 0; i< snapshot.data.weather.length ; i++){
                return Container(    

                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    image: DecorationImage(
                       image: AssetImage('assets/images/london.jpg'),
                       fit: BoxFit.fill
                         )
                  ),                           
                  child:Row(                 
                  children:<Widget>[
                  Column(
                    children: <Widget>[
                  Text('City ID: ', style: TextStyle(fontSize: 20,),),
                  Text('City Name: ', style: TextStyle(fontSize: 20),),
                  Text('Weather condition: ', style: TextStyle(fontSize: 20),),
                  Text('Weather description: ', style: TextStyle(fontSize: 20),)
                  ],),
                  Column(children: <Widget>[
                  Text(snapshot.data.id.toString(), style: TextStyle(fontSize: 20),),
                  Text(snapshot.data.name, style: TextStyle(fontSize: 20),),
                  Text(snapshot.data.weather[i].main, style: TextStyle(fontSize: 20),),
                  Text(snapshot.data.weather[i].description, style: TextStyle(fontSize: 20),  )
                  ],),
                ]));
                 }
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              // By default, show a loading spinner.
              return Center(
                child: CircularProgressIndicator()
              );
          },
        )
      )
      );
  }

Here's my _refresh function

    Future<Null> _refresh() async{ 
        await Future.delayed(Duration(seconds: 2));
      setState(() {
        weatherData = fetchWeatherdetail();
      }
      );
      return null;
    }
}

i dont know what makes this code not working, is it refreshIndicator not working with Future builder? or something else.. im really stucking here.. and also why this stackoverflow so hard to make thread ah..

Answer 1

It looks that you should be using a ListView to show all your wheater items in your list. Replace the following code

for(var i = 0; i< snapshot.data.weather.length ; i++){
    return Container(    
        decoration: BoxDecoration(
           ...

with

return ListView.builder(
    physics: AlwaysScrollableScrollPhysics(),
    itemBuilder: (context, i){
        WeatherData weatherItem = snapshot.data.weather[i];
        return Container(    
            decoration: BoxDecoration(
                ...
    },
    itemCount: snapshot.data.weather.length,
);