Container In Flutter

Shaping the Container in flutter

4 min readJan 29, 2021

To create your section in your place(in iOS — view)

Hey beginners you may know little about container in flutter(if not, container widget that combines common widgets). Let's see a little more

Inside the container, you can keep any widget you want.

Simple Container:

Widget build(BuildContext context) {
  return Container(
    color: Colors.red,
  );
}

This is a simple example of a container

Container with margin:

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Container(
      margin: EdgeInsets.fromLTRB(0, 100, 0, 0),
      color: Colors.red,
    ),
  );

Margin is like saying the container to set is from here or leave the gap from the top, left, right or from the bottom and set the container (not only for container, for another widget too).

Like this, I just set a margin for the container to leave a distance from top till 100. You can see the distance from the top(white scape)

The container in the container:

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Container(
      color: Colors.red,
      child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(10, 100, 10, 10),
      ),
    ),
  );
}

just a simple one..!

Containers with column:

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Container( //--------- container red
      width: 450,
      color: Colors.red,
      child: Column(
        children: <Widget>[
          Container( //--------- container yellow
            margin: EdgeInsets.fromLTRB(0, 100, 0, 0),
            color: Colors.yellow,
            height: 100,
            width: 100,
          ),
          Container( //--------- container green
            color: Colors.green,
            height: 100,
            width: 100,
          )
        ],
      ),
    ),
  );
}

Containers with row:

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Container( //--------- container red
      width: 450,
      color: Colors.red,
      child: Row(
        children: <Widget>[
          Container( //--------- container yellow
            margin: EdgeInsets.fromLTRB(0, 100, 0, 0),
            color: Colors.yellow,
            height: 100,
            width: 100,
          ),
          Container( //--------- container green
             margin: EdgeInsets.fromLTRB(0, 100, 0, 0),
            color: Colors.green,
            height: 100,
            width: 100,
          )
        ],
      ),
    ),
  );
}

(because of the row container displayed left to right)

Okay, now your mind should ask why white after red. That because of not setting the height in the top container and if have you not set it for another container, it will take any other container height (same for width)

Other than this we can add some container property and make the container more attractive

Come let me show it

Container design

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Column(
      children: <Widget>[
        Container(
          height: 200,
            decoration: BoxDecoration(
              color: Colors.red,
                boxShadow: [
                  BoxShadow(color: Colors.grey, spreadRadius: 3)
                ],
              borderRadius: BorderRadius.vertical(
                  bottom: Radius.elliptical(
                      MediaQuery.of(context).size.width, 100.0)),
          ),
        ),
      ],
    ),
  );
}

So used borderShaow for shadow

boxShadow: [
      BoxShadow(color: Colors.grey, spreadRadius: 3)
],

And used borderRadius for that curved

borderRadius: BorderRadius.vertical(
                  bottom: Radius.elliptical(
                      MediaQuery.of(context).size.width, 100.0)),

border-radius have many different types

borderRadius: BorderRadius.all(Radius.circular(20))

for all side circular

borderRadius: BorderRadius.only(bottomLeft: Radius.circular(59))

only for the mentioned side

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Column(
      children: <Widget>[
        Container(
          height: 200,
            decoration: BoxDecoration(
              color: Colors.red,
                boxShadow: [
                  BoxShadow(color: Colors.black, spreadRadius: 3)
                ],
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(59))
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          height: MediaQuery.of(context).size.height - 220,
          decoration: BoxDecoration(
            color: Colors.green,
            boxShadow: [
              BoxShadow(color: Colors.black, spreadRadius: 3)
            ],
            borderRadius: BorderRadius.only(topRight: Radius.circular(59))
          ),
        )
      ],
    ),
  );
}