时间戳

首页 > 解决方案 > 如何创建自定义卡片（颤振小部件）？

user-interface - 如何创建自定义卡片（颤振小部件）？

问题描述

我正在尝试创建一个看起来像这样的自定义卡片：

一只忙碌的猫

任何建议或指导将不胜感激。

标签： user-interfaceflutterdart

解决方案

你应该试试这个https://flutter.dev/docs/development/ui/layout，它会对你有很大的帮助，另一方面，对于右上角的图标，你可以试试 Stack 小部件，其他组件可以放在一个列中， 就像是：

Card(
  child: Stack(
    children: [
      Positioned(
        top: 0,
        right: 0,
        child: Container(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Colors.red,
                Colors.white
              ],

              // Todo: to achive it as you have it in the picture you need to play with the radialgradient, check the oficial documentation for radialgradient and check for center, stops and radius properties of radialgradient
            )
          ),
          child: Padding(padding: EdgeInsets.all(10.0), child: Icon(Icons.menu /*Replace it with your icon*/)),
        ),
      ),
      Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          children: <Widget>[
            Text("some text"),
            Text("some text 2"),
            Align(
              alignment: Alignment.centerRight,
              child: Chip(
                label: Text('0'),
              ),
            ),
          ],
        ),
      )
    ],
  ),
);

这不是完整的答案，您需要使用尺寸、高度、宽度、填充和边距，祝您好运

推荐阅读