如何创建自定义卡(颤振小部件)?

时间:2019-08-13 22:36:43

标签: user-interface flutter dart

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

a busy cat

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

1 个答案:

答案 0 :(得分:1)

您应该尝试使用此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'),
              ),
            ),
          ],
        ),
      )
    ],
  ),
);

这不是全部答案,您需要玩一些尺寸,高度,宽度,填充和边距,祝您好运