what is equivalent of guidelines (constraint layout) in flutter? - flutter

Question

I want to create view like image, the first view (blue view) is 30% of screen height
and the second view (red view) is center vertical of first view (15% of the first view from bottom to top, and 15% of the first view from bottom to bottom).
if in android XML constraint layout I can use guidelines to handle that, but in flutter what I can use to create like that view?
import 'package:flutter/material.dart';
import 'package:flutter_app2/custom_text.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Card statsWidget() {
return new Card(
elevation: 1.5,
margin: EdgeInsets.only(bottom: 210.0, left: 20.0, right: 20.0),
color: Colors.white,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
verticalDirection: VerticalDirection.down,
children: <Widget>[
new Padding(
padding: EdgeInsets.all(20.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Text(
"Photos",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.grey,
fontSize: 16.0,
),
)),
new Align(
alignment: Alignment.center,
child: new Text(
"22k",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xff167F67),
),
)),
],
),
flex: 1,
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Text(
"Followers",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.grey,
fontSize: 16.0,
),
)),
new Align(
alignment: Alignment.center,
child: new Text(
"232k",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xff167F67),
),
)),
],
),
flex: 1,
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.center,
child: new Text(
"Following",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.grey, fontSize: 16.0),
)),
new Align(
alignment: Alignment.center,
child: new Text(
"332k",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xff167F67),
),
)),
],
),
flex: 1,
)
],
),
)
],
));
}
#override
build(BuildContext context) {
return new Material(
type: MaterialType.transparency,
child: new Stack(
children: [
new Column(
children: <Widget>[
headerWidget(),
bodyWidget(),
],
),
new Center(
child: statsWidget(),
),
],
));
}
Widget headerWidget() {
var header= new Expanded(
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xff167F67),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Center(
child: new Container(
margin: EdgeInsets.only(bottom: 10.0),
height: 80.0,
width: 80.0,
decoration: new BoxDecoration(
color: const Color(0xff167F67),
image: new DecorationImage(
image: new NetworkImage(
"https://4.bp.blogspot.com/-QXHUYmKycZU/W-Vv9G01aAI/AAAAAAAAATg/eF1ArYpCo7Ukm1Qf-JJhwBw3rOMcj-h6wCEwYBhgL/s1600/logo.png"),
fit: BoxFit.cover,
),
border:
Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.all(
const Radius.circular(40.0)),
),
),
),
new Text(
"Developer Libs",
textAlign: TextAlign.center,
style: new TextStyle(
color: Color(0xffffffff),
),
)
],
),
),
flex: 1,
);
return header;
}
Widget bodyWidget() {
var bodyWidget=new Expanded(
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xffffffff),
),
child: new Padding(
padding:
EdgeInsets.only(left: 50.0, right: 50.0, top: 50.0),
child: new Column(
children: <Widget>[
new CustomText(
label: "contact#developerlibs",
textColor: 0xff858585,
iconColor: 0xff167F67,
fontSize: 15.0,
icon: Icons.email)
.text(),
],
),
)),
flex: 2,
);
return bodyWidget;
}
}
I found this code and it's good but If I try in other phone resolution the second view is not center of first view. like below image

Answer 1

you can play with something like this :
LayoutBuilder(
builder: (context, constraints) {
final firstHeight = constraints.biggest.height * .3;
final secondHeight = 200.0;
return SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: firstHeight + secondHeight / 2,
child: Stack(
children: [
Positioned(
top: 0,
height: firstHeight,
left: 0,
right: 0,
child: Container(
color: Colors.blue,
),
),
Positioned(
top: firstHeight - secondHeight / 2,
left: 0,
height: secondHeight,
child: Container(
width: 200,
color: Colors.red,
),
),
],
),
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
Container(
height: 200,
margin: const EdgeInsets.only(
bottom: 8,
),
color: Colors.green,
),
],
),
);
},
)
result :

Answer 2

I think what you can use is wrap your image in an expanded widget and use its flex property. Flex basically ensures how much space a widget takes.So by default flex is set to 1. Hence wrap both your widgets with an expanded widget and set the flex property accordingly. I hope it solves your problem.