flutterdartuser-interfacecard

Flutter Unable to create corner curved color padding


Orange color corner curve padding not archive but here I get straight line only suggest any check my code..!

Check the below image orange corner rounder curve

Widget build(Context context) {
            return Padding(
              padding: EdgeInsets.symmetric(vertical: 6.0, horizontal: 6.0),
              child: Card(
                elevation: 6.0,
                color: Colors.white,
                clipBehavior: Clip.hardEdge,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16.0),
                ),
                child: Container(
                  decoration: const BoxDecoration(
                    border: Border(
                      left: BorderSide(
                        color:  Colors.transparent,
                        width: 2.0,
                        style: BorderStyle.solid,
                      ),
                    ),
                  ),
                  padding: const EdgeInsets.all(18.0),
                  child: Column(
                    children: [],
                  ),
                ),
              ),
            );
          }

Solution

  • You could possibly use

                body: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 6.0),
                  child: Card(
                    elevation: 6.0,
                    color: Colors.amber,
                    clipBehavior: Clip.hardEdge,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                    child: Container(
                      height: 200,
                      width: MediaQuery.of(context).size.width,
                      margin: const EdgeInsets.only(left: 8), // 👈 This will specifiy the width of the curved border 
                      decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.horizontal(
                            left: Radius.circular(20),
                          )),
                      padding: const EdgeInsets.all(18.0),
                      child: Column(
                        children: [],
                      ),
                    ),
                  ),
                ),
    

    Output:

    enter image description here