I am new to Flutter. When i use SingleChildScrollView, i am getting error saying ‘Bottom overloaded by 41 pixel’. Based on the earlier suggestion for the similar issue in this portal, i have used “resizeToAvoidBottomInset: false,”. I have also tried ‘BoxConstraints’. Issue was not resolved. Can you please assist?. Kindly note that first tab bar is throwing this error because it has more widgets. Please let me know for any questions.
main module:
import 'package:flutter/material.dart';
import 'package:myapp/home.dart';
/// Flutter code sample for [Scaffold].
void main() => runApp(const ScaffoldExampleApp());
class ScaffoldExampleApp extends StatelessWidget {
const ScaffoldExampleApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
Home Module:
import 'package:flutter/material.dart';
class CardItem {
final String urlImage;
final String title;
final String subtitle;
const CardItem({
required this.urlImage,
required this.subtitle,
required this.title,
});
}
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<CardItem> items = [
const CardItem(
urlImage: 'https://picsum.photos/200', title: '3d 5h', subtitle: '45%'),
const CardItem(
urlImage: 'https://picsum.photos/300',
title: '2d 15h',
subtitle: '45%'),
const CardItem(
urlImage: 'https://picsum.photos/300',
title: '4d 12h',
subtitle: '55%'),
const CardItem(
urlImage: 'https://picsum.photos/300', title: '2d 1h', subtitle: '32%'),
const CardItem(
urlImage: 'https://picsum.photos/300', title: '5d 4h', subtitle: '79%'),
const CardItem(
urlImage: 'https://picsum.photos/500', title: '1d 3h', subtitle: '92%'),
];
@override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: const BoxConstraints(),
child: DefaultTabController(
length: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Scaffold(
//color: const Color.fromARGB(255, 8, 11, 11),
// width: double.infinity,
// height: double.infinity,
resizeToAvoidBottomInset: false,
backgroundColor: const Color.fromARGB(255, 24, 6, 6),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
child: Text("Good Morning"),
),
// Container(
// height: 30,
// width: 150,
// decoration: const BoxDecoration(
// borderRadius:
// BorderRadius.only(bottomRight: Radius.circular(5)),
// ),
// child: const DefaultTextStyle(
// style: TextStyle(
// color: Colors.white,
// fontSize: 12,
// ),
// child: Text("Good Morning"),
// ),
// ),
Row(
children: [
const DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 24,
letterSpacing: 2,
),
child: Text("Batricia Salfora"),
),
Expanded(child: Container()),
Container(
height: 35,
width: 120,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.redAccent,
),
child: const Row(
children: [
Icon(
Icons.architecture_outlined,
color: Colors.white,
size: 25.0,
),
DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
child: Text("240"),
),
SizedBox(
width: 10,
),
DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
child: Text("Points"),
),
],
)),
],
),
const SizedBox(
height: 30,
),
Row(
children: [
Container(
height: 65,
width: 120,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
topLeft: Radius.circular(15)),
color: Color.fromARGB(255, 34, 33, 33)),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.qr_code_scanner_outlined,
color: Colors.red,
size: 25.0,
),
DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
child: Text("Claim"),
),
],
)),
const SizedBox(
width: 2,
),
Container(
height: 65,
width: 120,
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
color: Color.fromARGB(255, 34, 33, 33)),
child: const Row(
children: [
Icon(
Icons.control_point_rounded,
color: Colors.red,
size: 25.0,
),
DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
child: Text("Get Point"),
),
],
)),
const SizedBox(
width: 2,
),
Container(
height: 65,
width: 120,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15)),
color: Color.fromARGB(255, 34, 33, 33)),
child: const Row(
children: [
Icon(
Icons.credit_card_outlined,
color: Colors.amberAccent,
size: 25.0,
),
DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
child: Text("My Card"),
),
],
)),
],
),
// const SizedBox(
// height: 30,
// ),
Row(
children: [
const DefaultTextStyle(
style: TextStyle(
color: Colors.white,
fontSize: 22,
),
child: Text("My Book"),
),
Expanded(child: Container()),
const Text(
'see more',
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.white70,
fontSize: 16,
),
)
],
),
const SizedBox(
height: 30,
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
height: 300,
width: double.infinity,
child: ListView.separated(
scrollDirection: Axis.horizontal,
separatorBuilder: (context, index) => const SizedBox(
width: 2,
),
itemCount: 6,
itemBuilder: (context, index) =>
buildcart(items[index]))),
const TabBar(
tabs: <Widget>[
Tab(
icon: Text(
'Best seller',
style: TextStyle(
fontSize: 14,
),
)),
Tab(
icon: Text(
'The Latest',
style: TextStyle(
fontSize: 14,
),
)),
Tab(
icon: Text(
'Coming Soon',
style: TextStyle(
fontSize: 14,
),
)),
],
),
Expanded(
child: TabBarView(
children: [
// first tab bar view widget
Container(
color: Colors.black26,
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text(
'Music by Julie Gable. Lyrics by Sidney Stein.'),
),
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text(
'Music by Julie Gable. Lyrics by Sidney Stein.'),
),
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text(
'Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
const SizedBox(width: 8),
TextButton(
onPressed: () {
/*...*/
},
child: const Text('Enabled'),
)
],
),
],
),
),
)),
// second tab bar viiew widget
Container(
color: Colors.black26,
//height: MediaQuery.of(context).size.height,
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text(
'Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
const SizedBox(width: 8),
TextButton(
onPressed: () {
/*...*/
},
child: const Text('Enabled'),
)
],
),
],
),
),
)),
Container(
color: Colors.black26,
//height: MediaQuery.of(context).size.height,
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.album),
title: Text('The Enchanted Nightingale'),
subtitle: Text(
'Music by Julie Gable. Lyrics by Sidney Stein.'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
const SizedBox(width: 8),
TextButton(
onPressed: () {
/*...*/
},
child: const Text('Enabled'),
)
],
),
],
),
),
)),
],
),
),
],
),
),
),
),
),
)));
}
buildcart(CardItem item) => Container(
width: 220,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.grey[850]),
padding: const EdgeInsets.all(5),
child: Column(
children: [
Expanded(
child: Image.network(
item.urlImage,
fit: BoxFit.cover,
)),
Row(
children: [
const Padding(padding: EdgeInsets.fromLTRB(20, 0, 20, 25)),
const Icon(
Icons.av_timer_outlined,
color: Colors.grey,
size: 14.0,
),
DefaultTextStyle(
style: const TextStyle(
color: Colors.grey,
fontSize: 14,
),
child: Text(item.title),
),
const SizedBox(
height: 5,
),
Expanded(
child: Container(),
),
const Icon(
Icons.book_outlined,
color: Colors.grey,
size: 14.0,
),
DefaultTextStyle(
style: const TextStyle(
color: Colors.grey,
fontSize: 14,
),
child: Text(item.subtitle),
),
],
)
],
));
}