bottom overflowed by 1000 pixels - flutter

Question

I'm trying to make a header (picture with a card half inside pic and half outside and it worked in a stack.
but I'm in trouble when I have to make many containers below so when adding below the stack im having bottom overflowed.
I removed from code the unnecessary code so u can test it in your editor for help :)
any one can help me??
import 'package:flutter/material.dart';
class ServiceDetails extends StatefulWidget {
#override
_ServiceDetails createState() => _ServiceDetails();
}
class _ServiceDetails extends State<ServiceDetails> {
#override
Widget build(BuildContext context) {
var h = MediaQuery.of(context).size.height;
var w = MediaQuery.of(context).size.width;
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Stack(
children:[
Column(
children:[
Container(
height: h * .4,
width: w,
// color: Colors.grey[50],
child: Image.asset('images/hairdresser1.jpg', fit: BoxFit.fitWidth,)
),
new Container(
height: h * .0,
color: Colors.grey[50],
)
]
),
Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .33,
right: 15.0,
left: 15.0
),
child: Container(
height: 150,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, bottom: 5, top: 20),
child: Text(
"Hair Dresser",
style: new TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold
)
)
),
Container(
padding: EdgeInsets.only(left: 20, bottom: 5),
child: Text(
"With our proffisional barbers, new experience is guaranteed",
style: new TextStyle(
color: Colors.grey,
fontSize: 13
)
)
),
],
)
)
)
),
],
)
),
Container(
padding: EdgeInsets.all(15),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, bottom: 5, top: 20),
child: Text(
"Frequently Used",
style: new TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold
)
)
),
Divider(),
Container(
padding: EdgeInsets.zero,
height: 210,
width: w,
)
],
)
)
),
Container(
padding: EdgeInsets.all(15),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, bottom: 5, top: 20),
child: Text(
"Frequently Used",
style: new TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold
)
)
),
Divider(),
Container(
padding: EdgeInsets.zero,
height: 210,
width: w,
)
],
)
)
),
)
]
)
);
}
}

Answer 1

Wrap your column with SingleChildScrollView and widget tree be like
Scaffold
-SingleChildScrollView
- Column

Answer 2

Use SingleChildScrollView To scroll the page.
SingleChildScrollView requires a scroll controller to change your code as follows
class _ServiceDetails extends State<ServiceDetails> {
ScrollController scrollController = ScrollController();
#override
Widget build(BuildContext context) {
var h = MediaQuery.of(context).size.height;
var w = MediaQuery.of(context).size.width;
return Scaffold(
body: Scrollbar(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: scrollController,
child: Column(
------------------------------
),
),
),
);
}
}