Question 75878 in Flutter Question posted in
The official Flutter documentation can be found here.

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: [],
                  ),
                ),
              ),
            );
          }
Tags:

2

Answers


  1. 0

    You can follow this widget,

    class MyTaskItemWidget extends StatelessWidget {
  //final MyTaskDetailItem myLeadDetailItem;

  const MyTaskItemWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 6.0,
      color: Colors.amber, //curve color
      clipBehavior: Clip.hardEdge,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),

      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16.0),
        ),
        margin: const EdgeInsets.only(left: 3.0),// here the thickness 
        child: Column(
          children: [
            Container(
              height: 200,
              width: 300,
            )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search