Flutter / layouts / Column
Column
-
Usage
Flutter Column widget is used to display its widgets in a vertical array.
Syntax
Column( children: const [ //some widgets ], ) 1) Column should have children: Constructor
Column( {Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List children: const []} ) different properties explained for main axis and cross axis alignment:
1. start: it will align children at the start of the axis direction.
2. center: It will align children at the center of the axis.
3. end: It will align children at the end of the axis.
4. spaceBetween: It will add space between children evenly.
5. spaceAround: It will add the space between the children evenly and half of that space before and after the first and last children widget.
6. spaceEvenly: It will add the space between the children evenly and before and after the first and last children widget.
Example
import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); /// main application widget. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'Flutter Tutorial'; @override Widget build(BuildContext context) { return const MaterialApp( title: _title, home: MyStatefulWidget(), ); } } /// stateful widget that the main application instantiates class MyStatefulWidget extends StatefulWidget { const MyStatefulWidget({Key? key}) : super(key: key); @override State createState() => _MyStatefulWidgetState(); } /// private State class that goes with MyStatefulWidget class _MyStatefulWidgetState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Column Widget Tutorial'), ), body: Center( child: Column( children: const [ Text('Text 1', style: TextStyle(fontSize: 24.0),), Text('Text 2', style: TextStyle(fontSize: 24.0),), Icon( Icons.beach_access, color: Colors.pink, size: 30.0, ), Icon( Icons.audiotrack, color: Colors.green, size: 30.0, ), ], ) ), ); } } column()