颤动问题：如何在卡的左下角制作升级部分

Question

我想在左下角制作升级部分，但我不知道该怎么做。

我想在左下角制作升级部分，但我不知道该怎么做。 我想在左下角制作升级部分，但我不知道该怎么做。

这是我的代码。

import 'package:cwc/constants/constants.dart';
import 'package:flutter/material.dart';

class UpgradeMemberPackages extends StatefulWidget {
  const UpgradeMemberPackages({Key? key}) : super(key: key);

  @override
  _UpgradeMemberPackagesState createState() => _UpgradeMemberPackagesState();
}

class _UpgradeMemberPackagesState extends State<UpgradeMemberPackages> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 160,
              decoration: const BoxDecoration(
                color: Color(0xffCCEAEF),
                image: DecorationImage(
                  image: AssetImage('assets/ump.png'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Container(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12.0),
                child: Column(
                  children: [
                    SizedBox(
                      height: 13,
                    ),
                    Text(
                      "Your Membership Package",
                      style: TextStyle(
                          fontSize: tSize18,
                          fontWeight: FontWeight.w500),
                    ),
                    Container(
                        padding: EdgeInsets.only(right: 15, left: 15),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: DecorationImage(
                            image: AssetImage("assets/green_card.png"),
                            fit: BoxFit.fill,
                          ),
                        ),
                        height: 147,
                        width: MediaQuery.of(context).size.width,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(top: 16.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    "Starter Package",
                                    style: TextStyle(
                                        fontSize: tSize18,
                                        fontWeight: FontWeight.w500),
                                  ),
                                  SizedBox(
                                    height: 6,
                                  ),
                                  Text(
                                    "Package for new members",
                                    style: TextStyle(
                                      fontSize: tSize14,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 16,
                                  ),
                                  Text(
                                    "Free",
                                    style: TextStyle(
                                        fontSize: tSize27,
                                        fontWeight: FontWeight.w500),
                                  ),
                                  SizedBox(
                                    height: 3,
                                  ),
                                  Text(
                                    "Valid Til: NONE",
                                    style: TextStyle(
                                      fontSize: tSize14,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(bottom: 8),
                              child: Image.asset(
                                'assets/onaa.png',
                                height: 114,
                                width: 114,
                              ),
                            ),
                          ],
                        )),
                    SizedBox(
                      height: 13,
                    ),Text(
                      "Other Packages",
                      style: TextStyle(
                          fontSize: tSize18,
                          fontWeight: FontWeight.w500),
                    ), SizedBox(
                      height: 13,
                    ),
                    Container(
                        padding: EdgeInsets.only(right: 15, left: 15),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: DecorationImage(
                            image: AssetImage("assets/orange_card.png"),
                            fit: BoxFit.fill,
                          ),
                        ),
                        height: 147,
                        width: MediaQuery.of(context).size.width,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(top: 16.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    "Explorer Package",
                                    style: TextStyle(
                                        fontSize: tSize18,
                                        fontWeight: FontWeight.w500),
                                  ),
                                  SizedBox(
                                    height: 6,
                                  ),
                                  Text(
                                    "Best package for price",
                                    style: TextStyle(
                                      fontSize: tSize14,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 16,
                                  ),
                                  Text(
                                    "$99 USD",
                                    style: TextStyle(
                                        fontSize: tSize27,
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(bottom: 8),
                              child: Image.asset(
                                'assets/onbb.png',
                                height: 114,
                                width: 114,
                              ),
                            ),
                          ],
                        )),
                    SizedBox(
                      height: 10,
                    ),
                    Container(
                        padding: EdgeInsets.only(right: 15, left: 15),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: DecorationImage(
                            image: AssetImage("assets/purple_card.png"),
                            fit: BoxFit.fill,
                          ),
                        ),
                        height: 147,
                        width: MediaQuery.of(context).size.width,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(top: 16.0),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    "Champion Package",
                                    style: TextStyle(
                                        fontSize: tSize18,
                                        fontWeight: FontWeight.w500),
                                  ),
                                  SizedBox(
                                    height: 6,
                                  ),
                                  Text(
                                    "VIP Package",
                                    style: TextStyle(
                                      fontSize: tSize14,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 16,
                                  ),
                                  Text(
                                    "$199 USD",
                                    style: TextStyle(
                                        fontSize: tSize27,
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(bottom: 8.0),
                              child: Image.asset(
                                'assets/oncc.png',
                                height: 114,
                                width: 114,
                              ),
                            ),
                          ],
                        ))
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

实际上我想做成这样。

但它变成了这个样子。我想要左下角的升级部分。

Answer 1

通过使用 Stack 小部件，我实现了您想要的。

由于没有图片资源，截图与您上传的不一致

• 在 Container 中用 Stack 小部件包装 Row 小部件
• 移动了填充 属性 因为 'upgrade now' 小部件位置
• 添加了 'upgrade now' 小部件

Container(
                      decoration: BoxDecoration(
                        color: Colors.orange,
                        borderRadius: BorderRadius.circular(10),
                        image: DecorationImage(
                          image: AssetImage("assets/orange_card.png"),
                          fit: BoxFit.fill,
                        ),
                      ),
                      height: 147,
                      width: MediaQuery.of(context).size.width,
                      child: Stack(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right: 15, left: 15),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(top: 16.0),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        "Explorer Package",
                                        style: TextStyle(
                                            fontSize: 14,
                                            fontWeight: FontWeight.w500),
                                      ),
                                      SizedBox(
                                        height: 6,
                                      ),
                                      Text(
                                        "Best package for price",
                                        style: TextStyle(
                                          fontSize: 10,
                                        ),
                                      ),
                                      SizedBox(
                                        height: 16,
                                      ),
                                      Text(
                                        "$99 USD",
                                        style: TextStyle(
                                            fontSize: 23,
                                            fontWeight: FontWeight.w500),
                                      ),
                                    ],
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(bottom: 8),
                                  child: Image.asset(
                                    'assets/onbb.png',
                                    height: 114,
                                    width: 114,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: Container(
                              decoration: BoxDecoration(
                                color: Colors.green,
                                borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(10),
                                  bottomLeft: Radius.circular(10),
                                ),
                              ),
                              height: 25,
                              width: 150,
                              child: Center(
                                child: Text(
                                  'Upgrade Now',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 9,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),

Answer 2

试试下面的代码希望对你有帮助。您为此使用了 Stack 小部件

参考Stackhere

参考Positionedhere

 Stack(
  children: [
    Container(
      padding: EdgeInsets.only(right: 15, left: 15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: DecorationImage(
          image: NetworkImage(
              "https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png"),
          fit: BoxFit.fill,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 16.0),
            child: Column(
              children: [
                Text(
                  "Explorer Package",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                ),
                SizedBox(
                  height: 6,
                ),
                Text(
                  "Best package for price",
                  style: TextStyle(
                    fontSize: 14,
                  ),
                ),
                SizedBox(
                  height: 16,
                ),
                Text(
                  "$99 USD",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 27,
                      fontWeight: FontWeight.w500),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 8),
            child: Image.network(
              'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
              height: 114,
              width: 114,
            ),
          ),
        ],
      ),
    ),
    Positioned(
      bottom: 0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(8),
            topRight: Radius.circular(20),
          ),
        ),
        width: 200,
        height: 38,
        child: Center(
          child: Text(
            'Upgrade Now',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
      ),
    ),
  ],
),
     

您的结果屏幕->