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),
),
),
),
],
),
);
}
}
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