Widgets continued - Introduction to Flutter

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StackTest(),
    );
  }
}

class StackTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Stack Test",
        ),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.grey,
            width: MediaQuery.of(context).size.width / 1.5,
            height: MediaQuery.of(context).size.height / 1.5,
          ),
          Positioned(
            right: 0,
            bottom: 0,
            child: Container(
              color: Colors.blue,
              width: MediaQuery.of(context).size.width / 2.0,
              height: MediaQuery.of(context).size.height / 2.0,
            ),
          ),
        ],
      ),
    );
  }
}

class RowTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Row Test",
        ),
      ),
      body: Container(
        color: Colors.red,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
              color: Colors.white,
              width: 50,
              height: 50,
            ),
            Container(
              color: Colors.grey,
              width: 50,
              height: 100,
            ),
            Container(
              color: Colors.blue,
              width: 50,
              height: 150,
            ),
          ],
        ),
      ),
    );
  }
}

class ContainerTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container Test"),
      ),
      body: Container(
        margin: EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(
            width: 10,
            color: Colors.blue,
          ),
        ),
        padding: EdgeInsets.all(
          32.0,
        ),
        child: Container(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

class ColumnTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Column Test",
        ),
      ),
      body: Container(
        color: Colors.red,
        child: Column(
          children: [
            Container(
              color: Colors.white,
              height: 50,
            ),
            Container(
              color: Colors.grey,
              height: 50,
            ),
            Container(
              color: Colors.blue,
              height: 50,
            ),
          ],
        ),
      ),
    );
  }
}