Как во Flutter/Dart ограничить количество элементов в Row() по их ширине (чтобы были только те, которые влезли в экран)?

Question

Пытаюсь сделать книгу контактов с перечислением навыков у человека. Хочу, чтобы на карточке в списке отображались только те блоки навыков, которые умещаются в экран (остальные должны быть просто скрыты). Помогите это сделать..

Контейнеры с навыками генерируются с помощью цикла в List<Widget>:

class SkillsContainer extends StatelessWidget {
  final UnmodifiableListView<String> skillsList;
  const SkillsContainer({Key key, this.skillsList}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    List<Widget> _widgetsList = <Widget>[];
    skillsList.forEach((skill) {
      _widgetsList.add(Container(
        padding: const EdgeInsets.all(2),
        margin: const EdgeInsets.only(left: 0, top: 3, right: 3, bottom: 3),
        child: Text(skill),
        decoration: BoxDecoration(
          color: MyColors().randomColor(),
          borderRadius: BorderRadius.circular(3.5),
        ),
      ));
    });
    return Row(
      children: _widgetsList,
    );
  }
}

Сейчас, чтобы добавить их в тело карточки, я использую Row(), также пробовал Wrap(), но не смог оставить только одну линию контейнеров на вывод.

Представленный выше класс вызывается в колонке:

child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    /*Container(
                      child: Text(
                        '${human.firstName} ${human.lastName}',
                        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                    ),*/
                    Expanded(
                      flex: 1,
                      child: Container(
                        child: Text(
                          '${human.firstName} ${human.lastName}',
                          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: SkillsContainer(skillsList: human.skills,),
                    ),
                    Expanded(
                      flex: 2,
                      child: SkillsContainer(skillsList: human.hobbies,),
                    ),
                    Container(
                      width: 10,
                      height: 10,
                      color: MyColors.pink,
                      child: IconButton(
                        icon: Icon(Icons.delete),
                        iconSize: 10,
                        color: MyColors.purple,
                        onPressed: () {
                          humansData.deleteHuman(human.id);
                        },
                      ),
                    ),
                  ],
                ),

Answer 1

Да, к сожалению у виджета Wrap нет ограничения по количеству строк, но подобное поведение можно имитировать текстом с WidgetSpan-ами и параметром maxLines:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text.rich(
          TextSpan(children: [
            TextSpan(text: 'Contact '),
            ...List.generate(
              32,
              (index) => WidgetSpan(
                child: Chip(label: Text('chip #$index')),
                alignment: PlaceholderAlignment.middle,
              ),
            ),
          ]),
          maxLines: 1,
        ),
      ),
    );
  }

БЛОГ НА HUSL

Как во Flutter/Dart ограничить количество элементов в Row() по их ширине (чтобы были только те, которые влезли в экран)?

Ответы (1 шт):