Deep dive into the Container widget in flutter

Hi, Flutter developers in this blog we shall discuss the container widget. It is one of the most used widgets in flutter. It provides us with a lot of properties to build a customized widget.

1. Color property: The container widget provides us with a colors property to pass the color.

Container(
      color: Colors.blue,
    ),

2. Dimensions: The container provides height and width properties to set the dimensions of the container. They can be accessed using height, and width properties. Both the property takes double values.

Container(
      color: Colors.blue,
      width: 200,
      height: 400,
    ),

Passing responsive height and width using media query:

MediaQuery is a class that enables us to query the current size of the screen.

Let’s define the methods to get the size, height, and width using MediaQuery.

MediaQueryData mediaQueryData(BuildContext context) {
      return MediaQuery.of(context);
    }    
    
    Size size(BuildContext buildContext) {
      return mediaQueryData(buildContext).size;
    }
    double width(BuildContext buildContext) {
      return size(buildContext).width;
    }
    
    double height(BuildContext buildContext) {
      return size(buildContext).height;
    }

We can use the height and width methods to pass responsive dimensions.

Container(
      color: Colors.blue,
      width: width(context) * 0.5,
      height: height(context) * 0.6,
    ),

3. Passing child into the container:

Container widget provides child property, which takes a widget. We can pass any widget into the child property of the container.

Container(
      color: Colors.blue,
      width: width(context) * 0.5,
      height: height(context) * 0.6,
      child: Text(
        "this is a container",
        style: TextStyle(fontSize: 30),
      ),
    ),

4. Padding:

padding is a property that adds space around the widget.

Container(
      color: Colors.blue,
      width: width(context) * 0.5,
      padding: EdgeInsets.all(10),
      height: height(context) * 0.6,
      child: Text(
        "this is a container",
        style: TextStyle(fontSize: 30),
      ),
    ),

5. Margin:

margin property assigns the space outside the widget.

Row(
      children: [
        Text("this is demo text "),
        Container(
          color: Colors.blue,
          width: width(context) * 0.5,
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.all(40),
          height: height(context) * 0.6,
          child: Text(
            "this is a container",
            style: TextStyle(fontSize: 30),
          ),
        )
      ],    
    ),

With zero margins:

With the margin of 40 px:

“Margin means the spacing outside the border, while the padding is the spacing inside the border”

6. Alignment:

Alignment property aligns the child of the container.

Container(
      color: Colors.blue,
      width: width(context) * 0.5,
      height: height(context) * 0.6,
      alignment: Alignment.centerLeft,
      child: Text(
        "container",
        style: TextStyle(fontSize: 30),
      ),
    ),

7. Constraints:

constraints take BoxConstraints, inside BoxConstraints we can specify the max and min-height and width. If the height and width of the container exceed the BoxConstraints then the BoxConstraints dimension will be used.

Container(
      color: Colors.blue,
      width: width(context) * 0.5,
      height: height(context) * 0.6,
      constraints: BoxConstraints(
        maxWidth: 600,
        minWidth: 300,
        maxHeight: 500,
        minHeight: 400,
      ),
      child: Text(
        "container",
        style: TextStyle(fontSize: 30),
      ),
    ),

8. boxDecoration:

Box decoration is the decoration of the background behind the child widget. Inside the decoration, we can change the color, border-radius, gradient, border, image, shape, shadow, etc.

decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.green,
        ],
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
      ),
    ),

With shape and box-shadow:

decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.green,
        ],
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.blue,
          spreadRadius: 10,
          blurRadius: 10,
        ),
      ],
    ),

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

Become a Flutter Developer and Unleash Your Creativity!

Ready to take your mobile app development skills to the next level? Our comprehensive Flutter course is perfect for beginners, guiding you through the process of building stunning native applications for iOS, Android, and the web.

With Flutter’s streamlined approach and the Dart programming language, you’ll learn how to create visually appealing apps with just one codebase. No need to master multiple languages — Flutter simplifies the process, making it easier and faster to bring your app ideas to life.

From setting up your development environment to mastering key concepts like widgets, navigation, forms, and state management, you’ll gain practical knowledge every step of the way. Plus, you’ll even explore exciting AI-powered chatbot development using OpenAI APIs.

Enroll today and discover the world of Flutter development. Unleash your creativity and build beautiful, high-performance native mobile applications with ease.

https://www.udemy.com/course/flutter-bootcamp-build-native-mobile-apps-with-dart-2023/