Flutter row child fill height

To create a Row with children that fill the available height, you can make use of the Expanded widget. The Expanded widget takes up the remaining space in the Row and allows its child to fill that space. Here’s an example:

  
  import 'package:flutter/material.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Row - Fill Height'),
          ),
          body: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Expanded(
                  child: Container(
                    height: 100, // example height
                    child: Text('Child 1'),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 200, // example height
                    child: Text('Child 2'),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 150, // example height
                    child: Text('Child 3'),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  
  

In the above code, we have a Row widget with three Expanded widgets as its children. Each Expanded widget has a Container inside it that sets the height for each child. The MainAxisAlignment.spaceAround property is used to evenly space the children along the horizontal axis.

By wrapping the child widgets with Expanded, each child will fill the available height. In this example, the height of each child container is set to demonstrate how they fill the space. You can modify the height values as per your requirements.

Leave a comment