View video tutorial

FLUTTER Column widget

FLUTTER

This tutorial will show how to use Column widget in Flutter.

Example
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Title"),
      ),
      body: Column(
        //mainAxisAlignment: MainAxisAlignment.start,
        //mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            height: 100,
            padding: EdgeInsets.all(5),
            margin: EdgeInsets.all(5),
            //alignment: Alignment.bottomRight,
            transform: Matrix4.rotationZ(0.0),
            //constraints: BoxConstraints.expand(height: 120.0, width: 500.0),
            decoration: BoxDecoration(
              //border: Border.all(color: Colors.black, width: 3),
              borderRadius: BorderRadius.circular(8),
              color: Colors.pink,
            ),
            child: Center(
              child: Text(
                "Element1",
                style: TextStyle(
                    //color: Colors.black,
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                    decoration: TextDecoration.underline,
                    decorationColor: Colors.red,
                    decorationStyle: TextDecorationStyle.wavy,
                    color: Colors.white),
              ),
            ),
          ),
          Container(
            height: 100,
            padding: EdgeInsets.all(5),
            margin: EdgeInsets.all(5),
            //alignment: Alignment.bottomRight,
            transform: Matrix4.rotationZ(0.0),
            //constraints: BoxConstraints.expand(height: 120.0, width: 500.0),
            decoration: BoxDecoration(
              //border: Border.all(color: Colors.black, width: 3),
              borderRadius: BorderRadius.circular(8),
              color: Colors.pink,
            ),
            child: Center(
              child: Text(
                "Element2",
                style: TextStyle(
                    //color: Colors.black,
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                    decoration: TextDecoration.underline,
                    decorationColor: Colors.red,
                    decorationStyle: TextDecorationStyle.wavy,
                    color: Colors.white),
              ),
            ),
          ),
          Container(
            height: 100,
            padding: EdgeInsets.all(5),
            margin: EdgeInsets.all(5),
            //alignment: Alignment.bottomRight,
            transform: Matrix4.rotationZ(0.0),
            //constraints: BoxConstraints.expand(height: 120.0, width: 500.0),
            decoration: BoxDecoration(
              //border: Border.all(color: Colors.black, width: 3),
              borderRadius: BorderRadius.circular(8),
              color: Colors.pink,
            ),
            child: Center(
              child: Text(
                "Element3",
                style: TextStyle(
                    //color: Colors.black,
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic,
                    decoration: TextDecoration.underline,
                    decorationColor: Colors.red,
                    decorationStyle: TextDecorationStyle.wavy,
                    color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

flutter scaffold

Output should look like this.


Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.

For documentation: visit dart documentation. visit flutter documentation.

Try Dart and Flutter Here or Here