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