Clay Containers
轻松创建和自定义精美、现代的拟态容器，用于你的 Flutter 项目。这些粘土容器可以成为你独特拟态设计的基石。
安装
将 clay_containers 添加到你的项目中，作为 pubspec.yaml 文件中的依赖项。这是一个简单的 Dart 插件，因此无需为 iOS 和 Android 进行额外的配置。
示例
简单的 ClayContainer
为了获得最佳效果，请将背景
周围小部件的颜色设置为与
你的粘土
容器的颜色相匹配。由于你可能会多次重复使用这个基础颜色
（尤其是如果你打算做一些花哨的事情）
，因此最好将此颜色设置为单个值。在以下示例中，它
被设置为 baseColor。
import 'package:clay_containers/clay_containers.dart';
class MyExampleScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
Color baseColor = Color(0xFFF2F2F2);
return Container(
color: baseColor,
child: Center(
child: ClayContainer(
color: baseColor,
height: 200,
width: 200,
),
),
);
}
}
带有 ClayText 子小部件的 ClayContainer。
在前面的示例中，ClayContainer 被赋予了 height
和 width，因为它没有子小部件。ClayContainer 的行为与
普通的 Container 相同，需要要么被赋予
height 和 width，要么一个 child 才能可见。在
下面的示例中，ClayContainer 将接收一个子小部件。
它将接收的子小部件是一个包裹在 Padding 中的 ClayText。
ClayContainer(
color: baseColor,
child: Padding(
padding: EdgeInsets.all(20),
child: ClayText("Seize the Clay!", emboss: true, size: 40),
),
),
圆角 ClayContainer
不要做个方块！使用 borderRadius 来增加一些风格。如果你想要统一的 borderRadius，你只需在 ClayContainer 构造函数中直接设置即可。
ClayContainer(
color: baseColor,
height: 150,
width: 150,
borderRadius: 50,
),
如果你想传递自己的自定义 BorderRadius 对象，这也是可行的：在这种情况下，将其传递给 customBorderRadius。
ClayContainer(
color: baseColor,
height: 150,
width: 150,
customBorderRadius: BorderRadius.only(
topRight: Radius.elliptical(150, 150),
bottomLeft: Radius.circular(50)),
),
压印 ClayContainer
你可能已经注意到，前面的 ClayText 可以接收一个 emboss 属性。ClayContainers 也可以。所有粘土小部件默认都处于凹陷状态。
ClayContainer(
emboss: true,
color: baseColor,
height: 150,
width: 150,
borderRadius: 50,
),
更改默认的 spread 和 depth
不喜欢拟态效果的默认外观？更改基础变量。随心所欲。我不是你妈妈。
ClayContainer(
color: baseColor,
height: 150,
width: 150,
borderRadius: 75,
depth: 40,
spread: 40,
),
凹形和凸形 ClayContainer
通过将 CurveType.concave 或 CurveType.convex 传递给 curveType 参数，让你的 ClayContainer 呈现凹形或凸形外观。
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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,
),
],
),
为它添加动画！
动画不是这个插件包含的内容，但是将这些值抽象出来使得进行诸如动画你的拟态元素等操作更加容易。你可以在此项目的 ./example 文件夹中找到下面示例图片的源代码。
完整的 API 文档
ClayContainer
位置参数
无。
命名参数
- color - 这设置了粘土对象的基准颜色。只需将其设置为父对象背景颜色，你就能获得一个看起来相当不错的凹陷拟态效果。
- height - 这设置了容器的高度。
- width - 这设置了容器的宽度。
- parentColor - 这告诉小部件使用不同的颜色来进行外部压印/凹陷效果，而不是使用
color字段中设置的颜色。 - surfaceColor - 这告诉小部件使用不同的颜色作为容器的内表面，而不是使用
color字段中设置的颜色。 - spread - 压印/凹陷效果应该扩散多远？
- depth - 压印/凹陷效果应该有多强？
- child - 这是接收子小部件的地方。
- borderRadius - 这接收一个表示应用于容器所有角的 border radius 的数字。
- customBorderRadius - 这接收一个
BorderRadius对象。设置此对象将覆盖borderRadius字段中的任何设置。 - curveType - 这接收一个
CurveType枚举。使用它来设置内表面看起来是凹形还是凸形。 - emboss - 默认为
false。将其设置为true以创建一个压印容器。
ClayText
位置参数
- text - 这是要显示的文本。
命名参数
- color - 这设置了粘土对象的基准颜色。只需将其设置为父对象背景颜色，你就能获得一个看起来相当不错的凹陷拟态效果。
- parentColor - 这告诉小部件使用不同的颜色来进行外部压印/凹陷效果，而不是使用
color字段中设置的颜色。 - textColor - 这告诉小部件为文本填充使用不同的颜色，而不是使用
color字段中设置的颜色。 - spread - 压印/凹陷效果应该扩散多远？
- depth - 压印/凹陷效果应该有多强？
- emboss - 默认为
false。将其设置为true以创建一个压印容器。
