Search code examples
flutteralignment

Flutter align center and right on a wrap widget


I am using Wrap widget to align widgets on center and right, please see the below image what i am trying to achieve.

Using wrap widget instead of Row widget because widget get adjusted on available space when resizing the screen.

enter image description here

Below is the code tried to get the above result as shown in the image.

Wrap(
    alignment: WrapAlignment.center,
    crossAxisAlignment: WrapCrossAlignment.center,
    runAlignment: WrapAlignment.center,
    spacing: 30.0,
    children: [
      Wrap(
        spacing: 20,
        children: const [
          Text("About Me"),
          Text("B"),
          Text("C"),
          Text("D"),
        ],
      ),
      Wrap(
        alignment: WrapAlignment.end,
        children: [
          Text("My Data"),
        ],
      ),
    ],
),

but widgets are not aligned properly, above code output as below.

enter image description here


Solution

  • class MyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Align(
          alignment: Alignment.topRight,
          child: Wrap(
            alignment: WrapAlignment.center,
            spacing: MediaQuery.of(context).size.width * 0.4,
            children: [
              Wrap(
                spacing: MediaQuery.of(context).size.width * 0.05,
                children: const [
                  Text("About Me"),
                  Text("B"),
                  Text("C"),
                  Text("D"),
                ],
              ),
              Wrap(
                alignment: WrapAlignment.end,
                children: [
                  Text("My Data"),
                ],
              ),
            ],
          ),
        );
      }
    }
    

    here is the output

    enter image description here