When designing the layout for your Flutter app, you may find the need for a
Row that stretches across the entire width of the screen. This is often required when you’re aiming to create header sections, footers, or any horizontal elements that need to span the full screen.
In Flutter, making a
Row widget expand to the full width is quite straightforward. This post will guide you through the process of creating a full-width
Row in Flutter.
Row is a widget that displays its children in a horizontal array. By default, it sizes itself to contain its children, meaning it will be as wide as the sum of the widths of its children. To make it stretch across the entire width of the screen, we need to take a different approach.
Use the MainAxisSize Property
Row widget has a property called
mainAxisSize that determines how much space it should occupy on the main axis (which is horizontal for a
Row). By setting this property to
MainAxisSize.max, you can make the
Row as wide as possible:
Row( mainAxisSize: MainAxisSize.max, children: [ // Your widgets here ], )
However, just setting
MainAxisSize.max doesn’t always guarantee that the
Row will fill the width. This is where other widgets and properties come into play.
Use Expanded Widget
When you have multiple children in a
Row and you want them to fill the space, wrapping a child with an
Expanded widget tells Flutter to let the child expand to fill the available space:
Row( children: [ Expanded( child: Container( color: Colors.blue, child: const Text('Full-width element within a Row'), ), ), ], )
In this example, the
Container takes up all the available horizontal space within the
To ensure your
Row elements are stretched fully in terms of width and appropriately aligned vertically, you can combine
Row( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( child: Container( color: Colors.red, child: const Text('Stretched full-width Row with CrossAxisAlignment'), ), ), ], )
crossAxisAlignment: CrossAxisAlignment.stretch ensures that any child widgets that do not have a fixed height will be stretched to fill the
Full-Width Row with double.infinity
Here’s how you can make a
Row full-width by enclosing it within a
Container and setting its width to
Container( width: double.infinity, color: Colors.blueGrey, // Just for visibility child: const Row( children: [ Text('Full-width Row using double.infinity'), // More widgets can be added here ], ), )
In this example, the
Container encapsulating the
Row will expand to the full width of the screen, thus making the
Row appear full-width.
Creating a full-width
Row in Flutter is essential for developing responsive and visually appealing layouts. By manipulating the
mainAxisSize property and using widgets like
Expanded, you can control how your
Row behaves in terms of width.