How To Easily Change Flutter Container Size

flutter container size

In this Flutter post, we will be changing the Flutter container size with the help of a suitable straightforward Flutter example to better understand how it works and how you can use it.

After reading this post, you will not find any problems regarding the customization of Flutter container size. So let’s not wait anymore and jump right into the phase of Flutter container size customization.

What is Flutter Container Size?

Flutter container size is the amount of screen that it covers. It is basically the horizontal and vertical height of the container widget. Let’s understand the Flutter container size using a proper Flutter example.

Change Flutter Container Size

In order to change the Flutter container size, we have to use the height and width constructors of the Flutter container widget class. Both these constructors takes a double(decimal) value but passing it integer value will work just fine(automatically conversion will take place). Let’s customize and implement both of these constructors separately.

  1. Flutter Container Height
  2. Flutter Container Width
Flutter Container Height

In order to see what changes will the height constructor make in the container widget, we just have to give some value to that constructor. For demonstration, we have used two examples. In the first, we have given the container height a lesser value and in the second one, we have provided it will a larger value. See below code:

Container with Less Height

flutter container min height

 Container(
            height: 30,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter Container less height',
              style: TextStyle(color: Colors.white),
            ),
          )
Container with Large Height

flutter container height 100

Container(
            height: 100,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter Container less height',
              style: TextStyle(color: Colors.white),
            ),
          )
Flutter Container Width

Now let’s see what changes can we expect from giving dynamic values to the width constructor of the Flutter container widget class. For that we will use the same process mentioned above. We will first give less value to the Flutter container width constructor and secondly we will pass a larger value to it. See the below code:

Flutter Container Less Width

flutter container width min

Container(
            width: 160,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter Container less width',
              style: TextStyle(color: Colors.white),
            ),
          )
Flutter Container Larger Width

flutter container width max

 Container(
            width: 280,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter Container large width',
              style: TextStyle(color: Colors.white),
            ),
          )
Now you have a complete understanding of how to change Flutter container size. I expect that now you will easily customize Flutter container size in your own Flutter apps. Don’t hesitate to ask if you still have any question related to the customization of Flutter container size. I would really love to answer all your questions.
Below is the complete source code in which Flutter container size is properly customized.

Customized Flutter Container Size Source Code

flutter container size

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 280,
            height: 100,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter Container size customized',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ],
      ),
    )));
  }
}

Conclusion

As concluding of this Flutter post, hope you will easily customize Flutter container size in your Flutter apps. Don’t hesitate to share your valuable thoughts about this Flutter post. Thanks for reading this Flutter post.

Leave a Comment

Your email address will not be published.