如何在一组文字颤动后添加图像

Question

我是 flutter 和实现这个容器的新手。我想添加奖杯和文字“NFT”，如图所示。我尝试使用列行，但不起作用。我该怎么做感谢您对此的帮助。 ..................................................... ……………………………… ……………………

 return Center(
    child: Material(
      type: MaterialType.transparency,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
         // color: backgroundBlue,
          gradient: myGradient,
        ),
        padding: const EdgeInsets.only(top: 15, bottom: 15,left: 15),
        width: Size.width - 40,
        height: Size.height * 0.5,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
                      Text(
                        "Challenge",
                        style: TextStyle(
                            color: buttonPurpule,
                            fontSize: 25,
                           // fontWeight: FontWeight.bold
                        ),
                      ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                          Text(
                            "Steps",
                            style: TextStyle(
                                color: buttonPurpule,
                                fontSize: 20,

                            ),
                          ),
              ],
            ),
            Row(
              children: [
                Text(
                  "10,000 Steps",
                  style: TextStyle(
                    color: buttonPurpule,
                    fontSize: 20,

                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Text(
                  "Clories",
                  style: TextStyle(
                    color: buttonPurpule,
                    fontSize: 20,

                  ),
                ),

              ],

            ),
            Row(
              children: [
                Text(
                  "650 cal",
                  style: TextStyle(
                    color: buttonPurpule,
                    fontSize: 20,

                  ),
                ),

              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Text(
                  "Exercise",
                  style: TextStyle(
                    color: buttonPurpule,
                    fontSize: 20,

                  ),
                ),
              ],
            ),
            Row(
              children: [
                Text(
                  "15 Min 550cal , 5000Steps",
                  style: TextStyle(
                    color: buttonPurpule,
                    fontSize: 20,

                  ),
                ),
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Expanded(
              flex: 1,
              child: GestureDetector(
                child: //Icon(Icons.arrow_forward, color: textWhite),

                ButtonM("Unlock", Size, Size.width * 0.75,
                    Icons.arrow_forward, false, buttonblue),
                onTap: () {
                  _Unlockchallenge();
                },
              ),
            ),
          ],
        ),

      ),
    ),
  );

Answer 1

您可以使用 Stack 在图像上定位文本。

在 Positioned 内换行文本以获得所需的位置。

使用 clipBehaviour：Clip.none 确保您的堆栈元素在超出父小部件大小时不会被剪裁。

代码：

Widget build(BuildContext context) {
    // final mainChildKey = GlobalKey();
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Material(
            type: MaterialType.transparency,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
                // gradient:  Gradient(colors: [Colors.amber, Colors.orange],),
              ),
              padding: const EdgeInsets.only(top: 15, bottom: 15, left: 15),
              width: width - 40,
              height: height * 0.5,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Text(
                    "Challenge",
                    style: TextStyle(
                      color: Colors.purple,
                      fontSize: 25,
                      // fontWeight: FontWeight.bold
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: const [
                              Text(
                                "Steps",
                                style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 20,
                                ),
                              ),
                            ],
                          ),
                          Row(
                            children: const [
                              Text(
                                "10,000 Steps",
                                style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 20,
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(
                            height: 20,
                          ),
                          Row(
                            children: const [
                              Text(
                                "Clories",
                                style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 20,
                                ),
                              ),
                            ],
                          ),
                          Row(
                            children: const [
                              Text(
                                "650 cal",
                                style: TextStyle(
                                  color: Colors.purple,
                                  fontSize: 20,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                      // Icon(Icons.cup)
                      SizedBox(
                        width: 30,
                      ),
                      Stack(
                        clipBehavior: Clip.none,
                        children: [
                          Image.network(
                            "https://media.istockphoto.com/photos/gold-cup-winner-on-white-background-isolated-3d-illustration-picture-id868334728?s=612x612",
                            height: 100,
                            width: 100,
                          ),
                          // Icon(Icons.challenge)
                          Positioned(
                            bottom: 0,
                            right: -5,
                            child: Text("NFT", style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold, color: Colors.blue[900]),))
                        ],
                      )
                    ],
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    children: const [
                      Text(
                        "Exercise",
                        style: TextStyle(
                          color: Colors.purple,
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: const [
                      Text(
                        "15 Min 550cal , 5000Steps",
                        style: TextStyle(
                          color: Colors.purple,
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                      child: //Icon(Icons.arrow_forward, color: textWhite),

                          // ButtonM("Unlock", Size, width * 0.75,
                          //     Icons.arrow_forward, false, buttonblue),
                          const Text("data"),
                      onTap: () {
                        // _Unlockchallenge();
                        showDialog(
                            context: context,
                            builder: (context) {
                              return const Dialog(
                                child: Text("Button pressed"),
                              );
                            });
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ));
  }

如何在一组文字颤动后添加图像

how to add an image after a set of text flutter

flutter