Не удается переместить значки в конец Card Flutter

Нам нужно переместить иконки в конец карты и с расстоянием между ними 17px. Пробовал по разному и выравнивать, но почему-то не получается сдвинуть иконки до конца. Буду благодарен, если подскажете, как правильно сделать.

Scrollbar(
          isAlwaysShown: true,
          thickness: 2,
          scrollbarOrientation: ScrollbarOrientation.left,
          child: ListView.builder(
            itemCount: close.length,
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.only(left: 9),
              child: SizedBox(
                height: 47,
                child: Card(
                  color: constants.Colors.greyMiddle,
                  margin: const EdgeInsets.only(
                    bottom: 4,
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 9, vertical: 5),
                    child: Row(
                      // mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        const CircleAvatar(
                          backgroundColor: constants.Colors.white,
                        ),
                        const SizedBox(
                          width: 11,
                        ),
                        Text(
                          close[index],
                          style: constants.Styles.smallerLtStdTextStyleWhite,
                        ),
                        IconButton(
                            onPressed: () {},
                            icon: SvgPicture.asset(constants.Assets.barPoynts)),
                        IconButton(
                            onPressed: () {},
                            icon: SvgPicture.asset(constants.Assets.crypto)),
                        IconButton(
                            onPressed: () {},
                            icon: SvgPicture.asset(
                                constants.Assets.barFavourites)),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),

Не удается переместить значки в конец Card Flutter

Вам просто нужно добавить виджет Spacer() между Text() и IconButton(). Виджет Spacer займет все доступное место. Вы также можете добавить mainAxisSize: MainAxisSize.max в свою строку, чтобы она занимала максимальное пространство.

Haseeb Pavaratty 08.04.2022 11:47
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
1
34
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете попробовать поставить Spacer() перед IconButtons. Так нравится

                  children: [
                    const CircleAvatar(
                      backgroundColor: constants.Colors.white,
                    ),
                    const SizedBox(
                      width: 11,
                    ),
                    Text(
                      close[index],
                      style: constants.Styles.smallerLtStdTextStyleWhite,
                    ),
                    const Spacer(),
                    IconButton(
                        onPressed: () {},
                        icon: SvgPicture.asset(constants.Assets.barPoynts)),
                    IconButton(
                        onPressed: () {},
                        icon: SvgPicture.asset(constants.Assets.crypto)),
                    IconButton(
                        onPressed: () {},
                        icon: SvgPicture.asset(
                            constants.Assets.barFavourites)),
                  ],

Распорки всегда занимают столько места, сколько могут

{Text(close[index],
    style: constants.Styles.smallerLtStdTextStyleWhite,
                    ),}

После этого напишите

Expanded(child:Container()),

А потом иконы. Это создаст пространство контейнера с пустой областью в строке.

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

Community 08.04.2022 18:07
Ответ принят как подходящий

Вы должны обернуть свой виджет Text виджетом Expanded, который выделяет максимальную ширину вашему тексту, поэтому, если ваш текст станет больше по длине, он перенесет его в новую строку.

Expanded(
  child: Text(
    close[index],
    style: constants.Styles.smallerLtStdTextStyleWhite,
  ),
),

Выход:

Если вы используете только виджет Spacer в соответствии с другим ответом (который будет работать), но если длина вашего текста станет больше, это приведет к ошибке переполнения.

Как показано ниже:

Также не используйте Spacer и Expanded вместе, так как по умолчанию для Expanded Flex и Spacer по умолчанию установлено значение 1, флаттер выделит им равное количество места, что снова вызовет у вас проблему.

Например:

Большое тебе спасибо. И если я обернул текст в развернутом виде, но вокруг значков есть невидимый отступ, который не дает тексту достаточно места, можно ли уменьшить интервал в самих значках?

Max 08.04.2022 12:08

То есть из IconButton, который вы используете, вы можете изменить visualDensity IconButton в соответствии с вашими потребностями. Например: dart IconButton( visualDensity: VisualDensity.compact, onPressed: () {}, icon: Icon(Icons.info), ), Этот код сделает его более компактным.

ibhavikmakwana 08.04.2022 12:15

Спасибо. Можно еще сделать расстояние между иконками? Уменьшить, помимо visualDensity ?

Max 08.04.2022 12:32

Другие вопросы по теме