Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How Can I Wrap Multiple Outline Buttons On A Container or Card

I am trying to wrap several outline buttons on a Container or Card. I want the buttons to wrap round the container or card widgets.

The challenge is that we don’t know exactly how many of these outline buttons will fine a line hence we need the container to wrap the buttons.

The UI should look like this.

sample outline buttons wrapped in a container

Tags:

2

Answers


  1. 0

    Basically, the Wrap widget is what you are looking for!

    Example:

    Container(
          color: Colors.grey,
          child: Wrap(
            spacing: 5.0,
            runSpacing: 5.0,
            children: [
              button("Button One"),
              button("Button Two"),
              button("Button Three"),
              button("Button Four"),
              button("Button Five"),
              button("Button Six"),
              button("T"),
              button("Long text goes here"),
              button("Another long text goes here as well"),
              button("Hello, world"),
              button("Button"),
            ],
          ),
        ),

    button widget:

      // Example child widget
  Widget button(String text) {
    return OutlinedButton(
      onPressed: () {},
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all(Colors.white),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
          ),
        ),
      ),
      child: Text(text),
    );
  }

    The example contains a hard-coded OutlinedButtons, feel free to add the proper widgets (such as ChoiceChip or standard Chip).

    The Wrap dynamically takes care of moving (wrapping) its children to the next line. Note that the outer Container height is dynamic based on its child (Wrap) height.

    Output:

    enter image description here

    Login or Signup to reply.
  2. 0

    You can use the widget below.
    The Wrap widget ensures that the buttons automatically move to the next line when they don’t fit horizontally.

     class TrendingSearches extends StatelessWidget {
  final List<String> trendingSearches = [
    'caitlin clark',
    'nfl schedule 2024',
    'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Trending Searches'),
      ),
      body: Container(
        decoration: const BoxDecoration(color: Colors.grey),
        child: Wrap(
          spacing: 8.0, // Placement between elements
          runSpacing: 8.0, // Bottom line transition spaces
          children: trendingSearches.map((searchTerm) {
            return Chip(
              label: Text(searchTerm),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search