ClipPath in Flutter



import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyCustomShape(),
  ));
}

class MyCustomShape extends StatefulWidget {
  @override
  _MyCustomShapeState createState() => _MyCustomShapeState();
}

class _MyCustomShapeState extends State<MyCustomShape> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //backgroundColor: Colors.deepPurpleAccent,
      appBar: AppBar(
        //backgroundColor: Colors.deepPurpleAccent,
        title: Text("Custom Shape Tutorial"),
      ),
      body: Stack(
        children: [
          Center(
            child: ClipPath(
              clipper: MyCustomPath(),
              child: Container(
                width: 350,
                height: 500,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    colors: [
                      Colors.deepOrangeAccent,
                      Colors.orange,
                    ],
                  ),
                ),
                //color: Colors.red,
              ),
            ),
          ),
          Positioned(
            left: 100,
            top: 100,
            right: 100,
            child: CircleAvatar(
              backgroundColor: Colors.white60,
              radius: 80,
              child: CircleAvatar(
                radius: 75,
                backgroundImage: NetworkImage(
                    "imagelocationurl..."),
              ),
            ),
          ),
          Align(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Deep Singh",
                  style: Theme.of(context).textTheme.headline4,
                ),
                SizedBox(
                  height: 5,
                ),
                Text(
                  "deepsingh44@gmail.com",
                  style: TextStyle(),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class MyCustomPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
  
    //First Screen Custom Shape Code
    var round = 50.0;
    var path = Path();
    path.moveTo(0, size.height * .50);
    path.lineTo(0, size.height - round);
    path.quadraticBezierTo(0, size.height, round, size.height);
    path.lineTo(size.width - round, size.height);
    path.quadraticBezierTo(
        size.width, size.height, size.width, size.height - round);
    path.lineTo(size.width, 0);
    path.quadraticBezierTo(
        0, size.height * .33 + round, 0, size.height * .33 + round * 2);
        
    //Second Screen Custom Shape Code
    //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);*/
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}
  

No comments: