Flutter Dart - Home Screen doesnt scroll down - flutter

Question

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

Answer 1

Remove the SingleChildScrollView and try wrapping your ListView.builder with an Expanded widget.
return Expanded(child:ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: false,
padding: const EdgeInsets.symmetric(horizontal: 10),
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index){....
Steps:
(VS Code) Right click on your ListView.builder
Click on Refactor
Click on Wrap with widget...
Rename widget to Expanded