Column Examples

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Column Widget: Examples")),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  static final TextStyle bigStyle = TextStyle(fontSize: 20);

  //Simple Column of similar Text children
  final col1 = Column(
    children: [
      Text(
        "Column 1",
        style: bigStyle,
      ),
      Text(
        "Column 2",
        style: bigStyle,
      ),
      Text(
        "Column 3",
        style: bigStyle,
      )
    ],
  );

  //Column of different Widget children
  final col2 = Column(
    children: [
      FlutterLogo(
        size: 100.0,
      ),
      Text(
        "Column 2",
        style: bigStyle,
      ),
      Container(
        color: Colors.green,
        height: 100.0,
        width: 100.0,
      )
    ],
  );

  //Playing with MainAxisAlignment
  final col3 = Column(
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      FlutterLogo(
        size: 100.0,
      ),
      Text(
        "Child Two",
        style: bigStyle,
      ),
      Container(
        color: Colors.blue,
        height: 100.0,
        width: 100.0,
      )
    ],
  );

  //Column having Row as child
  final col4 = Column(
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Text("Parent Text 1"),
      Text("Parent Text 2"),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [Text("Child Row Text 1"), Text("Child Row Text 2")],
      ),
    ],
  );
  
  
  @override
  Widget build(BuildContext context) {
    return col4;
  }
}