dotted_separator

A Flutter package that provides a customizable Dotted separator and Dotted widgets.

Screenshots

Home Screen

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  dotter_separator: ^1.0.6

Then run flutter pub get to install the package.

Usage

Import the package in your Dart code:

import 'package:dotter_separator/dotter_separator.dart';

Use the DottedSeparator widget to create a dotted line separator:

  DottedSeparator(
      height: 2,
      width: double.infinity,
      axis: Axis.horizontal,
      dashWidth: 5,
      dashSpace: 3,
      strokeWidth: 1.5,
      dashColor: Colors.black,
      padding: EdgeInsets.symmetric(vertical: 8),
    ),     

In this example, the DottedSeparator widget is used to create a horizontal dotted line separator. You can customize its appearance by adjusting the height, width, axis, dashWidth, dashSpace, strokeWidth, dashColor, and padding properties.

Parameters

  • height (double): The height of the separator.
  • width (double): The width of the separator.
  • axis (Axis): The axis direction of the separator (horizontal or vertical).
  • dashWidth (double): The width of each dash in the separator.
  • dashSpace (double): The space between two consecutive dashes.
  • strokeWidth (double): The thickness of each dash in the separator.
  • dashColor (Color): The color of each dash in the separator.
  • padding (EdgeInsetsGeometry): Optional padding for the separator.
  DottedContainer(
      height: 100,
      width: 100,
      linePosition: LinePosition.bottom,
      shape: Shape.line,
      color: Colors.black,
      borderRadius: BorderRadius.circular(10),
      dash: [4, 4],
      strokeWidth: 1,
      child: Center(
        child: Text(
          'Dotted Container',
          style: TextStyle(fontSize: 16),
        ),
      ),
    ),

In this example, the DottedContainer widget is used to create a container with a dotted border. You can customize its appearance by adjusting the height, width, linePosition, shape, color, borderRadius, dash, strokeWidth, and child properties.

Parameters

  • height (double): The height of the container.
  • width (double): The width of the container.
  • linePosition (LinePosition): The position of the dotted line (top, bottom, left, right).
  • shape (Shape): The shape of the container (rectangle or circle).
  • color (Color): The color of the dotted line.
  • borderRadius (BorderRadius): The border radius of the container.
  • dash (List
  • strokeWidth (double): The width of the dotted line.
  • child (Widget): The child widget to be placed inside the container.
  • padding (EdgeInsetsGeometry): Optional padding for the container's content.
  • margin (EdgeInsetsGeometry): Optional margin for the container.

Compatibility

This package supports both Android and iOS devices.

Issues and Contributions

If you encounter any issues or would like to contribute to this package, please visit the GitHub repository for more information.

License

This package is released under the MIT License.