If I add a SingleChildScrollView in this Flutter screen, all my widgets disappear. I get a blank white screen. This is my code without scroll:
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 33),
child: Stack(
alignment: AlignmentDirectional.topEnd,
children: [
Positioned(
top: 0,
right: 0,
child: Image.asset("assets/images/top_right.png"), //Icon
),
Positioned(
top: -10,
right: 0,
child: Image.asset("assets/images/profile_picture.png"),
),
Container(
margin: const EdgeInsets.all(20),
child: Column(
children: [
Container(
margin: const EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(),
child: const Text(
"Hi,",
style: TextStyle(
fontFamily: "poppin_regular",
fontSize: 27,
color: Colors.black),
)),
Container(
margin: const EdgeInsets.only(),
child: const Text(
"Jennifer",
style: TextStyle(
fontFamily: "poppin_semibold",
fontSize: 40,
color: Colors.black),
))
],
),
],
),
),
Flexible(
child: Container(
margin: const EdgeInsets.only(),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
margin: const EdgeInsets.only(top: 10),
elevation: 1,
shadowColor: Colors.black,
child: Row(
children: [
const SizedBox(
width: 305,
height: 50,
child: Padding(
padding:
EdgeInsets.only(left: 20, right: 20),
child: TextField(
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search For Place",
hintStyle: TextStyle(
fontSize: 14,
color: Color.fromRGBO(
140, 140, 140, 100)),
),
),
), //Padding
),
Image.asset("assets/images/search.png")
],
),
),
const SizedBox(
width: double.infinity,
child: Text(
"What are you looking for",
style: TextStyle(
fontFamily: "poppin_semibold",
fontSize: 18),
)),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffa3a3a3),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset("assets/images/Group 509.png"),
const Text(
"Request a trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"When new trip matches your travel ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"needs Get Notified",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.asset(
"assets/images/Group 539.png"))
],
)
],
),
),
),
),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffffdacb),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PostYourTrip(),
));
},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset("assets/images/orangedots.png"),
const Text(
"Post your trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
children: const [
Text(
"Let others know about your plan so ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"they can join you on your journey ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.asset(
"assets/images/post_trip.png"))
],
)
],
),
),
),
),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffbde4fe),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FindTrip(),
));
},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset("assets/images/bluedot.png"),
const Text(
"Find your trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"Find a ride and carpool anywhere in",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"Pakistan",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.asset(
"assets/images/postgroup.png"))
],
)
],
),
),
),
),
],
),
),
)
],
),
)
],
),
),
);
}
}
If I add a SingleChildScrollView in top after or before the padding widget, all the widgets disappear.
Please Check and provide me a solution. Thanks
Try below code and replace my network image with your asset image
Flow of code:
Padding
- Stack
- Positioned
- SingleChildScrollView
- Column
- Other Widgets
Full Code:
Padding(
padding: const EdgeInsets.only(top: 33),
child: Stack(
alignment: AlignmentDirectional.topEnd,
children: [
Positioned(
top: 0,
right: 0,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
), //Icon
),
Positioned(
top: -10,
right: 0,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
),
SingleChildScrollView(
child: Column(
children: [
Container(
margin: const EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(),
child: const Text(
"Hi,",
style: TextStyle(
fontFamily: "poppin_regular",
fontSize: 27,
color: Colors.black),
)),
Container(
margin: const EdgeInsets.only(),
child: const Text(
"Jennifer",
style: TextStyle(
fontFamily: "poppin_semibold",
fontSize: 40,
color: Colors.black),
))
],
),
],
),
),
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
margin: const EdgeInsets.only(top: 10),
elevation: 1,
shadowColor: Colors.black,
child: Row(
children: [
const SizedBox(
width: 305,
height: 50,
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: TextField(
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Search For Place",
hintStyle: TextStyle(
fontSize: 14,
color: Color.fromRGBO(
140, 140, 140, 100)),
),
),
), //Padding
),
Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
],
),
),
const SizedBox(
width: double.infinity,
child: Text(
"What are you looking for",
style: TextStyle(
fontFamily: "poppin_semibold", fontSize: 18),
)),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffa3a3a3),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
const Text(
"Request a trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"When new trip matches your travel ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"needs Get Notified",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
)
],
)
],
),
),
),
),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffffdacb),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
const Text(
"Post your trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
children: const [
Text(
"Let others know about your plan so ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"they can join you on your journey ",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
)
],
)
],
),
),
),
),
Container(
height: 133,
width: 345,
decoration: const BoxDecoration(
color: Color(0xffbde4fe),
borderRadius: BorderRadius.all(
Radius.circular(10),
)),
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
const Text(
"Find your trip",
style: TextStyle(
color: Colors.black,
fontFamily: "poppin_semibold",
fontSize: 18),
),
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: const [
Text(
"Find a ride and carpool anywhere in",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
Text(
"Pakistan",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: "poppin_regular"),
),
],
),
Container(
margin: const EdgeInsets.only(),
height: 71,
width: 90,
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png",
height: 20,
),
),
],
)
],
),
),
),
),
],
),
)
],
),
)
],
),
),