Six Flutter Layout Practice Exercise

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // function Component(){
  //return ( this is like the build method)
  //}
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.amberAccent,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Layout Practice'),
        ),
        body: One(),
        // Replace One() with the other classes for the other layouts
      ),
    );
  }
}

class One extends StatelessWidget {
  One({super.key});

  final TextStyle big = TextStyle(color: Colors.black87, fontSize: 24);

  @override
  Widget build(BuildContext context) {
    return Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
      Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
        Container(
            height: 100,
            width: 100,
            color: Colors.red.shade200,
            alignment: Alignment.center,
            child: Text('A', style: big)),
        Container(
            height: 100,
            width: 100,
            color: Colors.blue.shade200,
            alignment: Alignment.center,
            child: Text('B', style: big))
      ]),
      Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
        Container(
            height: 100,
            width: 100,
            color: Colors.green.shade200,
            alignment: Alignment.center,
            child: Text('C', style: big)),
        Container(
            height: 100,
            width: 100,
            color: Colors.amber.shade200,
            alignment: Alignment.center,
            child: Text('D', style: big))
      ]),
    ]);
  }
}

class Two extends StatelessWidget {
  Two({super.key});

  final TextStyle big = TextStyle(color: Colors.black87, fontSize: 24);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 0,
          ),
          child: Container(
            width: double.infinity,
            height: 100,
            color: Colors.red.shade200,
            alignment: Alignment.center,
            child: Text('A', style: big),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.blue.shade200,
              alignment: Alignment.center,
              child: Text('B', style: big),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green.shade200,
              alignment: Alignment.center,
              child: Text('C', style: big),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.amber.shade200,
              alignment: Alignment.center,
              child: Text('D', style: big),
            ),
          ],
        ),
        Padding(
          padding: EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 0,
          ),
          child: Container(
            width: double.infinity,
            height: 100,
            color: Colors.purple.shade200,
            alignment: Alignment.center,
            child: Text('E', style: big),
          ),
        ),
      ],
    );
  }
}

class Three extends StatelessWidget {
  Three({super.key});

  final TextStyle big = TextStyle(color: Colors.black87, fontSize: 24);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
              height: 100,
              width: 100,
              color: Colors.red.shade200,
              alignment: Alignment.center,
              child: Text('A', style: big)),
          Container(
              height: 100,
              width: 100,
              color: Colors.blue.shade200,
              alignment: Alignment.center,
              child: Text('B', style: big))
        ],
      ),
    );
  }
}

class Four extends StatelessWidget {
  Four({super.key});

  final TextStyle big = TextStyle(color: Colors.black87, fontSize: 24);

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Expanded(
        child: Container(
          color: Colors.red.shade200,
          alignment: Alignment.center,
          child: Text(
            'A',
            style: big,
          ),
        ),
      ),
      Expanded(
        child: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.blue.shade200,
                alignment: Alignment.center,
                child: Text(
                  'B',
                  style: big,
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green.shade200,
                alignment: Alignment.center,
                child: Text(
                  'C',
                  style: big,
                ),
              ),
            ),
          ],
        ),
      ),
    ]);
  }
}

class Five extends StatelessWidget {
  Five({super.key});

  final TextStyle big = TextStyle(color: Colors.black87, fontSize: 24);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red.shade200,
            alignment: Alignment.center,
            child: Text('A', style: big),
          ),
        ),
        Expanded(
          flex: 1,
          child: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  color: Colors.blue.shade200,
                  alignment: Alignment.center,
                  child: Text('B', style: big),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.green.shade200,
                  alignment: Alignment.center,
                  child: Text('C', style: big),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.amber.shade200,
                  alignment: Alignment.center,
                  child: Text('D', style: big),
                ),
              ),
            ],
          ),
        ),
        Flexible(
          child: Center(
            child: Container(
              color: Colors.purple.shade200,
              width: 300,
              height: 100,
              alignment: Alignment.center,
              child: Text('E'),
            ),
          ),
        ),
      ],
    );
  }
}

class Six extends StatelessWidget {
  Six({super.key});

  final TextStyle big = TextStyle(color: Colors.black87, fontSize: 24);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Align(
          alignment: Alignment.centerLeft,
          child: Container(
            color: Colors.red.shade200,
            height: 100,
            width: 100,
            alignment: Alignment.center,
            child: Text('A', style: big),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
            color: Colors.blue.shade200,
            height: 100,
            width: 100,
            alignment: Alignment.center,
            child: Text('B', style: big),
          ),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Container(
            color: Colors.green.shade200,
            height: 100,
            width: 100,
            alignment: Alignment.center,
            child: Text('C', style: big),
          ),
        ),
      ],
    );
  }
}

class Seven extends StatelessWidget {
  Seven({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.network('https://picsum.photos/id/237/900/200'),
        //gets scaled to fit the width of the screen
        UnconstrainedBox(
          child: Image.network('https://picsum.photos/id/237/900/200'),
          //exceeds the width of the column AND screen. Overflow warning
        ),
        ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: 100,
          ),
          child: FittedBox(
            //FittedBox will expand to fill the minHeight constraint
            //and scale the text to fit
            child: Text('FittedBox'),
          ),
        ),
        ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: 100,
          ),
          child: FittedBox(
            //FittedBox will expand to fill the minHeight constraint
            //It will be also constrained by the width of the screen
            //and scale the text to fit either up or down
            child: Text(
                'This is a whole bunch of text inside the FittedBox, which is inside of a ConstrainedBox'),
          ),
        ),
      ],
    );
  }
}