'How to create a curved container in flutter
I'm trying to create this design in flutter
when i try to increase the height of curved container to create the MyDocs container design, its curved get disturb. please help how to do this.
here is my code
Widget build(BuildContext context) {
return SafeArea(
child: Container(
child: Column(children: [
ClipPath(
clipper: ProsteThirdOrderBezierCurve(
position: ClipPosition.bottom,
list: [
ThirdOrderBezierCurveSection(
p1: Offset(0, 100),
p2: Offset(0, 210),
p3: Offset(MediaQuery.of(context).size.width, 100),
p4: Offset(MediaQuery.of(context).size.width, 200),
),
],
),
child: Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 52, 84, 109),
),
height: 200,
child: Column(children: [
const SizedBox10(),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.07,
child: TextField(
decoration: InputDecoration(
suffixIcon: const Icon(Icons.search),
contentPadding: const EdgeInsets.all(20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "Search...",
fillColor: Colors.white70),
),
),
),
]),
),
),
here is its output
Solution 1:[1]
You can use ClipPath widget, with custom clippers.
For custom clippers you can try flutter_custom_clippers package.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Varun S Athreya |