flutter Problem : How to make Upcoming section in Top Right in card

Issue

I want to make Upcoming section in top right but I am not understatig how to do it.

I want to make Upcoming section in top right but I am not understatig how to do it.
I want to make Upcoming section in top right but I am not understatig how to do it.

This is ny code

InkWell(
                        onTap: () {
                          // Navigator.pushReplacement(
                          //   context,
                          //   MaterialPageRoute(
                          //     builder: (context) => HomePage(),
                          //   ),
                          // );
                          // setState(() {
                          //   isSelect = 1;
                          // });
                        },
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
                          child: SizedBox(
                            height: 147,
                            width: MediaQuery.of(context).size.width,
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Stack(
                                  children: [

                                    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: 13,
                                                ),
                                                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,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Positioned(
                                    bottom: 130,
                                      right: 0,
                                      child: Container(
                                        decoration: BoxDecoration(
                                          color: Color(0xff158998),
                                          borderRadius: BorderRadius.only(
                                            bottomLeft: Radius.circular(10),
                                            topRight: Radius.circular(20),
                                          ),
                                        ),
                                        width:160,
                                        height: 25,
                                        child: Center(
                                          child: Text(
                                            'Upcoming Plans',
                                            style: TextStyle(
                                              color: Colors.white,
                                              fontSize: tSize14,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),

                                  ],
                                ),
                                Positioned(
                                  width: 18,
                                  bottom: 0,
                                  child: Center(
                                    child: Container(
                                      height: 15,
                                      width: 15,
                                      decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(50),
                                      ),
                                      child: Theme(
                                        data: ThemeData(
                                          //here change to your color
                                          unselectedWidgetColor:
                                              Color(0xff3a99a4),
                                        ),
                                        child: Radio(
                                          activeColor: Colors.green,
                                          overlayColor:
                                              MaterialStateProperty.all(
                                                  Colors.red),
                                          value: isSelect,
                                          groupValue: 1,
                                          onChanged: (int? value) {
                                            // setState(() {
                                            //   isSelect = value!;
                                            // });
                                          },
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

In actuall i want like this
enter image description here

But It becoming like this. I want Upcoming section which is in top right.

enter image description here

Solution

It would probably make your life easier to clean up the code. You have multiple stacks, which is usually a sign the layout can be simplified. But your problem can be fixed in a couple of small changes. The explanation and an image of running app is below the code.

Upcoming Plans Changes:

               Positioned(
              // bottom: 130,
              top: 0,
              right: 0,
              child: Container(
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                  color: Color(0xff158998),
                  borderRadius: BorderRadius.all(Radius.circular(20)
                  ),
                ),
                width:160,
                height: 28,
                child: const Center(
                  child: Text(
                    'Upcoming Plans',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14,
                    ),
                  ),
                ),
              ),
            ),

Explorer Package container change

              Container(
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.only(right: 15, left: 15),

The container with "Explorer Package" and the one with "Upcoming plans" (layered above it) need to have offsets, either by Position or margin.

First, anchor the "Upcoming Plans" to the TOP, not the bottom. That way, no matter how high the explorer package is, it will look ok. Then, set the margin for the Explorer container to offset it from the package.

Finally, I think you want symmetric radii for the Upcoming Plans container border.

I’ve adapted the code and ran it. I changed some of the background colors so you can clearly see what I’m doing. I think you want it to look like this:

running Flutter app

Again, it would make it MUCH easier for you and others in the future if you simplify the layout. Use one stack and try to remove the fixed heights. It makes your card harder to reuse (especially if you get new graphics assets). Good luck.

Answered By – Paul

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.