Laying out widgets in a column leads to a runtime error

Help Widgets
1

I’m new to Flutter and having some trouble when I try to have multiple widgets in a Column. I have code that works when I have a single widget in my app body: the following is in my app class.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('Counter App'),
        ),
        body: Center(
          child: const CounterWidget('Things to count'),
          //           child: Column(
          //             mainAxisAlignment: MainAxisAlignment.start,
          //             crossAxisAlignment: CrossAxisAlignment.center,
          //             mainAxisSize: MainAxisSize.max,
          //             children: [
          //               const CounterWidget('Things to count'),
          //               const CounterWidget('More things to count'),
          //             ],
          //           ),
        ),
      ),
    );
  }

However, if I comment out the line child: const CounterWidget('Things to count'), and uncomment the commented block below it, I get failure: on DartPad a long error dump which gives me a rough idea of what the problem is but not how to solve it. In a build for Linux, no error is shown but the app window is completely black and unresponsive.

Here’s a Gist with the main.dart and the error I got from DartPad. You can view the complete in DartPad using the link below.

2

Remove the Scaffold from _CounterWidgetState. Scaffold is, basically, a page (which you already defined as the home of MaterialApp).

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class _CounterWidgetState extends State<CounterWidget> {
  _CounterWidgetState(this._label);

  final String _label;
  int _counter = 0;

  void increment() {
    setState(() {
      _counter++;
    });
  }

  void decrement() {
    setState(() {
      if (_counter > 0) {
        _counter--;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: [
              IconButton(icon: Icon(Icons.remove), onPressed: decrement),
              Expanded(
                flex: 1,
                child: Text(
                  '$_label',
                  textAlign: TextAlign.start,
                  overflow: TextOverflow.clip,
                ),
              ),
              Text(
                '$_counter',
                textAlign: TextAlign.start,
                overflow: TextOverflow.clip,
              ),
              IconButton(icon: Icon(Icons.add), onPressed: increment),
            ],
          ),
        ],
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget(this.label, {super.key});

  final String label;

  @override
  State<CounterWidget> createState() => _CounterWidgetState(label);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('Counter App'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
           const CounterWidget('Things to count'),
           const CounterWidget('More things to count'),
          ],
                     
        ),
      ),
    );
  }
}
1 Like
3

It looks like the issue is that you’re wrapping a Column inside a Center widget. Since Column takes up the entire vertical space, but Center tries to constrain its child, there’s a conflict. Try replacing Center with a Padding or wrapping the Column in a SingleChildScrollView if the content might overflow. Let me know if you need more help!

4

Thank you @evaluator118 and @gbwadown for your feedback. removing the Center had no effect (though still worth doing) but removing the Scaffold got rid of the error for me.

5

There is no problem whatsoever in centring any widget, no matter how large they are:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('Counter App'),
        ),
        body: ColoredBox(
          color: Colors.red,
          child: Center(
            child: ColoredBox(
              color: Colors.green,
              child: Column(
                children: [
                  ColoredBox(color: Colors.blue, child: Text("Hello world")),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

image
image1888×440 10.3 KB

6

Hey! The issue you’re running into with the Column widget is pretty common when you’re getting started with Flutter. One thing to check is whether the Column has enough space to render its children—especially when wrapped inside a Center widget, which restricts size. Try wrapping the Column in a SingleChildScrollView or using Expanded or Flexible widgets inside the Column to manage space better.

It’s kinda like when you switch from the regular WhatsApp to GB WhatsApp—you suddenly get way more customization options, but you also need to know how to tweak things properly or they won’t work the way you expect. Same idea here: more power, just needs a bit of structure.

If you want to explore GB WhatsApp, you can check it out here: https://gbwadown.com

Hope that helps!