Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How can I move the icon button in a container?

　enter image description here

This is my container. I want to move the copy button to the right. How can I do?
This is my code.

Container(
            child: Row(
              children: [
                const SizedBox(
                  width: 10,
                ),
                Flexible(
                  child: Text(
                      "",
                  ),
                ),
                  child: IconButton(
                    onPressed: setClipboard,
                    icon: const Icon(
                      Icons.copy,
                    ),
                  ),
                const SizedBox(
                  width: 15,
                ),
              ],
            ),
          ),

I skipped my decoration of container.

Tags:

2

Answers


  1. 0

    There are multiple ways to achieve this,

    Container(
  width: double.infinity,
  decoration: BoxDecoration(
    border: Border.all(),
      borderRadius: BorderRadius.circular(8.r),
    ),
    alignment: Alignment.centerRight,
    child: IconButton(
      icon: const Icon(Icons.copy_outlined),
      onPressed: () {},
    ),
 ),

    here, you have to give the container width of double.infinity so
    that it can capture the whole width. Then give the container alignment
    of centerRight, so that it can align its child from right. and
    you achieve you goal

    Another way by using row,

            Container(
          decoration: BoxDecoration(
            border: Border.all(),
            borderRadius: BorderRadius.circular(8.r),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              const Flexible(
                child: Text(
                  "Copy",
                ),
              ),
              IconButton(
                icon: const Icon(Icons.copy_outlined),
                onPressed: () {},
              ),
            ],
          ),
        ),

    Here, inside the container give row with mainAxisAlignment property
    MainAxisAlignment.end which align its children from right, and you
    achieve your goal.

    I hope this will solve your issue and you can understand overall procedure.

    Login or Signup to reply.
  2. 0

    You just can force the text to allocate the remaining space of the row: by setting fit: FlexFit.tight which makes the flexible widget equal to Expanded widget

    Container(
        padding: EdgeInsets.symmetric(horizontal: 15),
        child: Row(children: [
          Flexible(
            fit: FlexFit.tight,
            child: Text(
              "",
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.copy,
            ),
          ),
        ]),
      )

    Note: SizedBoxs have been replaced by padding.

    Or, you can put a spacer between the text and the icon button:

      Text(
            "",
          ),
          Spacer(),
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.copy,
            ),
          ),

    or setting Row’s mainAxisAlignment to spaceBetween.

     Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
          Text(
            "",
          ),
         
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.copy,
            ),
          ),
        ]),

    Hope it helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search