what is equivalent of guidelines (constraint layout) in 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.