Home > database >  How can I get this kind of layout of buttons by getting data from one api in flutter
How can I get this kind of layout of buttons by getting data from one api in flutter

Time:08-06

How can I get this kind of layout of buttons when getting data from an API in flutter,,As shown in the picture

CodePudding user response:

You can check Chip widget, and use Wrap to make it group.

Doc example

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')),
      label: const Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')),
      label: const Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('HM')),
      label: const Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
      label: const Text('Laurens'),
    ),
  ],
)

Also try ActionChip

  • Related