Column

  • Usage

    Flutter Column widget is used to display its widgets in a vertical array.

    Syntax

    
                      Column(
                        children: const <Widget>[
                          //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<Widget> children: const <Widget>[]}
                        )
                        

    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<MyStatefulWidget> createState() => _MyStatefulWidgetState();
     }
      
     /// private State class that goes with MyStatefulWidget
     class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: const Text('Column Widget Tutorial'),
           ),
           body: Center(
               child: Column(
                 children: const <Widget>[
                   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()