PhysicalModel Widget and Attributes

PhysicalModel Widget and Attributes

ยท

2 min read

The PhysicalModel widget in Flutter is used to create a physical model representation of a material object. It can simulate effects like elevation, shape, and surface properties, such as shadows and clipping. This widget is particularly useful when you want to add a realistic, material-like appearance to your UI components.

Here are the main attributes of the PhysicalModel widget:

  1. child:

    • Type: Widget

    • Required: Yes

    • The child attribute is mandatory and represents the widget that you want to apply the physical model effects to.

  2. shape:

    • Type: BoxShape

    • Default Value: BoxShape.rectangle

    • Specifies the shape of the physical model. It can be either BoxShape.rectangle or BoxShape.circle.

  3. elevation:

    • Type: double

    • Default Value: 0.0

    • The elevation attribute defines the z-coordinate at which the physical model is placed. It determines the shadow and lighting effects, providing a sense of depth.

  4. color:

    • Type: Color

    • Default Value: Colors.transparent

    • Sets the base color of the physical model.

  5. shadowColor:

    • Type: Color

    • Default Value: Colors.black

    • Specifies the color of the shadow cast by the physical model.

Example of PhysicalModel Widget:

Let's consider an example to demonstrate the usage of the PhysicalModel widget. In this example, we'll create a raised button with a physical model effect.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PhysicalModel Example'),
        ),
        body: Center(
          child: PhysicalModel(
            color: Colors.blue,
            elevation: 6.0,
            shape: BoxShape.rectangle,
            shadowColor: Colors.black,
            child: Container(
              width: 150,
              height: 50,
              child: Center(
                child: Text(
                  'Raised Button',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example:

  • The PhysicalModel widget wraps a Container containing a text label for the button.

  • The color attribute sets the base color of the physical model.

  • The elevation attribute provides a raised appearance by specifying the z-coordinate of the model.

  • The shape attribute is set to BoxShape.rectangle, indicating that the physical model should have a rectangular shape.

  • The shadowColor attribute determines the color of the shadow cast by the physical model.

Did you find this article valuable?

Support Vinit Mepani by becoming a sponsor. Any amount is appreciated!

ย