How to Solve Expanded Widgets must be placed Inside Flex Widgets ??

· 3 min read
How to Solve Expanded Widgets must be placed Inside Flex Widgets
How to Solve Expanded Widgets must be placed Inside Flex Widgets

An expanded Widget is a widget that expands a child of a Row WidgetColumn Widget, or Flex so that the child fills the available space. So in this article, we will go through how to solve Expanded Widgets must be placed inside Flex Widgets.

How to Solve Expanded Widgets must be placed Inside Flex Widgets ??

An Expanded widget must be a descendant of a Row, Column, or Flex, and the path from the Expanded widget to its enclosing Row, Column, or Flex must contain only Stateless widgets or Stateful Widgets.

This crashes because Expanded is not a descendant of a Flex widget:

Container(
  child: Expanded(
    child: MyWidget(),
  ),
)

The acceptable code snippet will be like the below:

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(
      child: MyWidget(),
    ),
  ],
)

A row is also a Flex widget:

Row(
  children: [
    Expanded(
      child: MyWidget(),
    ),
  ],
)

And so is Column:

Column(
  children: [
    Expanded(
      child: MyWidget(),
    ),
  ],
)

Another option is to just get rid of the Expanded widget:

Container( child: MyWidget(), )

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis e.g., horizontally for a Row or vertically for a Column.

If multiple children are expanded, the available space is divided among them according to the flex factor.

@override
Widget build(BuildContext context) {
  return new Material(
      color: Colors.deepPurpleAccent,
      child:Column(
        children: <Widget>[
          new Expanded(
              child:new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
                return new Center(
                    child: new CellWidget()
                );
              }),) )
        ],
      )


  );
}

Conclusion:

Let us know, what did you learn from this article !!! In the next article, we are going to see expanded container flutter.

So in this article, we have been through how to solve Expanded Widgets must be placed inside Flex Widgets.

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply