'Expanded widgets must be placed inside Flex widgets

New to flutter, can some one tells me whats wrong with below codeenter image description here

  class GamePage extends StatelessWidget {
  int _row;
  int _column;

  GamePage(this._row,this._column);

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


    );
  }
}

Attaching error screenshot.

dartfluttersqldatabasesybase


Solution 1:[1]

Crash

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

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

Acceptable

Here Expanded is a descendant of Flex:

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

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(),
)

Solution 2:[2]

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.

So to Fix the above question you just wrap Expanded widget inside a flex widget, like this:

 @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()
                 );
               }),) )
         ],
       )


   );
 }

Solution 3:[3]

Another simple example related to the error but with Expanded and ConstrainedBox :

The code:

Column(
  children:  [
    ConstrainedBox(
      child: Expanded(
        child: ...
      )
    )
  ]

The error message:

[...] Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets. The offending Expanded is currently placed inside a ConstrainedBox widget.

Why the code is the code not working properly ? In this example, Expanded must have the Column as direct Parent (which is a compatible parent type).

The solution:

Column(
  children:  [
   Expanded(
      child: ConstrainedBox(
        child: ...
      )
    )
  ]

Solution 4:[4]

You need to try using Flex Widget on that

Solution 5:[5]

sometimes it can also happen if you have an expended widget inside the SingleChildScrollView widget, then it shows the blank screen. If you have any expended widget inside SingleChildScrollView remove it and it will solve the problem.

Before

  body: SingleChildScrollView(
     child: Column(
     children: [
      Container(),
       Expanded(
       child: Container(),
        ),
       ],
      ),
      ),

After

  body: SingleChildScrollView(
     child: Column(
     children: [
      Container(),
      Container(),
       ],
      ),
      ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suragch
Solution 2 Paresh Mangukiya
Solution 3
Solution 4 josiah mpokera
Solution 5 Abdur Rehman

Related Questions