0

The orange widget must start from the top of the view and end in the center of button, as shown in the picture. The challenge is that it will be dynamic based on phone screen.

et

I've tried to dynamically combine the position of the button and add half the height of the button, then set the orange width height on initState(), but this doesn't change the height when needed, still null when needed. But thought there must be a simpler way to do this, just using layout widgets, I just cannot think of anything, please assist.

cfl
  • 999
  • 1
  • 14
  • 34

1 Answers1

0

You can try using a Stack() 

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //set the value you need for the height of your button
    final double buttonHeight = 20;

    //again you can use whatever size you want
    final double orangeWidgetHeight = MediaQuery.of(context).size.height * 0.5;
    return SizedBox(
      //leaves some space below the orangeWidget
      height: orangeWidgetHeight + (buttonHeight / 2.0),

      child: Stack(
        children: <Widget>[
          MyOrangeWidget(),
          Align(
            alignment: Alignment.bottomCenter,
            child: MyButton(),
          )
        ],
      ),
    );
  }
}
Ali Amin
  • 355
  • 1
  • 2
  • 8
  • Hi - thank you for your suggestion. Because the orange box doesn't take up the full screen, only the top portion based on widgets within orange widget, I don't think the above works? – cfl Aug 26 '19 at 19:36
  • 1
    I see what you mean, you are right my suggestion will not work in this case. My guess is you will need to use GlobalKeys, check this question https://stackoverflow.com/questions/49307677/how-to-get-a-height-of-a-widget – Ali Amin Aug 29 '19 at 18:41
  • Thank you though, appreciate the help! The key approach is what I tried before posting this, couldn't get it to work. I found a solution, will post on it soon – cfl Aug 30 '19 at 08:30