I have a collection (blog style) of box entries that are stacked on top of each other. I can see 3 entries on my home screen but it doesnt allow me to scroll down on the emulator device. If i add another entry it just lays on top of my other entries. I have tried the SingleChildScrollView but have a feeling im using it in the incorrect place?

See code below:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_blog_application/services/crud.dart';
import 'package:flutter_blog_application/views/create_blog.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  CrudMethods crudMethods = CrudMethods();

  late Stream playerStream;


  Widget TransferList(){
    return SingleChildScrollView(
      child: playerStream != null
          ? Column(
        children: <Widget>[
          StreamBuilder(
              stream: playerStream,
              builder: (context, snapshot){
                return ListView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              itemCount: snapshot.data.documents.length,
              shrinkWrap: true,
              itemBuilder: (context, index){
                return PlayerDisplay(
                  playerName: snapshot.data.documents[index].data['playerName'],
                  fromClub: snapshot.data.documents[index].data['fromClub'],
                  toClub: snapshot.data.documents[index].data['toClub'],
                  rumourDesc: snapshot.data.documents[index].data['rumourDesc'],
                  imgUrl: snapshot.data.documents[index].data['imgUrl'],
                );
              });
              },)
          ],
      ) : Container(
            alignment: Alignment.center,
            child: const CircularProgressIndicator(),),
    );
  }

  @override
  void initState() {
    crudMethods.fetchData().then((result){
      setState(() {
        playerStream = result;
      });
    });
      super.initState();
    }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Row(
          children: const <Widget>[
          Text(
            "Transfer",
            style: TextStyle(fontSize: 22,  color: Colors.orangeAccent)
          ),
            Text("Center",
              style: TextStyle(fontSize: 22, color: Colors.white),
            )
        ],
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: TransferList(),
      floatingActionButton: Container(
        padding: const EdgeInsets.symmetric(vertical: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => CreateBlog()));
            },
            backgroundColor: Colors.orangeAccent,
            child: const Icon(Icons.add),
          )
        ],),
      ),
    );
  }
}

class PlayerDisplay extends StatelessWidget {

  late String imgUrl, playerName, fromClub, toClub, rumourDesc;
  PlayerDisplay({required this.imgUrl,
    required this.playerName,
    required this.fromClub,
    required this.toClub,
    required this.rumourDesc});


  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      height: 200,
      child: Stack(children: <Widget>[
        ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: CachedNetworkImage(imageUrl: imgUrl, width: MediaQuery.of(context).size.width
                                  ,fit: BoxFit.cover,
            ),
        ),
        Container(
          height: 200,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
            borderRadius: BorderRadius.circular(10)),
        ),
        Container(child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          Text("Player:", style: const TextStyle(color: Colors.orangeAccent, backgroundColor: Colors.black, fontSize: 20,)),
          Text(playerName, style: const TextStyle(color: Colors.white, backgroundColor: Colors.black, fontSize: 20)),
          Text("From:", style: const  TextStyle(color: Colors.orangeAccent, backgroundColor: Colors.black, fontSize: 20)),
          Text(fromClub, style: const TextStyle(color: Colors.white, backgroundColor: Colors.black, fontSize: 20)),
          Text("To:", style: const TextStyle(color: Colors.orangeAccent, backgroundColor: Colors.black, fontSize: 20)),
          Text(toClub, style: const TextStyle(color: Colors.white, backgroundColor: Colors.black, fontSize: 20)),
          Text("Details:", style: const TextStyle(color: Colors.orangeAccent, backgroundColor: Colors.black, fontSize: 20)),
          Text(rumourDesc, style: const TextStyle(color: Colors.white, backgroundColor: Colors.black, fontSize: 20))
        ],),)
      ],),
    );
  }
}

CodePudding user response：

Remove the SingleChildScrollView and try wrapping your ListView.builder with an Expanded widget.

return Expanded(child:ListView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              itemCount: snapshot.data.documents.length,
              shrinkWrap: true,
              itemBuilder: (context, index){....

Steps:

• (VS Code) Right click on your ListView.builder
• Click on Refactor
• Click on Wrap with widget...
• Rename widget to Expanded