Reputation: 405
I am trying to make a materialbutton widget in to a square. And I want 4 of those buttons to forma square of their own. Like this:
So I tried this:
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
AspectRatio(
aspectRatio: 1,
child: MaterialButton(
child: Icon(
Icons.camera_alt,
color: Colors.blue,
size: 42,
),
color: Colors.red,
onPressed: () => {},
),
),
],
)
],
));
}
I expected to have a square materialbutton on the top left corner, but i just got an empty(green colored) screen.
Upvotes: 0
Views: 79
Reputation: 7686
You'll need to do several things. You could use the InstrisicWidth and IntrinsicHeight Widgets with your Row and Columns:
Material(
child: IntrinsicHeight(
child: IntrinsicWidth(
child: Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5),
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(10),
child: Center(
child: Icon(Icons.camera_alt),
),
),
),
),
Padding(
padding: const EdgeInsets.all(5),
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(10),
child: Center(
child: Icon(Icons.info),
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5),
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(10),
child: Center(
child: Icon(Icons.home),
),
),
),
),
Padding(
padding: const EdgeInsets.all(5),
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(10),
child: Center(
child: Icon(Icons.thumb_up),
),
),
),
),
],
),
),
],
),
),
),
),
),
);
The end result of this code is what you need, 4 squared creating a new square:
Upvotes: 1