CODEWITHSUNDEEP
androidflutterdart
Atiq Ur Rehman
Atiq Ur Rehman

Reputation: 1235

Flutter, How to Clip a Container Like an Arc

i have a container i need to clip it's height and that will look like the image provided.i have tried customPaint widget also but can not able to get it working.

enter image description here

      child: Container(
        decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 12,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
            color: ColorConstants.redColor,
            borderRadius: BorderRadius.all(Radius.circular(8))),
      ),
    ),

  @override
  Path getClip(Size size) {
    var path = Path();

    path.lineTo(size.width, 0.0);
    return path;
  }

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

Upvotes: 1

Views: 4063

Answers (2)

Jim
Jim

Reputation: 7601

I suggest clippy_flutter, it provides varies type of clips default.

Upvotes: 0

Sebastian
Sebastian

Reputation: 3894

You can do it easily with CustomClipper

Try this Dartpad

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: ArcClipper(),
      child: Container(
        height: 60,
        width: 200,
        decoration: BoxDecoration(
          color: Colors.orange,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * .03, size.height);
    path.quadraticBezierTo(size.width * .2, size.height * .5, size.width * .03, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

Upvotes: 2

Related Questions