Flutter自定义容器插件clay_containers的使用

Clay Containers 是一个用于实现美观、现代的拟态设计（Neumorphic Design）的Flutter插件。这些粘土容器可以成为您自己独特拟态设计的基础。

安装

要将 clay_containers 添加到您的项目中，只需将其作为依赖项添加到 pubspec.yaml 文件中即可。这是一个简单的Dart插件，因此不需要额外配置iOS和Android。

dependencies:
  clay_containers: ^最新版本号

示例代码

简单的 ClayContainer

为了获得最佳效果，请确保周围小部件的背景颜色与您为粘土容器设置的颜色相匹配。在下面的例子中，我们将颜色设置为 baseColor。

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

class MyExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Color baseColor = const Color(0xFFF2F2F2);

    return Container(
      color: baseColor,
      child: Center(
        child: ClayContainer(
          color: baseColor,
          height: 200,
          width: 200,
        ),
      ),
    );
  }
}

带有 ClayText 子组件的 ClayContainer

在这个例子中，我们给 ClayContainer 添加了一个带有内边距的 ClayText。

ClayContainer(
  color: baseColor,
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: ClayText("Seize the Clay!", emboss: true, size: 40),
  ),
)

圆角 ClayContainer

通过设置 borderRadius 或 customBorderRadius 可以创建圆角或自定义形状的 ClayContainer。

// 圆形 ClayContainer
ClayContainer(
  color: baseColor,
  height: 150,
  width: 150,
  borderRadius: 75,
)

// 自定义形状 ClayContainer
ClayContainer(
  color: baseColor,
  height: 150,
  width: 150,
  customBorderRadius: BorderRadius.only(
    topRight: Radius.elliptical(150, 150),
    bottomLeft: Radius.circular(50),
  ),
)

凹凸效果 ClayContainer

可以通过设置 emboss 属性来创建凹凸效果，默认是凹陷效果。

ClayContainer(
  emboss: true,
  color: baseColor,
  height: 150,
  width: 150,
  borderRadius: 75,
)

更改默认的扩散和深度

可以通过修改 depth 和 spread 参数来自定义 Neumorphic 效果。

ClayContainer(
  color: baseColor,
  height: 150,
  width: 150,
  borderRadius: 75,
  depth: 40,
  spread: 40,
)

Concave 和 Convex 效果

通过传递 CurveType.concave 或 CurveType.convex 来创建凹面或凸面效果。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ClayContainer(
      color: baseColor,
      height: 150,
      width: 150,
      borderRadius: 75,
      curveType: CurveType.concave,
    ),
    SizedBox(width: 50),
    ClayContainer(
      color: baseColor,
      height: 150,
      width: 150,
      borderRadius: 75,
      curveType: CurveType.none,
    ),
    SizedBox(width: 50),
    ClayContainer(
      color: baseColor,
      height: 150,
      width: 150,
      borderRadius: 75,
      curveType: CurveType.convex,
    ),
  ],
)

动画效果

使用 ClayAnimatedContainer 创建动画效果，类似于 AnimatedContainer。

ClayAnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  height: 200,
  width: 200,
  color: baseColor,
  borderRadius: 50,
  depth: 30,
)

主题化

通过 ClayTheme 和 ClayThemeData 在整个应用中统一设置 ClayContainer 的样式。

ClayTheme(
  themeData: const ClayThemeData(
    height: 10,
    width: 20,
    borderRadius: 360,
    textTheme: ClayTextTheme(style: TextStyle()),
    depth: 12,
  ),
  child: ColoredBox(
    color: baseColor,
    child: Center(
      child: ClayContainer(
        color: baseColor,
        height: 240,
        width: 240,
        curveType: CurveType.concave,
        spread: 30,
        depth: 50,
      ),
    ),
  ),
)

以上就是关于 clay_containers 插件的基本用法和一些示例代码。希望对您有所帮助！