如何在flutter中将变换后的Container左对齐？

Question

我正在颤振中构建折扣优惠券卡

为此，我尝试旋转卡片名称，但在将容器与父容器左侧对齐时遇到问题。

这是我的完整卡代码

Container(
                                                  height: 100,
                                                  padding:
                                                      const EdgeInsets.all(0),
                                                  margin: const EdgeInsets.only(
                                                      top: 15),
                                                  decoration: BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            30),
                                                    border: Border.all(
                                                        width: 2,
                                                        color: Colors
                                                            .grey.shade400),
                                                  ),
                                                  child: Row(
                                                    children: [
                                                      Transform.rotate(
                                                        angle: 90 *
                                                            (3.141592653589793 /
                                                                180),
                                                        child: Container(
                                                          width: 100,
                                                          height: 40,
                                                          alignment:
                                                              FractionalOffset
                                                                  .centerLeft,
                                                          decoration:
                                                              const BoxDecoration(
                                                            color: Colors.green,
                                                            borderRadius:
                                                                BorderRadius
                                                                    .only(
                                                              bottomLeft: Radius
                                                                  .circular(30),
                                                              bottomRight:
                                                                  Radius
                                                                      .circular(
                                                                          30),
                                                            ),
                                                          ),
                                                          padding:
                                                              const EdgeInsets
                                                                  .all(10),
                                                          child: Center(
                                                            child: Text(
                                                              index == 0
                                                                  ? "MAGIC"
                                                                  : index == 1
                                                                      ? "SUPER"
                                                                      : "DELUXE",
                                                              textAlign:
                                                                  TextAlign
                                                                      .center,
                                                              style: const TextStyle(
                                                                  color: Pallete
                                                                      .whiteColor,
                                                                  fontWeight:
                                                                      FontWeight
                                                                          .w600),
                                                            ),
                                                          ),
                                                        ),
                                                      ),
                                                      const SizedBox(
                                                        width: 10,
                                                      ),
                                                      Column(
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .center,
                                                        children: [
                                                          Text(
                                                            index == 0
                                                                ? "MAGIC"
                                                                : index == 1
                                                                    ? "SUPER"
                                                                    : "DELUXE",
                                                            textAlign: TextAlign
                                                                .center,
                                                            style: const TextStyle(
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w600),
                                                          ),
                                                          const SizedBox(
                                                            height: 5,
                                                          ),
                                                          Text(
                                                              "Get ${selectedOffers[index]['discount']} off"),
                                                          const Divider(),
                                                          const SizedBox(
                                                            height: 10,
                                                          ),
                                                          Text(
                                                              "Min. ₹ ${(double.tryParse(selectedOffers[index]['minOrder']) ?? 0) * (double.tryParse(selectedOffers[index]['discount'].replaceAll('%', '')) ?? 0) / 100}")
                                                        ],
                                                      ),
                                                      const Spacer(),
                                                      TextButton(
                                                          onPressed: () {},
                                                          child: Text("Apply"))
                                                    ],
                                                  ),
                                                )

此处，在图像上如何删除旋转容器上的左侧间距（绿色） 我使用了 Transform.rotate 小部件，但这并没有将容器向左对齐，为什么会出现这个间距，请帮忙

Answer 1

尝试一下并添加您的条件

     Container(
                        height: 100,
                        padding: const EdgeInsets.all(0),
                        margin: const EdgeInsets.only(top: 15),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(30),
                          border: Border.all(
                              width: 2, color: Colors.grey.shade400),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                                width: 40,
                                height: 100,
                                decoration: const BoxDecoration(
                                  borderRadius: BorderRadius.only(
                                      bottomLeft: Radius.circular(28),
                                      topLeft: Radius.circular(28)),
                                  color: Colors.green,
                                ),
                                child: const Center(
                                  child: RotatedBox(
                                    quarterTurns: 1,
                                    child: Text(
                                      'MAGIC',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontWeight: FontWeight.w600),
                                    ),
                                  ),
                                )),
                            const Padding(
                              padding: EdgeInsets.only(top: 8, bottom: 8),
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    'Super',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontWeight: FontWeight.w600),
                                  ),
                                  Text('Get 10 % off'),
                                  Spacer(),
                                  Text('Min. ₹ 358'),
                                ],
                              ),
                            ),
                            TextButton(
                                onPressed: () {},
                                child: const Text("Apply"))
                          ],
                        ))

//不必旋转整个绿色容器，只需旋转文本即可。 现在，您还可以使用 Transform 代替 RotatedBox。