Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demonstrates the Row and Column Widgets and their alignment properties.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
State createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Container(color: Colors.yellow, child: _body(row: true)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.min)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.end,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceAround,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.end,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisSize: MainAxisSize.max)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.stretch,
// mainAxisSize: MainAxisSize.min)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.baseline,
// mainAxisSize: MainAxisSize.min)),
// body: Container(
// color: Colors.yellow,
// child: _body(
// row: true,
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.baseline,
// textBaseline: TextBaseline.alphabetic,
// mainAxisSize: MainAxisSize.min)),
),
);
}
Widget _body({
bool row = true,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start,
TextBaseline textBaseline = TextBaseline.ideographic,
MainAxisSize mainAxisSize = MainAxisSize.min,
}) {
if (row) {
return Row(
mainAxisAlignment: mainAxisAlignment,
crossAxisAlignment: crossAxisAlignment,
textBaseline: textBaseline,
mainAxisSize: mainAxisSize,
children: [
Icon(Icons.star, size: 50.0),
Icon(Icons.star, size: 100.0),
Icon(Icons.star, size: 50.0),
Text("A", style: TextStyle(fontSize: 50.0)),
Text("B", style: TextStyle(fontSize: 100.0)),
Text("C", style: TextStyle(fontSize: 50.0)),
],
);
} else {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, size: 50.0),
Icon(Icons.star, size: 100.0),
Icon(Icons.star, size: 50.0),
Text("A", style: TextStyle(fontSize: 50.0)),
Text("B", style: TextStyle(fontSize: 100.0)),
Text("C", style: TextStyle(fontSize: 50.0)),
],
);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment