dotted_line 2.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 89

About #

This package allows you to draw dotted lines with Flutter.

screenshot.png

Usage #

ParameterDefaultDescription
directionAxis.horizontalThe direction of the entire dotted line.
lineLengthdouble.infinityThe length of the entire dotted line.
lineThickness1.0The thickness of the entire dotted line.
dashLength4.0The length of the dash.
dashColorColors.blackThe color of the dash.
dashRadius0.0The radius of the dash.
dashGapLength4.0The length of the dash gap.
dashGapColorColors.transparentThe color of the dash gap.
dashGapRadius0.0The radius of the dash gap.

This can be used without parameters.

import 'package:dotted_line/dotted_line.dart';

DottedLine()

You can also customize by specifying parameters.

import 'package:dotted_line/dotted_line.dart';

DottedLine(
  direction: Axis.horizontal,
  lineLength: double.infinity,
  lineThickness: 1.0,
  dashLength: 4.0,
  dashColor: Colors.black,
  dashRadius: 0.0,
  dashGapLength: 4.0,
  dashGapColor: Colors.transparent,
  dashGapRadius: 0.0,
)

Example #

The sample code can be found under the example package. You can try changing all parameters.

2.0.0 #

  • Fixed a performance issue when displaying in ListView

From this version, this library is no longer dependent on ListView.

1.1.0 #

  • Add dashRadius and dashGapRadius parameters.
  • Change the default dash gap color from Colors.white to Colors.transparent.
  • Change README.md and the sample code.

1.0.3 #

  • Change the sample code.
  • Enabled build the sample code on the web.

1.0.2 #

  • Remove top padding.

Thanks to @tuarrep for this release!

1.0.1 #

  • Update description.
  • Update README.

1.0.0 #

  • Initial release.

example/lib/main.dart

import 'package:dotted_line/dotted_line.dart';
import 'package:flutter/material.dart';

const String _TITLE = 'DottedLine Demo';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _TITLE,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: _MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<_MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final space = SizedBox(height: 50);
    return Scaffold(
      appBar: AppBar(title: Text(_TITLE)),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            space,
            Text("Default"),
            DottedLine(),
            space,
            Text("Dash length changed"),
            DottedLine(dashLength: 40),
            space,
            Text("Dash gap length changed"),
            DottedLine(dashLength: 30, dashGapLength: 30),
            space,
            Text("Line thickness changed"),
            DottedLine(
              dashLength: 30,
              dashGapLength: 30,
              lineThickness: 30,
            ),
            space,
            Text("Dash radius changed"),
            DottedLine(
              dashLength: 30,
              dashGapLength: 30,
              lineThickness: 30,
              dashRadius: 16,
            ),
            space,
            Text("Dash and dash gap color changed"),
            DottedLine(
              dashLength: 30,
              dashGapLength: 30,
              lineThickness: 30,
              dashColor: Colors.blue,
              dashGapColor: Colors.red,
            ),
            space,
            Text("Line direction and line length changed"),
            DottedLine(
              dashLength: 30,
              dashGapLength: 30,
              lineThickness: 30,
              dashColor: Colors.blue,
              dashGapColor: Colors.red,
              direction: Axis.vertical,
              lineLength: 150,
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  dotted_line: ^2.0.0

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_line/dotted_line.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
79
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]
89
Learn more about scoring.

We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • dotted_line that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test