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,
)
],
)
)
),
)
]
)
);
}
}
>Solution :
Wrap your column with SingleChildScrollView and widget tree be like
Scaffold
-SingleChildScrollView
- Column