How To Easily Change Flutter Container Alignment

flutter container alignment

In this Flutter post, we will be practically customizing the Flutter container alignment with the help of an easy Flutter example for better understanding. Everything about changing Flutter container alignment will be explained step by step so you can change alignment of Flutter container widget in your own Flutter apps with ease.

That means we should not wait more to customize Flutter container alignment. So let’s just get right into it.

What is Flutter Container Alignment?

It defines the position of the child widget of Flutter container. Don’t worry, you will understand it in detail when we practically discuss it with Flutter code. First we will see what the default Flutter container alignment is, then we will change its alignment.

Default Flutter Container Alignment

For that, we will create a Flutter container widget with some height, width and also give that container a background color. Then we will give it a child text widget with a white color in order for it to be clearly visible.. In this way, we will see the default Flutter container alignment. Just make sure that the container is big so you can clearly see the default alignment. See the below code:

Container(
          height: 200,
          width: 300,
          color: Colors.blue,
          child: Text(
            'Default container alignment',
            style: TextStyle(fontSize: 17, color: Colors.white),
          ),
        )
flutter container default alignment
You can see that the default alignment of Flutter container is top left. Let’s now practically customize that alignment.

Change Flutter Container Alignment(7 Examples)

To change the alignment of Flutter container widget, we have to use its alignment constructor. Below examples will cover every custom alignment of Flutter container. See below:

Example 1: Top Right

flutter container alignment top right

alignment: Alignment.topRight

Example 2: Top Left

flutter container alignment top left

alignment: Alignment.topLeft

Example 3: Center Left

flutter container alignment center left

alignment: Alignment.centerLeft

Example 4: Center Right

flutter container alignment center right

alignment: Alignment.centerRight

Example 5: Center

flutter container alignment center

alignment: Alignment.center

Example 6: Bottom Left

flutter container alignment bottom left

alignment: Alignment.bottomLeft

Example 7: Bottom Right Right

flutter container alignment bottom right

alignment: Alignment.bottomRight
So this is how to can set any Flutter container alignment of your choice. Hope you now will not face any difficulties while customizing Flutter container alignment. Do comment your questions regarding the customization of Flutter container alignment. I would be really glad to clear your queries.
The complete source code is given in the below section in which Flutter container alignment is also customized.

Customized Flutter Container Alignment Source Code

flutter container alignment

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: Container(
          alignment: Alignment.center,
          height: 150,
          width: 300,
          color: Colors.purple,
          child: Text(
            'Flutter Centered Container Alignment',
            style: TextStyle(fontSize: 17, color: Colors.white),
          ),
        ),
      ),
    ));
  }
}

Conclusion

To conclude, I hope you now have an in depth practical understanding of how to change Flutter container alignment. Don’t hesitate to share your valuable thoughts regarding this post. Thank you for reading this post.

Leave a Comment

Your email address will not be published.