Why does ElevatedButton inside a Row produce an error?

Question

I'm new to Flutter, and I'm trying to put 2 elevated buttons inside a Row so that they will divide the Row equally. My code are as follows.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Card(
          color: Colors.lightGreen[50],
          child: Container(
            child: Text(
              _text,
              textScaleFactor: 2.0,
            ),
            padding: EdgeInsets.all(15.0),
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            ElevatedButton(
              child: Text('C'),
              onPressed: null,
            ),
            ElevatedButton(
              child: Text('<'),
              onPressed: null,
            )
          ],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        )
      ],
      crossAxisAlignment: CrossAxisAlignment.stretch,
    ));
  }
}

Running the code above results to the following error.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderSemanticsAnnotations's layout() function by the
following function, which probably computed the invalid constraints in question:
  ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
The offending constraints were:
  BoxConstraints(0.0<=w<=Infinity, h=Infinity)

The relevant error-causing widget was:
  Row Row:file:///C:/dev/flutterProjects/calculator/lib/main.dart:26

As I understand, the error is caused by the ElevatedButton classes having an infinite height, but how do I place widgets in general in Rows and Columns like that in flexbox?

Answer 1

Try this:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Card(
          color: Colors.lightGreen[50],
          child: Container(
            child: Text(
              _text,
              textScaleFactor: 2.0,
            ),
            padding: EdgeInsets.all(15.0),
          ),
        ),
        Row(  
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: ElevatedButton(
              child: Text('C'),
              onPressed: (){},
            ),
          ),
          Expanded(
            child: ElevatedButton(
              child: Text('<'),
              onPressed: (){},
            ),
          )
        ],
      )
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[],
        )
      ],
      crossAxisAlignment: CrossAxisAlignment.stretch,
    ));
  }
}