PhysicalModel Widget In Flutter

A widget that provides customized shadow or elevation.

At this time, all our applications try to show out as real items as per design, smoothness, and user-friendly experience.

Major things that we all are focused on design, because we all know and believe this phrase “What you see is on sale”.

So,
Let’s come to the main point, we all are trying to deliver real design in our website or application, that user will interact and fill this product look real.
For this, we use many things like item elevation, animation shadow effects, etc.
In flutter, there are various ways to achieve a look like this design, and we are discussing one of the widgets that, helps a lot, this widget is PhysicalModel Widget.

The main thing that we achieve by using PhysicalModel is,

1. Customize Elevation
2. Customize Shadow
3. Customize opacity

We all know there are various ways to take Elevation and shadow in any widget, but the main problem is those options are not provides so many customizations in this effect.
Let’s see why PhysicalModel works like charm in these effects.

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

Following Properties, they provide customizations in your widget,

1.borderRadius property

2. clipBehavior property

3. color property

4. elevation property

5. shadowColor property

6. shape property

full code is here,

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhysicalModel(
          elevation: 20.0,
          shadowColor: Colors.red,
          color: Colors.red,
          child: new Container(
            width: 200,
            height: 200,
            decoration: new BoxDecoration(
              shape: BoxShape.rectangle,
              border: new Border.all(
                color: Colors.red,
                width: 1.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

If you got something wrong? Mention it in the comments. I would love to improve. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.

I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.

Have a nice day!🙂

Shirsh Shukla is All about flutter 💙💙💙💙