Container Examples

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Container Widget: Examples")),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  //Container with child Flutter Logo
  final Widget con1 = Container(
    height: 50,
    width: 50,
    margin: EdgeInsets.all(25.0),
    decoration: FlutterLogoDecoration(),
  );

  //Container with shadow, border, and child
  final Widget con2 = Container(
    height: 150,
    width: 150,
    margin: EdgeInsets.all(5.0),
    decoration: ShapeDecoration(
      color: Colors.white,
      shadows: [BoxShadow(color: Colors.black, blurRadius: 15.0)],
      shape: Border.all(
        color: Colors.red,
        width: 8.0,
      ),
    ),
    child:
        Center(child: const Text('Hello Flutter', textAlign: TextAlign.center)),
  );

  //Rounded rectangle containers with border
  final Widget con3 = Container(
    height: 150,
    width: 150,
    margin: EdgeInsets.all(25.0),
    decoration: BoxDecoration(
      color: Colors.yellow,
      borderRadius: BorderRadius.circular(55.0),
      border: Border.all(
        width: 5.0,
        color: Colors.red,
      ),
    ),
    child:
        Center(child: const Text('Hello Flutter', textAlign: TextAlign.center)),
  );

//Container with alignment property
  final Widget con4 = Container(
    margin: EdgeInsets.all(20.0),
    width: double.infinity,
    height: 300.0,
    color: Colors.red,
    alignment: Alignment.topRight,
    padding: EdgeInsets.all(20.0),
    child: FlutterLogo(
      size: 100.0,
    ),
  );

  //Container with minWidth and maxWidth Box Constraints
  final Widget con5 = Container(
    margin: EdgeInsets.all(20.0),
    constraints: BoxConstraints(maxWidth: 200.0, minWidth: 200.0),
    width: 50.0,
    alignment: Alignment.topCenter,
    child: Image.network('https://picsum.photos/500/400'),
  );

  //Container with List of Box Shadow
  final Widget con6 = Container(
    margin: EdgeInsets.all(25.0),
    height: 100.0,
    width: 100.0,
    decoration: BoxDecoration(color: Colors.white, boxShadow: [
      BoxShadow(color: Colors.red, blurRadius: 12.0),
      BoxShadow(color: Colors.green, blurRadius: 40.0)
    ]),
  );

  //Container with Image and Rounded Border
  final Widget con7 = Container(
    margin: EdgeInsets.all(25.0),
    height: 200.0,
    width: 200.0,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: Colors.white,
        image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage('https://picsum.photos/200/300'))),
  );

  //Circular Container
  final Widget con8 = Container(
    margin: EdgeInsets.all(25.0),
    height: 200.0,
    width: 200.0,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(200.0),
      color: Colors.green,
    ),
    child: Text('Hello'),
  );

  //Container with Horizontal Radius of left and right Radius
  final Widget con9 = Container(
    margin: EdgeInsets.all(25.0),
    height: 200.0,
    width: 200.0,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.horizontal(
          left: Radius.circular(20.0), right: Radius.circular(80.0)),
      color: Colors.green,
    ),
    child: Text('Hello'),
  );

  //Container with Vertical Radius of top and bottom Radius
  final Widget con10 = Container(
    margin: EdgeInsets.all(25.0),
    height: 200.0,
    width: 200.0,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.vertical(
          top: Radius.circular(20.0), bottom: Radius.circular(80.0)),
      color: Colors.green,
    ),
    child: Text('Hello'),
  );

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: ListView(
          children: <Widget>[
            con1,
            con2,
            con3,
            con4,
            con5,
            con6,
            con7,
            con8,
            con9,
            con10,
          ]),
    );
  }
}