{"id":10344,"date":"2021-08-20T10:00:32","date_gmt":"2021-08-20T01:00:32","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10344"},"modified":"2021-08-19T18:53:38","modified_gmt":"2021-08-19T09:53:38","slug":"flutter-physical-model","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10344","title":{"rendered":"Flutter – Physical Model"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

All of the best app start with a square, squarely in the middle of the screen. But to turn this abstract idea into something more real we need to think outside the box.<\/p>\n\n\n\n

All of the best app start with a square, squarely in the middle of the screen. But to turn this abstract idea into something more real we need to think outside the box.<\/p>\n\n\n\n

If you look at the real physical box the only way you’re able to see it with some light, and that light casts a shadow. What if we want our abstract boxes to have a real shadow? Just like a real box. So that our users have a mental model for what the things in your app are.<\/p>\n\n\n\n

Well, that’s what a Physical Model is for. Just take whatever widget you’re working with, wrap it inside of a Physical Model and give it a color. <\/p>\n\n\n\n

PhysicalModel(\n  child: BlueBox(),\n  color: Colors.black,\n)<\/code><\/pre>\n\n\n\n
Wait! There is no shadow. By default Physical Model’s elevation<\/strong> is zero<\/strong>,  so we need to pick that box up to be able to see the shadow. <\/p>\n\n\n\n
PhysicalModel(\n  child: BlueBox(),\n  color: Colors.black,\n  elevation:  8.0\n)<\/code><\/pre>\n\n\n\n
But unlike the real world we have additional options, for our Physical model’s shadows, like it’s color.<\/p>\n\n\n\n
PhysicalModel(\n  child: BlueBox(),\n  color: Colors.black,\n  shadowColor: Colors.pink,\n  elevation:  8.0,\n)<\/code><\/pre>\n\n\n\n
You can also change the roundness of the shadow’s corners.<\/p>\n\n\n\n
PhysicalModel(\n  child: BlueBox(),\n  color: Colors.black,\n  shadowColor: Colors.pink,\n  elevation:  8.0,\n  borderRadius: \n   BorderRadius: circular(45),\n)<\/code><\/pre>\n\n\n\n
or simply update what shape it takes.<\/p>\n\n\n\n
PhysicalModel(\n  child: BlueBox(),\n  color: Colors.black,\n  shadowColor: Colors.pink,\n  elevation:  8.0,\n  shape: BoxShape.circle,\n)<\/code><\/pre>\n\n\n\n
Physical Model is super useful, when you have ideas for custom shadow effects,  it’s also used under the hood in widgets like Material to build material shadow.<\/p>\n\n\n\n
Let’s create simple Physical model!!\u3000The result screenshoot is at the top. <\/p>\n\n\n\n
    return Scaffold(\n      body: Center(\n        child: PhysicalModel(\n          elevation: 20.0,\n          shadowColor: Colors.red,\n          color: Colors.red,\n          child: Container(\n            width: 200,\n            height: 200,\n            decoration: BoxDecoration(\n              shape: BoxShape.circle,\n              border: Border.all(\n                color: Colors.red,\n                width: 1.0,\n              ),\n            ),\n          ),\n        ),\n      ),\n    );<\/code><\/pre>\n\n\n\n
 Hope you enjoyed this post! <\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>