Flutter – Physical Model

All of the best app start with a square, squarely in the middle of the screen. But to turn this abstract idea into something more real we need to think outside the box.

All of the best app start with a square, squarely in the middle of the screen. But to turn this abstract idea into something more real we need to think outside the box.

If you look at the real physical box the only way you’re able to see it with some light, and that light casts a shadow. What if we want our abstract boxes to have a real shadow? Just like a real box. So that our users have a mental model for what the things in your app are.

Well, that’s what a Physical Model is for. Just take whatever widget you’re working with, wrap it inside of a Physical Model and give it a color.

PhysicalModel(
  child: BlueBox(),
  color: Colors.black,
)

Wait! There is no shadow. By default Physical Model’s elevation is zero, so we need to pick that box up to be able to see the shadow.

PhysicalModel(
  child: BlueBox(),
  color: Colors.black,
  elevation:  8.0
)

But unlike the real world we have additional options, for our Physical model’s shadows, like it’s color.

PhysicalModel(
  child: BlueBox(),
  color: Colors.black,
  shadowColor: Colors.pink,
  elevation:  8.0,
)

You can also change the roundness of the shadow’s corners.

PhysicalModel(
  child: BlueBox(),
  color: Colors.black,
  shadowColor: Colors.pink,
  elevation:  8.0,
  borderRadius: 
   BorderRadius: circular(45),
)

or simply update what shape it takes.

PhysicalModel(
  child: BlueBox(),
  color: Colors.black,
  shadowColor: Colors.pink,
  elevation:  8.0,
  shape: BoxShape.circle,
)

Physical Model is super useful, when you have ideas for custom shadow effects, it’s also used under the hood in widgets like Material to build material shadow.

Let’s create simple Physical model!!　The result screenshoot is at the top.

    return Scaffold(
      body: Center(
        child: PhysicalModel(
          elevation: 20.0,
          shadowColor: Colors.red,
          color: Colors.red,
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.red,
                width: 1.0,
              ),
            ),
          ),
        ),
      ),
    );

Hope you enjoyed this post!

By Ami