[英]Single Child Scroll View not working for Bottom Overflowed Pixels
My widgets just overflowed by 18 pixels, and when I add SingleChildScrollView()
my screen just goes blank and every widget becomes invisible.我的小部件刚刚溢出了 18 个像素,当我添加SingleChildScrollView()
我的屏幕就变成空白,每个小部件都变得不可见。
As shown in above img my widgets are overflowed by 18 pixels.如上图所示,我的小部件溢出了 18 个像素。
Here is my code for that :这是我的代码:
(Note that I have added Common card widget in the same file, so the code may look lengthy but it's just repeated code) (请注意,我在同一个文件中添加了 Common card widget,所以代码可能看起来很长,但它只是重复的代码)
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class home extends StatefulWidget {
const home({Key? key}) : super(key: key);
@override
_homeState createState() => _homeState();
}
class _homeState extends State<home> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[900],
resizeToAvoidBottomInset: true,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(
top: 55.0, left: 30.0, right: 30.0, bottom: 30.0),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Circles.png'),
fit: BoxFit.cover,
)),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Control',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
Text(
'Panel',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
SizedBox(
width: 150,
),
CircleAvatar(
radius: 25.0,
)
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'All Rooms',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.blue[900]),
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/bed.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Bed Room ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'4 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/room.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Living Room',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'2 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/kitchen.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'5 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/bathtube.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'1 Light',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/house.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Outdoor ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'5 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image(
image: AssetImage('assets/balcony.png'),
),
SizedBox(
height: 15.0,
),
Text(
'Balcony ',
style: GoogleFonts.mPlusRounded1c(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black),
),
Text(
'2 Lights',
style: GoogleFonts.mPlusRounded1c(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.yellow[700]),
),
],
),
),
),
],
),
],
)
],
),
),
),
Text('Bottom nav bar')
],
),
);
}
}
And when I wrap the widget with SingleChildScrollView()
my screen goes blank as shown below:当我用SingleChildScrollView()
包装小部件时,我的屏幕变为空白,如下所示:
Can anyone tell why it's happening and how can I resolve this?谁能告诉为什么会发生这种情况,我该如何解决?
Any help will be much appreciated :)任何帮助都感激不尽 :)
Try below code hope its helpful to you, Wrap your Column inside SingleChildScrollView refer documentaion here , Just change my icons with your images试试下面的代码希望对你有帮助,将你的列包裹在SingleChildScrollView 中,参考文档在这里,只需用你的图像更改我的图标
Scaffold(
backgroundColor: Colors.blue[900],
resizeToAvoidBottomInset: true,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding: EdgeInsets.only(
top: 55.0, left: 30.0, right: 30.0, bottom: 30.0),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Control',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
Text(
'Panel',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.w700,
),
),
],
),
SizedBox(
width: 150,
),
CircleAvatar(
radius: 25.0,
)
],
),
),
Expanded(
child: Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35.0),
topRight: Radius.circular(35.0),
),
),
child: SingleChildScrollView(//Your SingleChildScrollView Widget
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'All Rooms',
),
SizedBox(
height: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bed Room ',
),
Text(
'4 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Living Room',
),
Text(
'2 Lights',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Kitchen ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Bath Room ',
),
Text(
'1 Light',
),
],
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Outdoor ',
),
Text(
'5 Lights',
),
],
),
),
),
],
),
Card(
elevation: 10.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.add),
SizedBox(
height: 15.0,
),
Text(
'Balcony ',
),
Text(
'2 Lights',
),
],
),
),
),
],
),
],
)
],
),
),
),
),
Text('Bottom nav bar')
],
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.