颤动如何摆脱行之间的差距

Question

我试图让场景包含行和列，但由于某些原因，高度为 20 的行与其他行之间有间隙，如下图所示 [1]: https://i.stack.imgur.com/mJGsa.gif

我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
            child: Column(mainAxisSize: MainAxisSize.min, children: [
          Row(children: <Widget>[
            Expanded(
              child: button(150),
            ),
            Expanded(
              child: button(150),
            )
          ]),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Expanded(child: button(20)),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              button(100),
            ],
          )
        ])));
  }
}

Widget button(double buttonwidth) {
  return ButtonTheme(
    height: buttonwidth,
    child: FlatButton(
        color: Colors.grey[200],
        child: Text(
          '',
        ),
        shape: RoundedRectangleBorder(
            side: BorderSide(
                color: Colors.black, width: 1, style: BorderStyle.solid)),
        onPressed: () {}),
  );
}

它不会影响整体性能，只是有点烦人。有人可以帮我吗？

Answer 1

FlatButton 的默认填充导致了这种情况。您可以添加此行以避免它

FlatButton(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)

颤动如何摆脱行之间的差距

Flutter how to get rid of the gap between rows

row

dart

flutter

flutter-layout