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')
],
)
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 Implementation Source Code
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.
