RefreshIndicator not working on FutureBuilder? - flutter

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,
);