CODEWITHSUNDEEP
flutterdartflutter-layout
Max
Max

Reputation: 1301

Can't move icons to end of Card Flutter

We need to move the icons to the end of the Card and with a distance of 17px between them. I tried in different ways and align, but for some reason I can not move the icons to the end. I would be grateful if you tell me how to do it right.

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

enter image description here

Upvotes: 1

Views: 604

Answers (3)

ibhavikmakwana
ibhavikmakwana

Reputation: 10101

You should wrap your Text widget with the Expanded widget, Which allocates the max-width to your Text so if your text gets bigger in length it will wrap it in a new line.

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

Output:

enter image description here

If you use only the Spacer widget as per the other answer (which will do the work) but if your text length got bigger it will result in an overflow error.

Like below:

enter image description here

Also Do not use Spacer and Expanded together, as Expanded's default flex and Spacer's default flex are set to 1, flutter will allocate 'em equal amount of space and which will again cause an issue for you.

for example:

enter image description here

Upvotes: 4

Pavan Dixit
Pavan Dixit

Reputation: 41

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

After this, Write

Expanded(child:Container()),

And then icons. It will make space of container with empty area in Row.

Upvotes: 1

Ivo
Ivo

Reputation: 23164

You can try putting a Spacer() before the IconButtons. So like

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

Spacers always take as much space as they can

Upvotes: 2

Related Questions