CODEWITHSUNDEEP
flutterdart
Kevin Meyer
Kevin Meyer

Reputation: 121

Is there a way to keep the aspect ratio of multiple Widgets in a Row (Flutter)?

I am using a Row to align two Widgets (VideoControllers) horizontally. Using Expanded and its flex attribute, I can split the available space. The problem is that the height of the videos always fills up the entire vertical space, thus, the videos get strechted.

What I want to achieve: enter image description here

What I have tried:

Row(
    children: <Widget>[
        Expanded(
            child: AspectRatio (
                child: VideoPlayer(_leftPlayerController),
                aspectRatio: _leftPlayerController.value.aspectRatio,
            ),
            flex: 7, // 70%
        ),
        Expanded(
            child: Align (
                child: AspectRatio (
                    child: VideoPlayer(_rightPlayerController),
                    aspectRatio: _rightPlayerController.value.aspectRatio,
                ),
            ),
            flex: 3, // 30%
        ),
    ],
);

Upvotes: 5

Views: 6131

Answers (2)

Defuera
Defuera

Reputation: 5506

Yes, you can do it with help of Expanded widget. See example:

Row(
  mainAxisSize: MainAxisSize.max,
  children: [
    MyItem(Colors.orange),
    MyItem(Colors.blue),
    MyItem(Colors.orange),
    MyItem(Colors.blue),
    MyItem(Colors.orange),
  ],
)

Where MyItem:

class MyItem extends StatelessWidget {
  final Color color;

  MyItem(this.color);

  @override
  Widget build(BuildContext context) => Expanded(
          child: AspectRatio(
        aspectRatio: 1,
        child: Container(
          color: color,
        ),
      ));
}

Result: enter image description here

Upvotes: 2

Yadu
Yadu

Reputation: 3305

Try this and give a feedback 

          LayoutBuilder(
              builder: (context, BoxConstraints constraints) {
                return Container(
                  width: constraints.maxWidth,
                  child: Row(
                    children: <Widget>[
                      Container(
                        width: constraints.maxWidth*0.7,//70%
                        height: (constraints.maxWidth*0.7)/ratio,
                        child: //your videoplayer,
                      ),
                      Container(
                        width: constraints.maxWidth*0.3,
                        height: (constraints.maxWidth*0.3)/ratio,//30%
                        child: //another video player,
                      ),
                    ],
                  ),
                );
              }

Upvotes: 3

Related Questions