Question 241004 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: how to create a dotted border with custom radius?

How can i create a dotted border in flutter with radius on only top side of the border using the package dotted_border

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    You can use custom path property in the dotted_border package or use custom painter to draw the shape.

    Eg for custom path to add border just on the top side:

    DottedBorder(
   customPath: (Size size) {
     double radius = 10;
     return Path()..moveTo(0, radius)
     ..arcTo(Rect.fromLTWH(0, 0, radius * 2, radius * 2), math.pi, math.pi/2, true)
     .lineTo(size.width - radius, 0)
     ..arcTo(Rect.fromLTWH(size.width - radius * 2, 0, radius * 2, radius * 2), -math.pi/2, math.pi/2, true)
     ..lineTo(size.width, size.height)
     ..lineTo(0, size.height)
     ..lineTo(0, radius);
   },
   child: _yourChild
)

  2. 0

    You can use this package dotted_border to achieve your goal.

    Example

    return DottedBorder(
  borderType: BorderType.RRect,
  radius: Radius.circular(12),
  padding: EdgeInsets.all(6),
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.only(topLeft:Radius.circular(40))),
    child: Container(
      height: 200,
      width: 120,
      color: Colors.amber,
    ),
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search