dotted_border 1.0.2

Dotted Border #

pub package

A flutter package to easily added dotted borders around widgets.

Installing #

To use this package, add dotted_border as a dependency in your pubspec.yaml file.

Usage #

Wrap DottedBorder widget around the child widget

DottedBorder(
    color: Colors.black,
    strokeWidth: 1,
    child: FlutterLogo(size: 148),
)

BorderTypes #

This package supports the following border types at the moment

  • RectBorder
  • RRectBorder
  • CircleBorder
  • OvalBorder

Example #

return DottedBorder(
  borderType: BorderType.RRect,
  radius: Radius.circular(12),
  padding: EdgeInsets.all(6),
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(12)),
    child: Container(
      height: 200,
      width: 120,
      color: Colors.amber,
    ),
  ),
);

Dash Pattern #

Now you can also specify the Dash Sequence by passing in an Array of Doubles

Example #

DottedBorder(
    dashPattern: [6, 3, 2, 3] 
    child: ...
);

The above code block will render a dashed border with the following pattern:

  • 6 pixel wide dash
  • 3 pixel wide space
  • 2 pixel wide dash
  • 3 pixel wide space

Custom Path Border #

You can also specify any path as the customPath property when initializing the DottedBorderWidget, and it will draw it for you using the provided dash pattern.

Example #

Path customPath = Path()
  ..moveTo(20, 20)
  ..lineTo(50, 100)
  ..lineTo(20, 200)
  ..lineTo(100, 100)
  ..lineTo(20, 20);

return DottedBorder(
  customPath: customPath,
  color: Colors.indigo,
  dashPattern: [8, 4],
  strokeWidth: 2,
  child: Container(
    height: 220,
    width: 120,
    color: Colors.green.withAlpha(20),
  ),
);

Output #

Flutter dotted border image

Credits #

[0.1.0] - 20 May, 2019

  • Draw rectangular border around any widget.

[0.1.1] - 20 May, 2019

  • Added description

[1.0.0] - 3 July, 2019

  • Add more path options
  • Added dash pattern option

[1.0.1] - 3 July, 2019

  • Added a basic Dart doc

[1.0.2] - 9 July, 2019

  • Added ability to let users specify their own custom paths as border

example/README.md

Example #

Sample application to demonstrate usage of DottedBorder package.

Running the sample application #

Fetch dependencies

flutter packages get

Run the application with

flutter run

Sample Code #

import 'package:flutter/material.dart';

import 'package:dotted_border/dotted_border.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Dotted Border'),
          ),
          body: SafeArea(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    container1,
                    Spacer(),
                    container2,
                    Spacer(),
                    container3,
                    Spacer(),
                    container4,
                  ],
                ),
              ),
            ),
          )),
    );
  }

  Widget get container1 {
    return DottedBorder(
      padding: EdgeInsets.all(4),
      dashPattern: [9, 5],
      child: Container(
        height: 110,
        width: double.maxFinite,
        decoration: BoxDecoration(
          color: Color(0xff994444),
        ),
      ),
    );
  }

  Widget get container2 {
    return DottedBorder(
      padding: EdgeInsets.all(8),
      dashPattern: [6],
      borderType: BorderType.Circle,
      child: Container(
        height: 210,
        width: double.maxFinite,
        decoration: ShapeDecoration(
          shape: CircleBorder(),
          color: Color(0xff444499),
        ),
      ),
    );
  }

  Widget get container3 {
    return DottedBorder(
      padding: EdgeInsets.all(4),
      borderType: BorderType.RRect,
      radius: Radius.circular(20),
      child: Container(
        height: 120,
        width: double.maxFinite,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
          color: Color(0xff994444),
        ),
      ),
    );
  }

  Widget get container4 {
    return DottedBorder(
      borderType: BorderType.Oval,
      dashPattern: [8,4,2,4],
      child: Container(
        height: 180,
        width: double.maxFinite,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          color: Color(0x22888888),
        ),
      ),
    );
  }
}

Output #

Flutter dotted border image

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  dotted_border: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:dotted_border/dotted_border.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
92
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Aug 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/dash_painter.dart.

Run flutter format to format lib/dash_painter.dart.

Format lib/dotted_border.dart.

Run flutter format to format lib/dotted_border.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
path_drawing ^0.4.1 0.4.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.6 1.1.7
path_parsing 0.1.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test