PhysicalModel Widget in Flutter

Hello friends, I will talk about my new blog on Physical Model Widget In Flutter. We will also implement a demo of the Physical Model Widget, and describes his properties, and how to use them in your flutter applications. So let’s get started.

Table of Contents :

Flutter

Physical Model Widget

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ,Flutter offers great developer tools, with amazing hot reload”

Physical Model Widget:

The Physical Model widget allows us to customize custom shadow effects and colours and sizes. This type of design can be done in many ways. But it can be easily achieved with the help of a physical model.

The default constructor of the Physical Model is given below:

PhysicalModel({
  Key key, 
  BoxShape shape: BoxShape.rectangle, 
  Clip clipBehavior: Clip.none, 
  BorderRadius borderRadius, 
  double elevation: 0.0, @required 
  Color color,
  Color shadowColor: const Color(0xFF000000), 
  Widget child
});

Following Properties of the Physical Model:

1.borderRadius: Using the border-radius properties we give a circular shape around the border corner.

2. color: The color properties use to change the background colour.

3. elevation: We use elevation properties to reduce and increase the elevation of the shadow.

4.shadowColor: We use shadow color properties to change the background color of the shadow.

5. shape: We use shape properties to change its shape. And it can be given the shape of a circle and a rectangle.

Demo Module:

Code Implementation:

Create a new dart file called physical_model_demo.dart inside the libfolder.

In this screen, we have shown two examples of physical models. The first one uses the circle box shape and the second one is the rectangle box shape. Inside it uses the elevation shadows color border-radius and color properties.

Why physical model works like attraction in these effects. Let’s understand it with the help of a reference.

PhysicalModel(
  elevation: 6.0,
  shape: BoxShape.circle,
  shadowColor: Colors.red,
  color: Colors.black,
  borderRadius: BorderRadius.all
    (Radius.circular(10)),
  child: Container(
    height: 120.0,
    width: 120.0,
  ),
),

The physical model widget results can be seen in the given below image.

Code File:

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

class PhysicalModelDemo extends StatefulWidget {
  @override
  _PhysicalModelDemoState createState() => _PhysicalModelDemoState();
}

class _PhysicalModelDemoState extends State<PhysicalModelDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Physical Model Widget'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              children: [
                Text(
                  'Physical Model Widget in circle Box Shape',
                  style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(
                  height: 25,
                ),
                PhysicalModel(
                  elevation: 6.0,
                  shape: BoxShape.circle,
                  shadowColor: Colors.red,
                  color: Colors.black,
                  borderRadius: BorderRadius.all
                    (Radius.circular(10)),
                  child: Container(
                    height: 120.0,
                    width: 120.0,
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Text(
                  'Physical Model Widget in rectangle Box Shape',
                  style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(
                  height: 25,
                ),
                PhysicalModel(
                  elevation: 6.0,
                  shape: BoxShape.rectangle,
                  shadowColor: Colors.red,
                  color: Colors.white,
                  borderRadius: BorderRadius.all
                    (Radius.circular(10)),
                  child: Container(
                    height: 120.0,
                    width: 120.0,
                    color: Colors.blue[50],
                    child: FlutterLogo(
                      size: 60,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In this article, I have explained a PhysicalModel Widget demo, which you can modify and experiment with according to your own, this little introduction was from the PhysicalModel Widget from our side.

I hope this blog will provide you with sufficient information in Trying up the PhysicalModel Widget in your flutter project. We will show you the PhysicalModel Widget is?, and working on it in your flutter applications, So please try it.

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.