I used the Single child scroll view on my homepage which is I'm Implementing. but seems like it's not working. my page is not scrolling. Is there any other way to use the Single child scroll view or am I using it incorrectly? below I have mentioned my code for you to refer to. appreciate your help on this. below is the error.
RenderBox was not laid out: RenderRepaintBoundary#6f4d1 relayoutBoundary=up1 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1982 pos 12: 'hasSize'
import 'package:flutter/material.dart';
import '../constants/colors.dart';
import '../widgets/bottomNavigation.dart';
class DashboardScreen extends StatefulWidget {
const DashboardScreen({Key? key}) : super(key: key);
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: Container(
width: 30,
child: Image.asset(
'assets/images/user.png',
),
),
),
],
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
),
drawer: Drawer(),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
SizedBox(
height: 30,
),
// color boxes
//box one
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.lightBlue,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.message,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Total Leads',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
//box two
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.deepPurple,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.notifications_active,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Unread Messages',
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
//box three
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.teal,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.star,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Unresponded Reviews',
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
],
),
// SizedBox(
// height: 30,
// ),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 20),
child: Text(
"Your Leads",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
],
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
),
child: Icon(
Icons.message,
color: Colors.white,
size: 18,
),
),
Column(
children: [
Text(
'Leads Received',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Container(
width: 100,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
),
],
),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xff42E299),
),
child: Icon(
Icons.done,
color: Colors.white,
size: 18,
),
),
Column(
children: [
Text(
'Accepted Leads',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Container(
width: 100,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xff42E299),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
),
],
),
],
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Color(0xff42E299),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
),
child: Icon(
Icons.handyman_outlined,
color: Colors.white,
size: 25,
),
),
SizedBox(
width: 30,
),
Column(
children: [
Text(
'Keep it up!',
style: TextStyle(
fontSize: 16,
color: Colors.white,
// fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'You have completed 1 job',
style: TextStyle(
color: Colors.white,
fontSize: 13,
// fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 80,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
Expanded(child: BottomNavigation()),
],
),
),
);
}
}
//bottom navigation bar
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BottomNavigation extends StatefulWidget {
const BottomNavigation({Key? key}) : super(key: key);
@override
State<BottomNavigation> createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<BottomNavigation> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.star),
label: 'Reviews',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
],
),
);
}
}
CodePudding user response：
You have to give a height and width to SingleChildScrollView. This can be achieved by wrapping the Scroll View with a Container with specified height and width. If you want to stretch the width,
Container(
width : MediaQuery.of(context).size.width
height : 50 ///or any value
child : SingleChildScrollView()
)
CodePudding user response：
I think removing the singleChildScrollView and convert the Column to listView widget may solve your problem. (it is really long widget tree. So insert only needed parts here)
Update: error is because of the expanded widget at the bottom. when you wrap a column with a singleChildScrollView widget the column becomes a listview, means it can has unlimited height. When you wrap a widget with a expanded widget, that widget will trying to get the remaining height space to it's child widget. In this case it is impossible because the column wrapped around a singleChildScrollView has unlimited height. So remove that widget or give a specific height to it.
see the gif file
body: Column(
children: [
Expanded(
child: ListView(
children: const [
Padding(
padding: EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
.
.
.
.
.
//put your other widgets here.
.
.
.
.
],
),
),
const SizedBox(
height: 60,
child: BottomNavigation(),
),
],
),