Аналог для TagView в флаттере

Question

Я хочу иметь такой интерфейс: На нативном Android это можно сделать с помощью таких библиотек, как https://github.com/whilu/AndroidTagView,, как это можно сделать с помощью флаттера?

Answer 1

вы можете создать тот же пользовательский интерфейс, комбинируя виджет Wrap и Chip с @wasyl. но это полный пример того, что вам нужно

Примечания:

• вы можете настроить расстояние между чипами внутри виджета Wrap используя spacing
• deleteIcon находится только справа, но вы можете использовать avatar, чтобы показать значок слева
• Вы можете установить Chip Цвет границы и ширину, используя свойство Shape

 new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Wrap(
            children: <Widget>[
              Chip(
                label: new Text("Java"),
                onDeleted: () {},
                labelPadding: EdgeInsets.all(2.0),
                deleteIcon: Icon(Icons.clear),
              ),
              Chip(
                label: new Text("C++"),
                onDeleted: () {},
                labelPadding: EdgeInsets.all(2.0),
                deleteIcon: Icon(Icons.clear),
              ),
              Chip(
                label: new Text("Python"),
                onDeleted: () {},
                labelPadding: EdgeInsets.all(2.0),
                deleteIcon: Icon(Icons.clear),
              ),
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Wrap(
            spacing: 5.0,
            children: <Widget>[
              Chip(
                label: new Text("China"),
                backgroundColor: Colors.pinkAccent,
              ),
              Chip(
                label: new Text("USA"),
                backgroundColor: Colors.greenAccent,
              ),
              Chip(
                label: new Text("Austria"),
                backgroundColor: Colors.purpleAccent,
              ),
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Wrap(
            textDirection: TextDirection.rtl,
            spacing: 5.0,
            children: <Widget>[
              Chip(
                  label: new Text("نجربة"),
                  avatar: Icon(Icons.clear),
                  backgroundColor: Colors.transparent,
                  shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
              Chip(
                  label: new Text("كتابة"),
                  avatar: Icon(Icons.clear),
                  backgroundColor: Colors.transparent,
                  shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
              Chip(
                  label: new Text("مختلفة"),
                  avatar: Icon(Icons.clear),
                  backgroundColor: Colors.transparent,
                  shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
            ],
          ),
        ],
      ),

Answer 2

Вы хотите использовать:

• a Обернуть виджет , чтобы ваши фишки (теги) располагались один за другим, перетекая в следующую строку
• a Виджет чипа для чипа дизайна материала с текстом, дополнительной кнопкой удаления, удаленным обратным вызовом и т. Д.

Похоже, что ширина границы не может быть легко установлена ​​для чипа, но общая функциональность легко доступна