Search code examples
fluttercontainers

Flutter how to make container like below with divider line


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)),],

                                    ),
                                  )],
                                ),
                              ),

                          ),

Solution

  • 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)),
                  ),
                ],
              ),
            ),