How To Easily Set Flutter Column Align Left

flutter column align left

In this Flutter post, we will be implementing Flutter column align left. We will first see what Flutter column align left means, then we will set it to Flutter column align left by using an easy Flutter example. After reading this post, you will be able to easily implement it in your own Flutter code with ease.

What is Flutter Column Align Left?

As you map already know, we have a column widget in Flutter which is used to show a list of Flutter widgets vertically(top to bottom). Flutter column align left means the alignment of the column widget that will be applied to its list of widgets.

We will first see what the default Flutter column alignment is, then we will practically change it to Flutter column align left.

Default Flutter Column Alignment

In order to see its default alignment, we have to first define a simple Flutter column widget and pass some widgets to it as children. We will pass a number text widgets to it using for loop. See below code:

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
              for (int i = 0; i < 4; i++) 
                   Text('Default Column Alignment')
                  ],
                )
flutter column default align
You can see that we have set main axis alignment to center which only makes the column items centered vertically. As you can see that this is the default horizontal alignment of Flutter column widget. Let’s now see how to set Flutter column align left.

Implementing Flutter Column Align Left

In order to implement it, we have to use the cross axis alignment constructor of the Flutter column widget class. Then we have to pass cross axis alignment start to it. See the below code:

crossAxisAlignment: CrossAxisAlignment.start
flutter column align left
So this is how you can easily set Flutter column align left in your Flutter apps. We have given our screen some padding so the column and the screen edge have some distance between them and can be seen in the above image.
If you still have any questions related to the implementation of Flutter column align left, then do let me know in the comment section. I would love to answer your questions.
Below section has the complete Flutter source code in which Flutter column align left is practically implemented.

Flutter Column Align Left Implementation Source Code

flutter column align left

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 StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Padding(
      padding: const EdgeInsets.all(8.0),
      child: SizedBox(
          height: double.infinity,
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              for (int i = 0; i < 4; i++)
                Container(
                    margin: EdgeInsets.all(5),
                    padding: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        color: Colors.purple,
                        borderRadius: BorderRadius.circular(10)),
                    child: Text(
                      'Flutter Column Left Aligned',
                      style: TextStyle(color: Colors.white),
                    ))
            ],
          )),
    )));
  }
}

Conclusion

To conclude, hope you now have a clear practical idea of how to implement Flutter column align left in Flutter apps. Your feedback would be well appreciated. I’d like to thank you for reading this Flutter post.

Leave a Comment

Your email address will not be published.