Нам нужно переместить иконки в конец карты и с расстоянием между ними 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)),
],
),
),
),
),
),
),
),
Вы можете попробовать поставить 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()),
А потом иконы. Это создаст пространство контейнера с пустой областью в строке.
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Вы должны обернуть свой виджет Text
виджетом Expanded
, который выделяет максимальную ширину вашему тексту, поэтому, если ваш текст станет больше по длине, он перенесет его в новую строку.
Expanded(
child: Text(
close[index],
style: constants.Styles.smallerLtStdTextStyleWhite,
),
),
Выход:
Если вы используете только виджет Spacer
в соответствии с другим ответом (который будет работать), но если длина вашего текста станет больше, это приведет к ошибке переполнения.
Как показано ниже:
Также не используйте Spacer
и Expanded
вместе, так как по умолчанию для Expanded Flex и Spacer по умолчанию установлено значение 1
, флаттер выделит им равное количество места, что снова вызовет у вас проблему.
Например:
Большое тебе спасибо. И если я обернул текст в развернутом виде, но вокруг значков есть невидимый отступ, который не дает тексту достаточно места, можно ли уменьшить интервал в самих значках?
То есть из IconButton, который вы используете, вы можете изменить visualDensity
IconButton в соответствии с вашими потребностями. Например: dart IconButton( visualDensity: VisualDensity.compact, onPressed: () {}, icon: Icon(Icons.info), ),
Этот код сделает его более компактным.
Спасибо. Можно еще сделать расстояние между иконками? Уменьшить, помимо visualDensity ?
Вам просто нужно добавить виджет
Spacer()
междуText()
иIconButton()
. Виджет Spacer займет все доступное место. Вы также можете добавитьmainAxisSize: MainAxisSize.max
в свою строку, чтобы она занимала максимальное пространство.