How can i place a container before a ListView Widget

54V4G3208 0
Viewed 40

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

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

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

 @override
 State<Home> createState() => _HomeState();
  }

   class _HomeState extends State<Home> {
   String url="https://randomuser.me/api/?results=10";
       
  Future<List<dynamic>>  fetchPlayers() async{
    final result = await http.get(Uri.parse(url));
  return json.decode(result.body)['results'];

   }

 String name(dynamic player){
return player['name']['first'] + " " + player['name'] 
 ['last'];
 
 }

String position(dynamic player){
return  player['name']['last'];
  }

@override
 Widget build(BuildContext context) {
return Scaffold(
 
  body: Container(
  margin: const EdgeInsets.fromLTRB(35, 45, 30, 20),
  child:

   FutureBuilder<List<dynamic>>(
      future: fetchPlayers(),
      builder: (BuildContext context, AsyncSnapshot 
      snapshot) {
        if (snapshot.hasData) {
      return Column(
            children: [
              Container(
                child: Text("I want a container here"),
              ),

           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

UPDATE : I wanted my container to be displayed after the data has been loaded.After following an approach shown below ,now the container is seen but the data of the ListView are not.

Target is something like this enter image description here

listview flutter
3 Answers

Since you are not returning that container anywhere it would not get displayed by before if you mean

  1. I want to display the container before the data is loaded (so for the loading duration) try
   return Container(child: Text("...

  1. 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

ahmetakil0

Just add return keyword before Container

userNzLJ0

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(...);
            }
        }
      },
Burak Aybi0
Related