Using the Expanded Widget Flex Property to Adjust Widget Sizes in Flutter

The Expanded widget in Flutter is a powerful tool for creating flexible and responsive layouts. One of its key properties is the flex property, which determines how much space the widget should take up relative to its siblings. 

In this article, we'll show you how to use the Expanded widget flex property to adjust widget sizes and create flexible layouts that adapt to different screen sizes and orientations.

Usage:

The Expanded widget is typically used as a child of a Row or Column widget, which is used to create horizontal or vertical rows of widgets. 

By setting the flex property of each Expanded widget, you can control how much space it should take up relative to the other widgets in the row or column.

Code:

Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child:   Image.asset(Images.logoBird,  width: 500 , height: 200,),
          ),
          Expanded(
            flex: 2, // take up 2/4 or 1/2 of available space
            child:   Image.asset(Images.logoBird,  width: 500 , height: 200,),
          ),
          Expanded(
            child:   Image.asset(Images.logoBird,  width: 500 , height: 200,),
          ),
        ],
      );

..

Properties:

• Row: A widget that displays its children in a horizontal row layout.
• Column: A widget that displays its children in a vertical column layout.
• Expanded: A widget that takes up as much space as possible in a Row or Column container, based on its flex property.
• crossAxisAlignment: A property of Row or Column that determines how the children are aligned horizontally or vertically within the container.
• flex: A property of the Expanded widget that determines how much space it should take up relative to its siblings in the Row or Column container. The value of flex is used to calculate the fraction of available space that each Expanded widget should occupy. The default value of flex is 1.

..

Packing widgets in a Row with MainAxisSize.min

You can use this technique to pack any widgets closely together in a Row or Column. This can be useful for creating a list of items or displaying a set of icons, for example.

Row(
  mainAxisSize: MainAxisSize.min, // set mainAxisSize to min to pack widgets closely together
  children: [
    Icon(Icons.star, color: Colors.green[500]), // first star icon
    Icon(Icons.star, color: Colors.green[500]), // second star icon
    Icon(Icons.star, color: Colors.green[500]), // third star icon
    const Icon(Icons.star, color: Colors.black), // fourth star icon
    const Icon(Icons.star, color: Colors.black), // fifth star icon
  ],
)

..

Flutter Basic,

..

Flutter Basic,

Ref : Handling Flutter Images like a Pro