roundpath

Description:

roundpath

roundpath #
Flutter is a popular cross-platform mobile application development framework that provides many built-in widgets to create various UI elements. One of the widgets is ClipPath, which can clip the widget into different shapes, including polygons and rounded rectangles


Import the library into the project #
dependencies:
roundpath: ^1.0.1
copied to clipboard
And the following shows how to export that object #
import 'package:flutter/cupertino.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:roundpath/roundpath.dart';

void main() {
test('adds one to input values', () {
final calculator = RoundPathWidget(
pathShape: PathShapeEnum.PartRoundRect,
leftBottomRadius: 12,
rightBottomRadius: 12,
child: Container(
width: 200,
height: 140,
color: const Color(0xff062CFF),
),
);
});
}
copied to clipboard
Realization principle #
1、Create a custom Clipper class that inherits from CustomClipper
2、Implement the getClip() method in your custom Clipper class, which returns a Path object describing the path of the clipped shape.
3、In the getClip() method, various methods of the Path class can be used to create polygonal and rounded rectangular paths.
4、To implement polygonal paths, the Path.moveTo() and Path.lineTo() methods can be used to define the position of each corner.
// hexagon
Path path = Path()
..moveTo(size.width / 2, 0)
..lineTo(size.width, size.height / 3)
..lineTo(size.width, size.height * 2 / 3)
..lineTo(size.width / 2, size.height)
..lineTo(0, size.height * 2 / 3)
..lineTo(0, size.height / 3)
..close();

copied to clipboard
5、In order to achieve different rounding settings, you can use the Path.arcTo() method to add rounded paths. The method accepts four parameters: a Rect object representing the location and size of the fillet; a start and end angle in degrees; and a Boolean value indicating whether the path's start and end points should be connected.
// Rounded corners for top left and bottom right corners
path.arcTo(
Rect.fromLTWH(0, 0, radius, radius),
math.pi,
math.pi / 2,
false,
);
path.arcTo(
Rect.fromLTWH(size.width - radius, size.height - radius, radius, radius),
0,
math.pi / 2,
false,
);

copied to clipboard
6、Finally, pass a custom Clipper class to the clipper property of the ClipPath Widget to clip the widget to be displayed.
For example, the following code creates a hexagonal ClipPath widget with rounded corners in the upper left and lower right corners:
ClipPath(
clipper: MyClipper(),
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
);

class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
double radius = 20;
Path path = Path()
..moveTo(size.width / 2, 0)
..lineTo(size.width, size.height / 3)
..lineTo(size.width, size.height * 2 / 3)
..lineTo(size.width / 2, size.height)
..lineTo(0, size.height * 2 /

copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter