Skip to main content

Command Palette

Search for a command to run...

PhysicalModel Widget and Attributes

Updated
2 min read
PhysicalModel Widget and Attributes
V

"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation.

In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology.

Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities.

In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"

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.

Learn Flutter

Part 1 of 50

Explore Flutter's magic in crafting cross-platform apps effortlessly. Join the adventure!

More from this blog

Vinit Mepani (Flutter Developer)

270 posts

"Vinit Mepani, passionate coder! Dive into my Dart and Flutter journey on the blog. Let's master these tech wonders together. Happy coding! 🚀"