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

How to center one element and place the second element next to it – Flutter

In my layout I have two Widgets in a row, a text and a button.

How can I achieve something like below, where only the Text is centered, and the icon is simply next to it?

---------------------------
           Text *          
---------------------------

Using Row would center all the contents and would output something like

---------------------------
          Text *           
---------------------------

Tried: Row(children:[widget1, widget2], mainAxisAlignment: MainAxisAlignment.center);
But this centers both items, causing the text to look off-centered.

Tags:

2

Answers


  1. 0

    You can use CompositedTransformTarget and CompositedTransformFollower as mentioned on comment section by pskink.

    class AppPT extends StatelessWidget {
  const AppPT({super.key});

  @override
  Widget build(BuildContext context) {
    final LayerLink _layerLink = LayerLink();

    return Scaffold(
      body: Column(
        children: [
          Stack(
            children: [
              Align(
                child: CompositedTransformTarget(
                  link: _layerLink,
                  child: Container(
                    color: Colors.red,
                    width: 100,
                    height: 60,
                    alignment: Alignment.center,
                    child: Text("btn"),
                  ),
                ),
              ),
              CompositedTransformFollower(
                link: _layerLink,
                targetAnchor: Alignment.centerRight,
                followerAnchor: Alignment.centerLeft,
                child: Container(
                  color: Colors.cyanAccent,
                  width: 12,
                  height: 12,
                  alignment: Alignment.center,
                  child: Text("*"),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

    There are few tricks I can think of,

    • You can use Stack widget with Position.

    • including another widget on right by applying opacity(invisible) on current snippet.

    • using transform will be handle if you know the width of the widget.

    Transform.translate(
  offset: Offset(20 / 2, 0), //20 is the * box size
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        color: Colors.red,
        width: 100,
        height: 60,
        alignment: Alignment.center,
        child: Text("btn"),
      ),
      Container(
        color: Colors.green,
        width: 20,
        height: 20,
        child: Center(child: Text("*")),
      ),
    ],
  ),
),

    enter image description here

    Login or Signup to reply.
  2. 0

    Place text and second widget inside row then put the row inside container with alignment center and use SizedBox for spacing between widget instead of Padding Widget.

    Container(
      color: Colors.green,
      alignment: Alignment.center,
      height: 100,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: const [
          Text("Text"),
          SizedBox(width: 10),
          Text("*"),
        ],
      ),
    );

    enter image description here

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

Back To Top
Search