Column widget in Flutter

A Column widget is a fundamental building block for arranging UI elements vertically in your Flutter app. It displays its child widgets one below the other, just like stacking items in a column. Columns are essential for creating organized layouts and are one of the most commonly used widgets in Flutter development.

Key Points about Columns

• Vertical Arrangement: Children are stacked on top of each other, with the first child at the top.
• Multiple Children: A Column can hold multiple child widgets. These child widgets can be anything from Text and Icons to other Rows or even more Columns for nested layouts.
• Customization: You can control how the children are positioned within the Column using properties like mainAxisAlignment and crossAxisAlignment.
• No Scrolling: By default, a Column doesn’t provide scrolling functionality. If you have more content than can fit on the screen, you’ll need to use a widget like ListView for scrollable content.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [

          Text('Column Demo', style: TextStyle(fontSize: 30),),
          Container(
            height: 100,
            color: Colors.blue,
            margin: EdgeInsets.all(5),
          ),
          Container(
            height: 100,
            color: Colors.yellow,
            margin: EdgeInsets.all(5),
          ),
          Container(
            height: 100,
            color: Colors.green,
            margin: EdgeInsets.all(5),
          ),

        ],
      )
    );
  }

}