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,
),
),
),
),
),
);
}
}

Android Developer | Flutter Developer | Technical Blogger at medium | community member at stackoverflow | Organizer @FlutterIndore on Twitter

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