Reputation: 57
I want to align my some widgets in a row in a particular way. I want the Icon to be at the beginning of the row and the text to be at the center, I tried wrapping the text widget in a center widget but that didn't work. Please how can I carry out something like that with a row that only has two children?
Upvotes: 0
Views: 111
Reputation: 1
You could use a Stack
for the same
Sample code
Container(
padding: const EdgeInsets.symmetric(vertical: 18),
color: Colors.black,
child: Stack(
children: const [
Center(
child: Text(
"Login",
style: TextStyle(fontSize: 18, color: Colors.white,fontWeight: FontWeight.w600),
),
),
Positioned(
left: 12,
child: Icon(
Icons.close,
color: Colors.white,
),
),
],
),
);
Upvotes: 0
Reputation: 23134
Wrap the Center
in an Expanded
. So something like this:
Widget build(BuildContext context) {
return Row(children: const [
Icon(Icons.abc),
Expanded(child: Center(child: Text('abc')))
]);
}
Upvotes: 1