Flutter layout codelab, where you learn how to build a Flutter UI without downloading and installing Flutter or Dart! Row, Column, SizedBox, Spacer

30_days_of_flutter_codelab_basic_layout_concepts_2.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Tutorial',
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(color: Colors.cyan),
          child: MyWidget(),
        ),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //mainAxisSize: MainAxisSize.max,
      //mainAxisAlignment: MainAxisAlignment.spaceAround,
      //crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        //BlueBox(),
        //BiggerBlueBox(),
        BlueBox(),
        Spacer(
          flex: 1,
        ),
        SizedBox(
          child: BlueBox(),
          width: 100,
          height: 100,
        ),
        //SizedBox(
        //  width: 100,
        //),
        Spacer(
          flex: 1,
        ),
        BlueBox(),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

class BiggerBlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}