[flutter] table example

gistfile1.txt

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: [
      TableRow(children: [
        BigBox(),
        MiddleBox(),
        SmallBox(),
        NonSizedBox(),
      ]),
      TableRow(children: [
        Center(child: BigBox()),
        Center(child: MiddleBox()),
        Center(child: SmallBox()),
        Center(child: NonSizedBox()),
      ]),
      TableRow(children: [
        Align(alignment: Alignment.bottomLeft, child: BigBox()),
        Align(alignment: Alignment.bottomCenter, child: MiddleBox()),
        Align(alignment: Alignment.bottomCenter, child: SmallBox()),
        Align(alignment: Alignment.bottomRight, child: NonSizedBox()),
      ]),

    ]);
  }
}


class BigBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(width: 100.0, height: 100.0, color: Colors.red);
  }
}

class MiddleBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(width: 75.0, height: 75.0, color: Colors.green);
  }
}

class SmallBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(width: 50.0, height: 50.0, color: Colors.blue);
  }
}

class NonSizedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.yellow);
  }
}