CODEWITHSUNDEEP
flutter
M. Abdel-Ghani
M. Abdel-Ghani

Reputation: 205

Set Container height equal to width in Flutter

I am learning Flutter development. I want to display some rounded square shaped containers with short text in a row. However, the possible shapes are either a circle or rectangle. So I decided to set the width and height of the rectangle so that they would be equal. The following is the code I used to create the Container

Container(
      width: double.maxFinite,
      height: 
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    ),

When I set the shape in Box decoration alone, the Container resized to the size of the text. When I set the width property of the Container, I was able to divide the available width of the screen among the containers, which ensures flexibility of size if the screen was smaller or bigger, instead of hard coding it. Now I want to make the height the exact same size that the width turns out to be, thus obtaining a square container. Any idea how I could do that?

EDIT: I tried the following code and this is how the containers are looking like in both cases:

Container(
      alignment: Alignment.center,
      width: double.maxFinite,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),

Container(
      alignment: Alignment.center,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),

After using MediaQuery.of(context).size.width for height property or both

Upvotes: 8

Views: 11717

Answers (4)

Sanjeev Sangral
Sanjeev Sangral

Reputation: 1417

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    ),

Upvotes: 0

syonip
syonip

Reputation: 2971

Here is a solution without using MediaQuery:

AspectRatio(
  aspectRatio: 1,
  child: Container(
    width: double.infinity,
    child: Text(),
  ),
)

Upvotes: 34

EdYuTo
EdYuTo

Reputation: 6874

check this quick example that I made just for you!

  // This function is just an example
  List<Widget> buildContainers(BuildContext context, int containerCount) {
    // Here you get the width of all your containers
    final containerWidth = MediaQuery.of(context).size.width / containerCount;
    // Make height = width for squares!
    final containerHeight = containerWidth;
    // We will gather all containers in this list
    List containerList = <Container>[];

    for (var i = 0; i < containerCount; i++) {
      containerList.add(
        Container(
          // Use the predefined width and height here!
          width: containerWidth, 
          height: containerHeight,
          // Random color to differentiate each container
          // You could replace this with your child widget
          color: Color(
            Random().nextInt(0xFFFFFFFF),
          ),
        ),
      );
    }

    return containerList;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          // If you are wondering what are these dots (...)
          // they are called "spread operators" and you can find more about them here:
          // https://dart.dev/guides/language/language-tour#spread-operator
          ...buildContainers(context, 7),
        ],
      ),
    );
  }

Upvotes: 0

JideGuru
JideGuru

Reputation: 7670

Use MediaQuery. MediaQuery.of(context).size.width gives you the Screen width size value.

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        color: ThemeProvider.themeOf(context).data.primaryColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(keyText),
    )

Upvotes: 0

Related Questions