Flutter,Expanded(GridViewで意図しない余白(パディング)ができる

flutterにて、設定していないはずの余白ができます、マージンをなくす方法はありますか。
GridViewを2つ配置していて、下のGridViewははみ出ます、下のGridView領域だけスクロールすることが可能です
(本来は、1画面に収め、スクロールさせたくありません)。
(HUAWEI nova lite Android8.0.0)
(Flutter 1.12.13+hotfix.9)
(Dart 2.7.2)

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(new MyApp());
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List icons = [
    [true, false, Icons.filter_1],
    [false, false, Icons.filter_2],
    [false, false, Icons.filter_3],
    [false, false, Icons.filter_4],
    [false, false, Icons.filter_5],
    [false, false, Icons.filter_6],
    [false, false, Icons.filter_7],
    [false, true, Icons.undo],
    [true, true, Icons.music_note],
    [true, true, Icons.place],
    [false, false, Icons.format_color_fill],
    [false, false, Icons.category],
  ];
  final IconData muteIcon = Icons.font_download;
  int nBack = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            children: <Widget>[
      Expanded(
          child: GridView.builder(
        itemCount: icons.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 8,
        ),
        itemBuilder: (context, index) {
          return Container(
              decoration: BoxDecoration(
                color: icons[index][0] ? Colors.lightGreen : Colors.white,
                border: icons[index][1]
                    ? Border.all(color: Colors.black45)
                    : Border(),
              ),
              child: GestureDetector(
                  onTap: () {
                    setState(() {
                      if (0 <= index && index <= 6 && !icons[index][1]) {
                        icons[nBack][0] = false;
                        nBack = index;
                        icons[index][0] = !icons[index][0];
                      } else if (!icons[index][1]) {
                        icons[index][0] = !icons[index][0];
                      }
                    });
                  },
                  child: Icon(icons[index][2], size: 20)));
        },
      )),
          Expanded(
              child: GridView.builder(
                itemCount: 9,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                ),
                itemBuilder: (context, index) {
                  return Container(
                      decoration: BoxDecoration(
                        border:Border.all(color: Colors.black45)
                      ),
                      child: Text(""));
                },
              ))
    ]));
  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

Expandedは、指定した割合（flex）で分割してくれるWidgetです。
flex省略時は1になるので、ちょうど上下半分で分割されているだけです。

1つ目のGridViewの高さを、Containerで指定すると期待通りになるかと思います。

dart
1  @override
2  Widget build(BuildContext context) {
3    return Scaffold(
4      body: Column(
5        children: <Widget>[
6          Container(
7            height: (MediaQuery.of(context).size.width / 8) * 2, // 2行分の高さ
8            child: GridView.builder(～
9          ),
10          Expanded(
11            child: GridView.builder(～
12          ),
13        ]));
14  }