Widgets - 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: ContainerTest(),
    );
  }
}

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,
            ),
          ],
        ),
      ),
    );
  }
}

class RowTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Row Test",
        ),
      ),
      body: Container(
        color: Colors.red,
        child: Row(
          children: [
            Container(
              color: Colors.white,
              width: 50,
            ),
            Container(
              color: Colors.grey,
              width: 50,
            ),
            Container(
              color: Colors.blue,
              width: 50,
            ),
          ],
        ),
      ),
    );
  }
}
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,
            ),
            Container(
              color: Colors.blue,
              width: MediaQuery.of(context).size.width/2.0,
              height: MediaQuery.of(context).size.height/2.0,
            ),
          ],
        ),
    );
  }
}