颤振构建设计

Question

我尝试了几种方法来创建这样的元素：Click here

但考虑到设计和响应能力，我找不到正确的方法。我希望这里有人可以给我一些提示或给我举个例子。

https://i.stack.imgur.com/9IHQh.jpg

Answer 1

首先需要在 Pubspec.yaml 中导入 flutter_neumorphic: ^3.0.3 包

然后复制我下面给出的代码

我的代码

Container(
      width: 300,
      height: 100,

      child: Stack(
        children: [
          Positioned(
              right: 0,
              top: 15,
              height: 70,
              width: 260,
              child: Neumorphic(
                padding: EdgeInsets.all(3),
                child: Neumorphic(
                  padding: EdgeInsets.only(left: 80),
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        NeumorphicText(
                          '3 Videos',
                          style: NeumorphicStyle(depth: 7, color: Colors.white),
                          textStyle: NeumorphicTextStyle(
                            fontSize: 23,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        NeumorphicText(
                          'E 0,99',
                          style: NeumorphicStyle(depth: 7, color: Colors.white),
                          textStyle: NeumorphicTextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.normal
                            ,
                          ),
                        ),
                      ]),
                  style: NeumorphicStyle(
                      shape: NeumorphicShape.convex,
                      depth: 6,
                      boxShape:
                      NeumorphicBoxShape.roundRect(BorderRadius.circular(18)),
                      color: Colors.purple),
                ),
                style: NeumorphicStyle(
                    shape: NeumorphicShape.convex,
                    depth: 6,
                    boxShape:
                        NeumorphicBoxShape.roundRect(BorderRadius.circular(20)),
                    color: Colors.white),
              )),
          Positioned(
              left: 0,
              top: 5,
              height: 90,
              width: 120,
              child: Neumorphic(
                padding: EdgeInsets.all(5),
                child: Neumorphic(
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                    NeumorphicText(
                      '10',
                      style: NeumorphicStyle(depth: 7, color: Colors.white),
                      textStyle: NeumorphicTextStyle(
                        fontSize: 23,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    NeumorphicText(
                      'Coins',
                      style: NeumorphicStyle(depth: 7, color: Colors.white),
                      textStyle: NeumorphicTextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.normal
                        ,
                      ),
                    ),
                  ]),
                  style: NeumorphicStyle(
                      shape: NeumorphicShape.concave,
                      depth: 6,
                      boxShape: NeumorphicBoxShape.circle(),
                      color: Colors.orange),
                ),
                style: NeumorphicStyle(
                    shape: NeumorphicShape.concave,
                    depth: 6,
                    boxShape: NeumorphicBoxShape.circle(),
                    color: Colors.orangeAccent),
              )),
        ],
      ),
    );