新拟态是一种利用阴影来创建浮雕效果的 UI 元素。它通过假设容器的两条对边相对于光源的位置不同——一边面向光源，另一边背向光源——从而在容器的另一侧产生阴影。这种设计赋予了我们的小部件一种优雅且整洁的外观。因此，为了创建一个新拟态设计，我们将首先在 Flutter 中创建一个无状态小部件，并将其命名为 NeumorphicDesign。
在本文中，我们将探讨一种有趣的 UI 元素，称为 新拟态。我们将学习如何将 Flutter 中基本的 容器 修改为新拟态容器，以便在我们的应用中使用。此外，我们将使用 Flutter 容器 来实现新拟态，并使用 VS Code 来构建 Flutter 应用程序。
Dart
CODEBLOCK_66d40eab
首先，让我们给应用设置一个背景颜色。由于我们只创建了一个容器，且容器本身不包含任何内容，运行应用时我们将只看到一个空白屏幕。所以，让我们给容器指定一些高度和宽度。另外，通过使用 Center 包裹容器，我们可以使其位于应用的中心位置。
Dart
CODEBLOCK_8b14aa1c
要更改容器的颜色或为其分配圆角，我们需要使用 BoxDecoration。
BoxDecoration 类的构造函数：
Dart
CODEBLOCK_d0df536c
我们将利用 borderRadius 和 boxShadow 来定制我们的容器。
Dart
CODEBLOCK_1b7dbf2e
现在，要制作一个新拟态小部件，首先小部件的颜色应与背景颜色相同。小部件与背景的分离感是通过 INLINECODE6179e500 的 INLINECODEff5cb433 参数创建的。为了创建这种设计，让我们假设应用左上角是光源。当光线照射到我们的容器上时，左上角将直接面向光源，而右下角将背向光源。这意味着我们必须为左上角选择浅色调阴影，而为右下角选择背景色的深色调阴影。基于这个逻辑，我们将为容器添加阴影。在 blurRadius 的帮助下，我们可以控制阴影的模糊程度。
Dart
CODEBLOCK_915f2a0a
> 注意： 这里的 Offset(+ve, +ve) 表示右下角方向，而 Offset(-ve, -ve) 表示左上角方向，用于定位阴影。
完整代码：
Dart
import ‘package:flutter/material.dart‘;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: const NeumorphicDesign(),
);
}
}
class NeumorphicDesign extends StatelessWidget {
const NeumorphicDesign({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 200,
width: 200,
padding: EdgeInsets.all(8)