Home > database >  Flutter how to make container like below with divider line
Flutter how to make container like below with divider line

Time:11-17

I want to make a container like this but cant get the results as what i want..

Below is my code i try to make like the image but i cannot seperate the colour with divider

enter image description here

Expanded(
                            child:
                              Container(
                                padding: EdgeInsets.only(left: 20,top: 5),
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: Colors.black, width: 1.0),
                                    borderRadius: const BorderRadius.all(
                                      Radius.circular(32),
                                    )),
                                height: 150,
                                width: 500,
                                child: Column(
                                  children: [Container(
                                    child:Column(
                                      children: [Container(
                                        child: Text("TOTAL: GGWP  "  
                                            totalCart.toString()  " ITEMS",style:
                                        TextStyle(fontSize: 40,color: Colors.black,fontWeight: FontWeight.w400)),

                                      ),  Text("TOTAL: GGWP  "  
                                          totalCart.toString()  " ITEMS",style:
                                      TextStyle(fontSize: 40,color: Colors.black,fontWeight: FontWeight.w400)),],

                                    ),
                                  )],
                                ),
                              ),

                          ),

CodePudding user response:

I think this is what you want.

Container(
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.black, width: 2),
              borderRadius: const BorderRadius.all(
                Radius.circular(32),
              )),
          width: 200,
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.only(left: 20, top: 5),
                color: Colors.orange,
                child: Text("TOTAL: GGWP  "   "---"   " ITEMS",
                    style: TextStyle(fontSize: 24, color: Colors.black, fontWeight: FontWeight.w400)),
              ),
              Padding(
                padding: EdgeInsets.only(left: 20, top: 5),
                child: Text("TOTAL: GGWP  "   "---"   " ITEMS",
                    style: TextStyle(fontSize: 24, color: Colors.black, fontWeight: FontWeight.w400)),
              ),
            ],
          ),
        ),
  • Related