how a child can get the width / height of it's parent dynamically-CodePudding

let's say I have a ChildWidget() and ParentWidget() and I want to say something like :

however, the parent width is, the child's width should be 20% of it

example : if a parent has a width: 200, the child's width should be width: 40.

and I want a way that's dynamic and not actually hardcoded values, so I will change the parent width and expect that the child

any ideas are welcome.

CodePudding user response：

As pskink mentioned, FractionallySizedBox is handy in your case.

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 400,
          height: 400,
          color: Colors.deepPurpleAccent,
          child: FractionallySizedBox(
            widthFactor: 0.2, //20% width
            heightFactor: .5, //50% height
            alignment: FractionalOffset.center,
            child: DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.amber,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Also, you can check eamirho3ein's answer on LayoutBuilder.

CodePudding user response：

you should use the MediaQuery class like in the next example :

MediaQuery.of(context).size.width * .20
MediaQuery.of(context).size.height * .20

this will give the width and the height for the parent child * 20%

for getting the width and height of the parent widget you could use this way : you can put the child widget in a LayoutBuilder widget , this widget will allow you to get the parent width and height , and this is an example about this :

@override
Widget build(BuildContext context) {
  debugPrint("screen width ${MediaQuery.of(context).size.width}");
  debugPrint("screen height ${MediaQuery.of(context).size.height}");
  return Scaffold(
    body: Center(
      child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.black,border: Border.all(color: Colors.red,width: 5)),
          height: 200,
          width: 200,
          child: LayoutBuilder(
              builder: (context, constraints) {
                return SizedBox(
                    width: constraints.maxWidth * 0.50,
                    height: constraints.maxHeight * 0.50 ,
                    child: ElevatedButton(onPressed: (){}, child: const Text("stack overflow")));
              },
          ),
      ),
    ),
  );
}

try to run this build method and you will understand the example.

CodePudding user response：

Lets say your parent widget is this container:

Container(
  height: 200,
  width: 300,
),

you can do this to get its size:

Container(
   height: 200,
   width: 300,
   color: Colors.red,
   alignment: Alignment.center, // very important part is set alignment
   child: LayoutBuilder(builder: (context, constraints) {
      return Container( 
          color: Colors.blue,
          width: constraints.maxWidth * 0.2,
          height: constraints.maxHeight * 0.3,
      );
    },),
),

result: