how to create custom labels that can be removed/added dynamically

user_17381900 0
Viewed 93

I want to write A cat in the textField2 and when I tap add/remove button, that text should be added as a custom label.

then when I tap on those labels the word will be written to the textfield 1. I'm hoping to use a gesture detector for this.

The custom labels should rearrange/move to the next line if the container width is not enough. Any ideas how to do it? I think there is an official widget that we can use instead of the label.

enter image description here

flutter
2 Answers

for the custom label part, use Wrap:

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'),
    ),
  ],
)
user_112764160

You can use Wrap with different kind of alignment available :

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'),
    ),
  ],
)

Alignments: enter image description here

https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16 https://api.flutter.dev/flutter/widgets/Wrap-class.html https://api.flutter.dev/flutter/rendering/WrapAlignment-class.html

user_47110300
Related