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:
