How To Create Bezier Curve Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

I am trying to create a Bezier curve with the Flutter CustomPainter. However, when I try to chain them, the resulting curve has some annoying edges. How can I achieve a smooth curve?

Learn How To Create Bezier Curved In Flutter Android App

Step 1
 The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as shown in the image. Now add the image inside the newly created assets directory.

Step 2
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below
flutter: 
  assets: 
   - assets/images/



You Can Add Bezier Curved Image Code:
Stack(
  children: [
    Padding(
      padding: const EdgeInsets.only(bottom: 2.0),
      child:ClipPath(
        clipper: ClippingClass(),
        child: Container(
          width: MediaQuery
              .of(context)
              .size
              .width,
          height: 320.0,
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: AssetImage(
                      "assets/images/img_jpeg.jpg"))
          ),
        ),
      ),
    ),


  ],
),



class ClippingClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height-40);
    path.quadraticBezierTo(size.width / 4, size.height,
        size.width / 2, size.height);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height,
        size.width, size.height - 40);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}


Complete Code FOr Bezier Curved Image In Flutter
main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xffffffff),
      child: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
            child:ClipPath(
              clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage(
                            "assets/images/img_jpeg.jpg"))
                ),
              ),
            ),
          ),


        ],
      ),
    );
  }
}

class ClippingClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height-40);
    path.quadraticBezierTo(size.width / 4, size.height,
        size.width / 2, size.height);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height,
        size.width, size.height - 40);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Related Post