Question 175478 in Flutter Question posted in
The official Flutter documentation can be found here.

size Does Flutter Container width adjust to screen size?

I am having trouble to make my container fit to flutter width. I tried

width: MediaQuery.of(context).size.width,

but still to no avail. You can see that it’s over extended as I have a circular border but on the right it’s overlapping behind. Refer to the pic below:

Horizontal:
enter image description here
Vertical:
enter image description here

Container code:

        Container(
                        padding: const EdgeInsets.symmetric(
                          vertical: 6,
                          horizontal: 12.0,
                        ),
                        height:
                            150, 
                        width: MediaQuery.of(context).size.width,
                        decoration: const BoxDecoration(
                          color: white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(
                              16.0,
                            ),
                          ),
                        ),
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                "Sejarah",
                                style: GoogleFonts.montserrat(
                                  color: black,
                                  fontSize: 16,
                                  letterSpacing: 1,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

Appreciate any help I can get, thanks!

Tags:

2

Answers


  1. 0

    You can force your Container Widget to have border radius by using the ClipRRect Widget. Modify your Widget with below Widget:

    ClipRRect(
              borderRadius: BorderRadius.all(
                Radius.circular(
                  16.0,
                ),
              ),
              child: Container(
                padding: const EdgeInsets.symmetric(
                  vertical: 6,
                  horizontal: 12.0,
                ),
                height: 150,
                width: MediaQuery.of(context).size.width,
                decoration: const BoxDecoration(
                  color: white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(
                      16.0,
                    ),
                  ),
                ),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "Sejarah",
                        style: GoogleFonts.montserrat(
                          color: black,
                          fontSize: 16,
                          letterSpacing: 1,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
    Login or Signup to reply.
  2. 0

    You can change the width of the container to double.infinity

    change this line

    width: MediaQuery.of(context).size.width,

    to

    width: double.infinity,
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search