i just started with flutter. in my case, i want to show 10 items listview on my home page. but that listview only shows 9 items. listview cannot be scrolled to show other item. can you see whats wrong with my code?
I have been looking for a solution to this problem by looking for a topic that has the same title, but nothing. i have changed some lines of my code but i get error "bottom overlow by 240px"
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}
CodePudding user response：
Try below code:
SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(
top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics:NeverScrollableScrollPhysics(),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(
color: Colors.black87))
],
),
trailing: Icon(
Icons.keyboard_arrow_right,
color: Colors.black87,
size: 30.0))));
})
],
),
),
Your result screen->
CodePudding user response：
Add this property to Listivew.Builder
physics : NeverScrollableScrollPhysics()
as it is inside SingleChildScrollView.
CodePudding user response：
Add this line to your code.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
ListView.builder(
padding: EdgeInsets.zero,
physics : NeverScrollableScrollPhysics()
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}
CodePudding user response：
Remove the singleChildScrollview and add a expanded widget on the listview.builder.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
Future<Null> _fetchPartner() async {
print('Please Wait');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);
return Scaffold(
resizeToAvoidBottomInset: false,
body: RefreshIndicator(
onRefresh: _fetchPartner,
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding:
const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child: Text("Powered By:",
style: new TextStyle(fontSize: 18.0)),
)
],
),
Expanded(
child : ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"https://via.placeholder.com/150")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style:
TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
})
],
),
),
));
}
}
CodePudding user response：
Please try with this code
replace your body tag with this and let me know
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
child:
Text("Powered By:", style: new TextStyle(fontSize: 18.0)),
)
],
) ,
Expanded ( child : ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: 13,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.zero,
elevation: 0.4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0),
),
child: Container(
child: ListTile(
leading: CircleAvatar(
child: Image.network(
"")),
title: Text(
"Coconut Oil",
style: TextStyle(
color: Colors.black87,
fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Icon(Icons.linear_scale,
color: Colors.greenAccent),
Text("Go Green!",
style: TextStyle(color: Colors.black87))
],
),
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.black87, size: 30.0))));
}) )
]
)