Widget is overflowing on the right of my screen (RenderFlex error)

Question

I cannot seem to fix this error to save my life. I have tried using Expanded, Flexible, giving size constraints from parent widget, etc. Please save me.

Error messages:

"The specific RenderFlex in question is: RenderFlex#d88fa relayoutBoundary=up5 OVERFLOWING: needs compositing creator: Row ← IntrinsicHeight ← _InputPadding ← ToggleButtons ← ToggleSort ← Container ← Column ← Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#950e0] ← Semantics ← Listener ← ⋯ parentData: (can use size) constraints: BoxConstraints(0.0<=w<=55.0, h=37.0) size: Size(55.0, 37.0) direction: horizontal mainAxisAlignment: start mainAxisSize: min crossAxisAlignment: stretch textDirection: ltr verticalDirection: down"

"Another exception was thrown: A RenderFlex overflowed by 293 pixels on the right."

This function builds the part of the UI that messes up

Column sorters() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        ... more code ...
        Container(
          child: ToggleSort(),
        )
      ],
    );
  }

This is where it is used

Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Hero(
          tag: widget._heroFilterTag,
          child: Material(
            color: Colors.white,
            elevation: 2,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                  bottom: 15.0, left: 15.0, right: 15.0, top: 5.0),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    header(),
                    categories(),
                    sorters(),
                    ]
                    ... more code ...

Toggle button class (stateful widget)

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      isSelected: isSelected,
      constraints: BoxConstraints(minHeight: 35),
      fillColor: Colors.grey.shade300,
      splashColor: Colors.white,
      renderBorder: true,
      children: <Widget>[
        Container(
          width: 106,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(
                Icons.access_time_filled_outlined,
                color: Colors.grey.shade700,
              ),
              Text(
                "Date & Time",
                style: TextStyle(
                  color: Colors.grey.shade900,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
        Container(
          width: 106,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(
                Icons.location_on_outlined,
                color: Colors.blue.shade700,
              ),
              Text(
                "Proximity",
                style: TextStyle(
                  color: Colors.blue.shade900,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
        Container(
          width: 106,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(
                Icons.attach_money_rounded,
                color: Colors.green.shade700,
              ),
              Text(
                "Cost",
                style: TextStyle(
                  color: Colors.green.shade900,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ],
     ... more code ...

This is what I want to achieve

Answer 1

This error happens because of their is no bounding heights or width, column by it self take up the whole width, height of the screen unless you bound them so try it using defined width for the right overflow. Or make it scrollable.