How To Easily Change Flutter Container Height

flutter container height

In this Flutter post, we will be changing Flutter container height and explain it step by step by using a proper and easy Flutter example code. I hope after reading this post, you will be able to customize Flutter container height in your own Flutter apps with easy.

If you are still reading this then that means you really want to learn the customization of Flutter container height. So let’s get right into it.

What is Flutter Container Height?

Flutter container height is the vertical size of the container widget. We will first see what the default Flutter container height look like and then by using a Flutter example, we will change the height of Flutter container.

Default Flutter Container Height

In order to see the default height of Flutter container, we have to define a simple Flutter container with some width and a background color so we can see if we see a container on our screen with some default height. See the below code:

Container(
        width: 100,
        color: Colors.blue
      )
If you run this code then you will see that the Flutter container is not shown in the screen. That means that the default Flutter container height is 0.
Let’s now give our container a child Text widget and then see what the height of container looks after that. See the below code:
 Container(
            width: 220,
            color: Colors.blue,
            child: Text(
              'Flutter container default height',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
          )
flutter container default height
You can see in the above image that there is no default height of container but it changes with the size of text.
Let’ now give our container a height of its own.

Change Flutter Container Height

In order to change the Flutter container height, we have to make use of the height constructor of Flutter container widget. This height constructor takes a double(decimal) value but we can pass integer as well(automatically converted).

For demonstration, we have passed a value 100 to the height constructor of Flutter container widget class. See below code:

Container(
            height: 100,
            width: 220,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter container custom height',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
          )
flutter container height
You can see in the image above that the Flutter container height is properly customized. You can give bigger or smaller value to the height constructor.
So in this way, you can easily change the Flutter container height. Do ask questions in the comment section, if you have any. I would love to answer.
Below section has the complete source code of the above implemented Flutter container height.

Flutter Container Height Customization Source Code

flutter container height

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(
            height: 100,
            width: 220,
            alignment: Alignment.center,
            color: Colors.blue,
            child: Text(
              'Flutter container custom height',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
          ),
        ],
      )),
    ));
  }
}

Conclusion

In conclusion, I have practically implemented the customization of Flutter container height. I would love to have your feedback on this post. Thank you for reading this post.

Leave a Comment

Your email address will not be published.