A simple example of how to nice decorate the container.

Reading time: < 1 minute

What is great about Flutter is that it allows creating beautiful widgets without using any additional image files. Widget below will make you’re container look nice and different from simple coloring them:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class DecoratedContainer extends StatelessWidget {
  final width;
  final height;

  const DecoratedContainer(this.width, this.height);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      width: width,
      decoration: BoxDecoration(
        color: Colors.pink.withAlpha(220),
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Stack(
        children: <Widget>[
          Positioned(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10.0),
                bottomLeft: Radius.circular(10.0),
                bottomRight: Radius.elliptical(90.0, height * 0.5),
              ),
              child: Container(
                width: width * .8,
                decoration: BoxDecoration(color: Colors.pink),
              ),
            ),
          ),
          Center(
            child: Text("TITLE", style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white)),
          ),
        ],
      ),
    );
  }
}

As you can see we use 2 layers with different coloring and shapes.

Using widget in example page:

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueAccent,
        body: Center(
          child: DecoratedContainer(320.0, 110.0),
        ));
  }
}

It will look this way: