Flutter Container with challenges

Table of Contents

Challenges

Examples and theory

  • Definition
  • Basic use of a Container widget
  • Giving a width and a height and aligning its child
  • Center and Align widgets
    • Center widget
    • Align widget using a predefined value
    • Align widget using width and height factors
  • Decoration
    • Rounded corners
    • Rounded corners: Stadium shape
    • Rounded corners (only some of them)
    • Circular shape
    • Border
    • Shadow
    • Two-color Linear Gradient
    • Basic 2-color-linear-gradient with stops
  • Composing containers
    • The child widget has a height and width
    • The child widget has height but NO width
    • The child widget has NO height and NO width
    • The child widget has NO width but has constraints (margin)

CHALLENGES

The challenge

You do not need to:

  • use the same color or the same font size as I have used

You should:

  • align the design to topCenter of the screen
  • set a top-margin to separate it from the AppBar
  • align the text ‘H’ to the center of the parent container
  • use only instances of Align, Container, and Text widgets, and their properties

My solution

Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.orange,
width: 10,
),
),
width: 280,
height: 280,
alignment: Alignment.center,
child: Text(
'H',
style: TextStyle(
fontSize: 180,
color: Colors.orange,
),
),
),
)

The challenge

You do not need to:

  • use the same background color or the same font size, or the same border-radius as I have used

You should:

  • use only instances of Container and Text widgets and their properties

My solution

Container(
height: 130,
width: double.infinity,
decoration: BoxDecoration(
color: Color(0xFF57B3FC),
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
boxShadow: [
BoxShadow
(
color: Color(0xAA6EB1E6),
offset: Offset(9, 9),
blurRadius: 6,
),
],
),
alignment: Alignment.center,
child: Text(
'I am a header',
style: TextStyle(
fontSize: 38,
color: Colors.white,
),
),
)

The challenge

You do not need to:

  • use the same colors or the same size or the same border-radius as I have used

You should:

  • use only instances of Container widget and its properties

My solution

Container(
margin: EdgeInsets.all(40),
width: 300,
height: 90,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Color(0xFF4AAEFD), //blue
borderRadius: BorderRadius.circular(45),
),
child: Container(
width: 210,
height: 90,
decoration: BoxDecoration(
color: Color(0xFF94CCF9), //light blue
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45),
bottomLeft: Radius.circular(45),
),
),
alignment: Alignment.center,
child: Text(
'Challenge',
style: TextStyle(
fontSize: 32,
color: Colors.white,
),
),
),
)

The challenge

You do not need to:

  • use the same colors or the same size or the same border-radius as I have used

You should:

  • use only instances of Container and Text widgets and their properties
  • align the orange container to the top-center of the screen
  • do the orange container as wider as possible by leaving a margin around it

Please, pay attention:

  • The orange container has a fine left-bottom-oriented shadow.

My solution

class Challenge extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Color(0xFF272A3C),
width: double.infinity,
height: double.infinity,
alignment: Alignment.topCenter, //to align its child
child: CardContainer(),
);
}
}
class CardContainer extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(30),
height: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: new LinearGradient(
colors: [
Color(0xFFFF422C),
Color(0xFFFF9003),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
stops: [0.25, 0.90],
),
boxShadow: [
BoxShadow(
color: Color(0xFF101012),
offset: Offset(-12, 12),
blurRadius: 8,
),
],
),
alignment: Alignment.centerLeft, //to align its child
padding: EdgeInsets.all(20),
child: Text(
'Challenge',
style: TextStyle(
fontSize: 46,
color: Colors.white,
fontWeight: FontWeight.w200,
fontStyle: FontStyle.italic,
),
),
);
}
}

EXAMPLES AND THEORY

Definition

Basic use of a Container

Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFF04589A),
),
)
Container(
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFF04589A),
),
),
)
Container(
color: Color(0xFF94CCF9),
child: Text(
'I am a text',
style: TextStyle(fontSize: 38, color: Color(0xFF04589A)),
),
)
Container(
color: Color(0xFF94CCF9),
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.only(left: 40, top: 40),
child: Text(
'I am a text',
style: TextStyle(fontSize: 38, color: Color(0xFF04589A)),
),
)

Giving a width and a height, and aligning its child

A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin.

Container(
color: Color(0xFF94CCF9),
padding: const EdgeInsets.all(15),
margin: const EdgeInsets.only(left: 40, top: 40),
width: 250,
height: 250,
child: Text(
'Text',
style: TextStyle(fontSize: 32, color: Color(0xFF04589A)),
),
)
Container(
color: Color(0xFF94CCF9),
padding: const EdgeInsets.all(15),
margin: const EdgeInsets.only(left: 40, top: 40),
width: 250,
height: 250,
alignment: Alignment.bottomRight,
child: Text(
'Text',
style: TextStyle(fontSize: 32, color: Color(0xFF04589A)),
),
)

Center and Align widgets

Center widget

Center(
child: Container(
color: Color(0xFF94CCF9),
padding: const EdgeInsets.all(15),
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFF04589A),
),
),
),
)

Align widget using a predefined value

  • topLeft
  • topCenter
  • topRight
  • centerLeft
  • center
  • centerRight
  • bottomLeft
  • bottomCenter
  • bottomRight
Align(
alignment: Alignment.bottomLeft, //Alignment(-1.0, 1.0)
child: Container(
....
),
)

Align widget using width and height factors

Align(
alignment: Alignment(-0.5, 0.75),
child: Container(
....
),
)

Decoration

  • BoxDecoration
  • FlutterLogoDecoration
  • ShapeDecoration
  • UnderlineTabIndicator

BoxDecoration is an immutable description of how to paint a box and provides a variety of ways to draw a box.

Rounded corners

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFF9DF09E),
borderRadius: BorderRadius.circular(20),
),
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFF1F9221),
),
),
)

Rounded corners: Stadium shape

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFFF8DAA0),
borderRadius: BorderRadius.circular(500),
),
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFFEC9B02),
),
),
)

Rounded corners (only some of them)

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0)
,
),
),
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Colors.white,
),
),
)

Circular shape

Container(
margin: EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.purpleAccent,
shape: BoxShape.circle,
),
width: 150,
height: 150,
)

Border

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFF94CCF9),
border: Border.all(
color: Color(0xFF04589A),
width: 4,
),
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFF04589A),
),
),
)

Shadow

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFF94CCF9),
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Color(0xFF04589A),
offset: Offset(7, 7),
blurRadius: 6,
),
],
),
child: Text(
'I am a text',
style: TextStyle(
fontSize: 38,
color: Color(0xFF04589A),
),
),
)

Two-color Linear Gradient

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFF94CCF9),
border: Border.all(
color: Color(0xFF04589A),
width: 4,
),
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [Colors.white, Color(0xFF75C0FC)],
begin: Alignment.centerLeft,
end: Alignment.centerRight),
),
child: Text(
'I am a text',
style: TextStyle(fontSize: 38, color: Color(0xFF04589A)),
),
)

Two-color Linear Gradient with stops

Gradient stops are alist of values from 0.0 to 1.0 that denote fractions along the gradient.

Container(
margin: EdgeInsets.all(40),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFF94CCF9),
border: Border.all(
color: Color(0xFF04589A),
width: 4,
),
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [Colors.white, Color(0xFF75C0FC)],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
stops: [0.4, 1.0],
),
),
child: Text(
'I am a text',
style: TextStyle(fontSize: 38, color: Color(0xFF04589A)),
),
)
Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [
Color(0xFFFBA3660),
Color(0xFF1C256E),
],
stops: [0.3, 0.75],
),
),
),
)

Composing Containers

The child widget has a height and width

Container(
margin: const EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(10.0),
),
width: 250,
height: 250,
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.circular(10.0),
),
height: 100,
width: 150,
),
)

The child widget has height but NO width

Container(
margin: const EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(10.0),
),
width: 250,
height: 250,
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.circular(10.0),
),
height: 100,
),
)

If the Container widget has no child, no height, no width, no constraints, and no alignment, but the parent provides bounded constraints, then Container expands to fit the constraints provided by the parent.

  • The cyan widget has no child and has no width, and the parent, the purple container, provides bounded constraints. Our child cyan container fills the parent’s horizontal dimension because it has no width.

The child widget has NO height and NO width

Container(
margin: const EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(10.0),
),
width: 250,
height: 250,
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.circular(10.0),
),
),
)

Child widget has NO width but has constraints (margin)

Container(
margin: const EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.purple,
borderRadius: BorderRadius.circular(20.0),
),
width: 250,
height: 250,
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.circular(20.0),
),
height: 100,
),
)
If you have found this article enjoyable or it has helped you in some way, give me many 👏.Thanks for reading me!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store