Multiple GridViews in child

Question

I am new to flutter. I try to get two grid-views in one child. How can I achieve this with flutter. Which widget can I use for this. I tried to assign both grid-views to one column-widget and assign this to the child, but without success. Can I make multiple children and assign them to one body ?

Thank you for your help

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(padding: const EdgeInsets.only(top: 300.0),
          child: Column(,
              GridView.count(
                padding: const EdgeInsets.all(18.9),
                crossAxisSpacing: 10,
                mainAxisSpacing: 55,
                crossAxisCount: 4,
                children: <Widget>[
                  FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_1_button();
                    },
                    child: Text("1"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_2_button();
                    },
                    child: Text("2"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_3_button();
                    },
                    child: Text("3"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_4_button();
                    },
                    child: Text("+"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_5_button();
                    },
                    child: Text("4"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_6_button();
                    },
                    child: Text("5"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_7_button();
                    },
                    child: Text("6"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_8_button();
                    },
                    child: Text("-"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_9_button();
                    },
                    child: Text("7"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_8_button();
                    },
                    child: Text("8"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_9_button();
                    },
                    child: Text("9"),)

                  , FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_8_button();
                    },
                    child: Text("*"),),
                ],)


              ,GridView.count(
                  padding: const EdgeInsets.all(18.9),
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 55,
                  crossAxisCount: 2,
                  children: <Widget>[
                   FloatingActionButton.extended(
                     elevation: 0.2,
                    onPressed: () {
                       press_9_button();
                    },
                    label: Text("="), isExtended: true,)

                  ,FloatingActionButton(
                    elevation: 0.2,
                    onPressed: () {
                      press_9_button();
                    },
                    child: Text("/"),), ],),)
      ),
    ),);
  }
}

Answer 1

you have to give Expanded to your every gridView otherwise it throws hasSize error. you have forgot to give children to column widget

new Column(
  children: <Widget>[
    new Expanded(
      child: GridView.count(
        ......
      ),
    ),
    new Expanded(
      child: GridView.count(
        ......
      ),
    ),
   ],
),

Answer 2

Yes, you are in right way, but you forgot the "children" in column widget.

For example:

Column(
  children: <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

So, here:

child: Column(,
              GridView.count(

You have to use:

    child: Column(children: [
    
                  GridView.count( ...  ,
                  GridView.count( ...  ,
    ])

In your case, column and rows is a better solution:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
            padding: const EdgeInsets.only(top: 300.0),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("1"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("2"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("3"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("+"),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("4"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("5"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("6"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("-"),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("7"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("8"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("9"),
                        ),
                      ),
                      Expanded(
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("*"),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        flex: 3,
                        child: FloatingActionButton.extended(
                          elevation: 0.2,
                          onPressed: () {},
                          label: Text("="),
                          isExtended: true,
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: FloatingActionButton(
                          elevation: 0.2,
                          onPressed: () {},
                          child: Text("/"),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            )),
      ),
    );
  }