I'm trying to place a container before the contents of a listview but some how the container isn't rendered when i run the app. My code
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Container(
margin: const EdgeInsets.fromLTRB(35, 45, 30, 20),
child:
FutureBuilder<List<dynamic>>(
future: fetchPlayers(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
Container(
child: Text("I want a container here, before the contents of the
ListView "),
);
if(snapshot.hasData){
return ListView.builder(
padding: EdgeInsets.all(8),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index){
return
Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
radius: 30, backgroundImage: NetworkImage(
snapshot.data[index]['picture']['large'])),
title: Text(name(snapshot.data[index])),
subtitle: Text(position(snapshot.data[index])),
)
],
),
);
});
}
else {
return Center(child: CircularProgressIndicator());
}
},),
),
);
}
The contents of a container are not seen when i run my app.I'm not really familiar with flutter i guess i'm doing something wrong. Could someone help please
CodePudding user response：
Since you are not returning that container anywhere it would not get displayed by before if you mean
- I want to display the container before the data is loaded (so for the loading duration) try
return Container(child: Text("...
I want to display the container at the top of the list there are a few options
a. Move the container outside of the FutureBuilder if you want it to be shown in every case regardless b. Create a
List<Widget> widgets = []in the builder function of FutureBuilder and add the container and any other widget that should be displayed and return the list in the end of the builder function
CodePudding user response：
Just add return keyword before Container
CodePudding user response：
If you want to see Container() before loading data. You need to do
Column(
children:[
Container(...),
FuturueBuilder<List<dynamic>>(...)
]
)
or you want it to see when data is loaded
return Column(
children: [
Container(...),
ListView.builder(...)
]
)
or you want to show it while data loading.
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return const Container(...);
default:
if (snapshot.hasError) {
return const Text('Error');
} else {
return ListView.builder(...);
}
}
},