using background picture, not able to make my screen scrollable - css

Question

my screen is not getting scrollable. I am using background picture and i want it to be scrollable as well because when i used single child scrollable widget as a parent of container after background picture, it worked by back ground image didn't scrolled.
Stack(children: [
const BackgroundPicture(),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 30,
vertical: 50,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/Frame.png',
),
const SizedBox(
height: 60,
),
const SizedBox(
width: 400,
child: Text(
'Where would you like to start',
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.w100),
),
),
const SizedBox(
height: 50,
),
Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xffF3F2F2),
boxShadow: const [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.08),
blurRadius: 20,
spreadRadius: 5,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
),
],
),
)
]);

Answer 1

You can just wrap your Stack in a SingleChindScrollView Widget, this widgets allows the scroll.
SingleChildScrollView(
child: Stack(
children: [
const BackgroundPicture(),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 30,
vertical: 200,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/Frame.png',
),
const SizedBox(
height: 60,
),
const SizedBox(
width: 400,
child: Text(
'Where would you like to start',
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 40,
color: Colors.black,
fontWeight: FontWeight.w100),
),
),
const SizedBox(
height: 50,
),
Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xffF3F2F2),
boxShadow: const [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.08),
blurRadius: 20,
spreadRadius: 5,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
),
],
),
)
],
),
);