flutter dotted border

Hi Guys, Welcome to Proto Coders Point. In this flutter tutorial(Article) we will learn how to give dotted border around any widget in flutter.

Note: to add dashed border or dotted border to our widget, we will make use of flutter_dotted_border package. that let’s developer to easilt implement dotted border in flutter.

Output example

dotted border example
dotted border example

Video Tutorial

Installation of package

1. Run a command to install the package

flutter pub add dotted_border

In your IDE terminal type above command & enter. It will add line in pubspec.yaml file.

dependencies:
  dotted_border: ^2.0.0  #latest version

OR

Directly add it under dependencies section

Open pubspec.yaml file and under dependencies section add the border dotted library.

dependencies:
  dotted_border: ^2.0.0  #latest version

2. Import dotted_border.dart file

once you have added the package now you just need to import it wherever required.

import 'package:dotted_border/dotted_border.dart';

How to use usage

you just need towrapany of your widget where i want to give a border with DottedBorder widget.

Example: Snippet code

DottedBorder(
        child: FlutterLogo(
          size: 148,
        ),
  ),

Here in above snippet, I have a flutterLogo widget for which i want a border, so i have just wrapped it as above.

BorderType

giving bordershape and radius to it.

Rect

DottedBorder(
        child: FlutterLogo(
          size: 148,
        ),
        borderType: BorderType.Rect,
        dashPattern: [10,5,10,5,10,5], //optional
      ),
flutter rectangle border

RRect BorderRadius

DottedBorder(
        child: FlutterLogo(
          size: 148,
        ),
        borderType: BorderType.RRect,
        radius: Radius.circular(20),
        dashPattern: [10,5,10,5,10,5],
      ),
flutter  rounder rectangle border

Circle Border and oval Border

flutter circle border
DottedBorder(
        child: FlutterLogo(
          size: 148,
        ),
        borderType: BorderType.Circle,
         dashPattern: [10,5,10,5,10,5],
      ),
DottedBorder(
          child: ClipOval(
              child: FlutterLogo(
            size: 148,
          )),
          borderType: BorderType.Oval,
          dashPattern: [10,5,10,5,10,5],
),
flutter clipoval example border

#image

Dash Pattern

Then, if you want to customize the space between dash border, you can easily do it by property ‘dashPattern’ just specity the dash sequence by passing array list of pixel size of dash size & empty space.

DottedBorder(
        dashPattern: [10,5,10,5,10,5], 
        child: FlutterLogo(
            size: 148,
          ),
    )

The above dash Pattern will build dash border in a sequence

Eg: 10 pixel wide dash.
5 pixel wide space.
10 pixel wide dash and so on until complete border is completed.

Custom painting dotted path border

let’s draw a star pattern in flutter

first create a custom paint path.

Path customPath = Path()
    ..moveTo(20, 20)
    ..lineTo(50, 80)
    ..lineTo(80, 18)
    ..lineTo(18, 55)
    ..lineTo(82, 55)
    ..lineTo(20, 20)
  ;

Now apply the line drawing path to dotted widget

DottedBorder(
            customPath: (size) => customPath, // PathBuilder
            color: Colors.blue.shade800,
            strokeCap: StrokeCap.round,
            dashPattern: [3, 3],
            strokeWidth: 2,
            child: Container(
              height: 120,
              width: 120,

            ),
          ),
star pattern drawing

Complete source code – flutter dotted border example

main.dart

In below code.

I am use GridView to build list of widget with dotted border.

firstly i have initialized 2 array list of type BorderType & and double list. In BorderType we have type such as RRect for show rounded rectangle, Rect to get simple rectangle border, circle to show fully rounded border and Oval to show oval shape in border.

Then this list is been passed through itemBuilder to create widget BuildBorderWidget.

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 // create a list of bordertype so 
  List<BorderType> borderTypeList = [
    BorderType.RRect,
    BorderType.Circle,
    BorderType.Rect,
    BorderType.Oval
  ];
  List<double> radiusnumber = [20, 0, 20, 0];

  Path customPath = Path()
    ..moveTo(20, 20)
    ..lineTo(50, 80)
    ..lineTo(80, 18)
    ..lineTo(18, 55)
    ..lineTo(82, 55)
    ..lineTo(20, 20)
  ;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GridView.builder(
                  shrinkWrap: true,
                  physics: ScrollPhysics(),
                  itemCount: borderTypeList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2, crossAxisSpacing: 4.0, mainAxisSpacing: 4),
                  itemBuilder: (BuildContext context, int index) {
                    return BuildBorderWidget(
                        borderTypeList[index], radiusnumber[index]);   // call custom widget to build it.
                  }
         ),

         // draws star shape pattern
          DottedBorder(
            customPath: (size) => customPath, // PathBuilder
            color: Colors.blue.shade800,
            strokeCap: StrokeCap.round,
            dashPattern: [3, 3],
            strokeWidth: 2,
            child: Container(
              height: 120,
              width: 120,

            ),
          ),
            ],
          ),
        ),
      ),
    );
  }
}

// this custom widget is been called from GridView.builder
Widget BuildBorderWidget(BorderType borderType, double radius) {
  return Center(
      child: DottedBorder(
        dashPattern: [10,5,10,5,10,5],
        child: borderType == BorderType.Oval ? ClipOval(
        child: FlutterLogo(
        size: 148,
      ),
    ) : FlutterLogo(
      size: 148,
    ),
    borderType: borderType,
    radius: Radius.circular(radius),
  ));
}

Output