Flutter Mixed Layout - Grid with Rows

问题

I'm trying to create a basic Flutter app that has a a 2 by 2 grid of text inputs & a button below it.

Initially, I just had the grid & no buttons with no problems:

void main() => runApp(new App());
class App extends StatelessWidget {
...
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      home: new InputWidget()
      ...
  class InputWidget extends StatefulWidget {
    Widget build(BuildContext context) {
      ... 
      _InputWidgetState createState() => new _InputWidgetState();
      ...
  class _InputWidgetState extends State<InputWidget> {
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(...)
         body: new Builder(
           builder: (BuildContext context) {
             return new GridView.count(
               children: <Widget>[
                 // 4 Text Fields here
               ]

I need the GridView inside the Scaffold to be able to use the Scaffold for the snackbar.

Now I want to add a button below this grid. And to achieve this I've added a couple of layers in between & I'm getting a "overflowed by infinity" error with the following logic:

void main() => runApp(new App());
class App extends StatelessWidget {
...
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      home: new AppContainer()
      ...
  class AppContainer extends StatelessWidget {
    Widget build(BuildCOntext context) {
      return new Material( // tried Container as well
        child: new Column(
          children: <Widget>[
            new InputWidget()
            new BUttonWidget()
        ...
  class ButtonWidget extends StatelessWidget {
    Widget build(BuildContext context) {
      return new Container(
        child: new MaterialButton(...)
  ...
  class InputWidget extends StatefulWidget {
    Widget build(BuildContext context) {
      ... 
      _InputWidgetState createState() => new _InputWidgetState();
      ...
  class _InputWidgetState extends State<InputWidget> {
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(...)
         body: new Builder(
           builder: (BuildContext context) {
             return new GridView.count(
               children: <Widget>[
                 // 4 Text Fields here
               ]

Code & Stack Trace.

The problem seems to be stemming from the "Column" part. Seems like I need to provide some sizing to either the Column or the Scaffold but I can't seem to be able to figure out what parameters I'm missing.

I couldn't find anything on SO or the Flutter docs that have an example that I could follow - or I'm completely missing it.

Would appreciate any pointers to get this layout sorted.

回答1:

Got help from Flutter Gitter, thanks to @xqwzts & @ahmadzein.

The solution was to wrap each child in "Expanded"

void main() => runApp(new App());
class App extends StatelessWidget {
...
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      home: new AppContainer()
      ...
  class AppContainer extends StatelessWidget {
    Widget build(BuildCOntext context) {
      return new Material( // tried Container as well
        child: new Column(
          children: <Widget>[
            new Expanded (
              child: new InputWidget() ... ),
            new Expanded (
              child: new Row ( 
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[new ButtonWidget()] ... )
        ...
  class ButtonWidget extends StatelessWidget {
    Widget build(BuildContext context) {
      return new Container(
        child: new MaterialButton(...)
  ...
  class InputWidget extends StatefulWidget {
    Widget build(BuildContext context) {
      ... 
      _InputWidgetState createState() => new _InputWidgetState();
      ...
  class _InputWidgetState extends State<InputWidget> {
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(...)
         body: new Builder(
           builder: (BuildContext context) {
             return new GridView.count(
               children: <Widget>[
                 // 4 Text Fields here
               ]

来源：https://stackoverflow.com/questions/48481505/flutter-mixed-layout-grid-with-rows