How to correctly wrap a row of buttons in Flutter-CodePudding

I'm a Flutter beginner. I'm currently trying to build a row of (custom) buttons that wraps down to a new line when the buttons overflow.

This is how the button should look like.

I've currently used a Wrap widget and its children are a bunch of CustomToggleButton.

Wrap(
  children: [
    CustomToggleButton(
      title: "general".tr,
      controller: controller,
    ),
    CustomToggleButton(
    // ...
    ),
  ],
),

The problem is that it looks correct and works fine, but the debug console keeps telling me to put the Flexible widget in a Row, Column, or Flex widget, which I have tried and failed.

This is the implementation of the CustomToggleButton:

class CustomToggleButton extends StatefulWidget {
  // default things
}

class _CustomToggleButtonState extends State<CustomToggleButton> with SingleTickerProviderStateMixin {
  @override
    return Flexible(
      child: GestureDetector(
        onTap: () {
          animateColor();
          widget.controller.toggleSelected(widget.title);
        },
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              color: animation.value,
              borderRadius: BorderRadius.circular(4),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                widget.title,
                style: TextStyle(
                  color: textAnimation.value,
                  fontSize: 10,
                  fontWeight: FontWeight.normal,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

So I want to know if there's any way to mitigate this issue, or it's just unavoidable and I have to redesign the button.

CodePudding user response：

Removing Flexible from the class worked fine.

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

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

class _CustomButtonState extends State<CustomButton> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(4),
          ),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text(
              'widget.title',
              style: TextStyle(
                color: Colors.white,
                fontSize: 10,
                fontWeight: FontWeight.normal,
              ),
            ),
          ),
        ),
      ),
    );
  }

}

And Wrap as follows:

Wrap(
                    children: [
                      const CustomButton(),
                      const CustomButton(),
                      const CustomButton(),
                      const CustomButton(),
                    ],
                  ),

CodePudding user response：

I think you should use GridView because it have grid delegate that you can use to range your button.

GridView( padding: const EdgeInsets.only( left: 16, right: 16, top: 16, bottom: 16), physics: const BouncingScrollPhysics(), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 50.0, crossAxisSpacing: 50.0, childAspectRatio: 1.0, ), children: List.generate(), ),

You can see here the doc for more information https://api.flutter.dev/flutter/widgets/GridView-class.html