Flutter / Examples / Row Column Example
Row Column Example
-
Usage
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( appBar: AppBar( centerTitle: true, title: Text('I\'m an App'), backgroundColor: Colors.red[600], ), body: App(), ), ), ); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } } Change StatelessWidget
class App extends StatelessWidget { @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ // Row 1 Row( children: [ Container( color: Colors.blue, height: 40, width: 40, child: Text('1')), Container( color: Colors.blue, height: 40, width: 40, child: Text('2')), Container( color: Colors.blue, height: 40, width: 40, child: Text('3')), ], ), // Row 2 Row( children: [ Container( color: Colors.blue, height: 40, width: 40, child: Text('1')), //Will expand to fill all remaining space Expanded( child: Container( color: Colors.green, height: 40, width: 40, child: Text('2'))), Container( color: Colors.blue, height: 40, width: 40, child: Text('3')), ], ), //Row 3 Container( height: 100, child: Row( //Stretches to vertically fill its parent container crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Container( color: Colors.blue, height: 40, width: 40, child: Text('1')), Expanded( child: Container( color: Colors.green, height: 40, width: 40, child: Text('2'))), Container( color: Colors.blue, height: 40, width: 40, child: Text('3')), ], )), // Row 4 Row( //Creates even space between each item and their parent container mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Container( color: Colors.blue, height: 40, width: 40, child: Text('1')), Container( color: Colors.blue, height: 40, width: 40, child: Text('1')), Container( color: Colors.blue, height: 40, width: 40, child: Text('3')), ], ) ]); } }