Flutter base layout Column Widget

The Column Widget is similar to the LinearLayout control in Andorid, vertically oriented.

Column Widget

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

class ColumnExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    returnColumnExampleState(); }}class ColumnExampleState extends State<ColumnExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Column Widget"),
        primary: true,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            child: Text("A"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.amber,
          ),
          Container(
            child: Text("B"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.blueAccent,
          ),
          Container(
            child: Text("C"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.cyanAccent,
          ),
          Container(
            child: Text("D"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.deepOrange,
          ),
          Container(
            child: Text("E"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.lightBlue,
          ),
          Container(
            child: Text("F"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.indigo,
          ),
          Container(
            child: Text("G"),
            height: 50,
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
          ),
          Container(
            child: Text("H"),
            height: 50, width: MediaQuery.of(context).size.width, color: Colors.lightGreen, ) ], ), ); }}Copy the code