CODEWITHSUNDEEP
flutter
Pretty Girl
Pretty Girl

Reputation: 95

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

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

Upvotes: 1

Views: 189

Answers (2)

NehaK
NehaK

Reputation: 2727

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

Upvotes: 0

Jim
Jim

Reputation: 7601

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

Upvotes: 1

Related Questions