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.
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.
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