user1506630
user1506630

Reputation: 405

How to fix Aspectratio widget hiding its child?

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:

enter image description here

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

Answers (1)

Mariano Zorrilla
Mariano Zorrilla

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:

Square Widget

Upvotes: 1

Related Questions