dashed_outline 0.1.2 copy "dashed_outline: ^0.1.2" to clipboard
dashed_outline: ^0.1.2 copied to clipboard

A Flutter package to easily add dashed borders around widgets.

Here's the complete README.md file for your package with all the details included:

Dashed Outline #

A simple Flutter package that allows you to add dashed borders around any widget. Customize the border style, color, and dash pattern to create unique outlines for your UI elements.

Installation #

To add the dashed_outline package to your Flutter project, follow these steps:

  1. Open your pubspec.yaml file.
  2. Under dependencies:, add the following line:
dependencies:
  dashed_outline: ^0.0.1
  1. Run the following command in your terminal to install the package:
flutter pub get

Usage #

To use the DashedOutline widget, simply wrap any widget with it. You can customize the border's appearance by modifying the following parameters:

  • borderType: The type of border (rectangular, rounded rectangle, circle, or oval).
  • color: The color of the dashed border.
  • strokeWidth: The width of the dashed border lines.
  • radius: The radius of the border's corners (applies only to RRect).
  • dashPattern: The pattern of dashes and gaps, represented as a list of numbers.

Example #

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Dashed Outline Example")),
        body: Center(
          child: DashedOutline(
            borderType: BorderType.RRect,
            radius: 12, // Rounded corners
            dashPattern: [6, 3, 2, 3], // Dash pattern
            color: Colors.blue, // Border color
            strokeWidth: 2, // Border width
            child: Container(
              height: 150,
              width: 100,
              color: Colors.amber, // Container background color
            ),
          ),
        ),
      ),
    );
  }
}

Parameters #

Parameter Type Default Value Description
borderType BorderType BorderType.Rect Defines the border shape. Available options: Rect, RRect, Circle, Oval.
color Color Colors.black The color of the dashed border.
strokeWidth double 1.0 The width of the dashed border.
radius double 0.0 The radius for rounded corners (applies to RRect only).
dashPattern List<double> [5, 3] A list defining the dash pattern: lengths of dashes and gaps.

Border Types #

The package supports the following border types:

  • Rect: A basic rectangular border.
  • RRect: A rectangle with rounded corners. Use the radius parameter to set the corner radius.
  • Circle: A circular border.
  • Oval: An elliptical border.

Example Use Cases #

  • Rounded Rectangle Border:

    DashedOutline(
      borderType: BorderType.RRect,
      radius: 12,
      dashPattern: [8, 4, 2, 4],
      color: Colors.green,
      strokeWidth: 3,
      child: Container(
        height: 150,
        width: 150,
        color: Colors.amber,
      ),
    )
    
  • Circle Border:

    DashedOutline(
      borderType: BorderType.Circle,
      dashPattern: [5, 3],
      color: Colors.red,
      strokeWidth: 2,
      child: Container(
        height: 150,
        width: 150,
        color: Colors.blue,
      ),
    )
    
  • Oval Border:

    DashedOutline(
      borderType: BorderType.Oval,
      dashPattern: [7, 4],
      color: Colors.purple,
      strokeWidth: 2,
      child: Container(
        height: 150,
        width: 200,
        color: Colors.orange,
      ),
    )
    

License #

This package is licensed under the MIT License. See the LICENSE file for more information.


Feel free to customize the example above to suit your needs and create unique UI elements with dashed borders!


### Key Improvements:

1. **Detailed Description**: The description of the package is clear about its purpose—adding dashed borders around widgets.
2. **Installation Instructions**: Simple steps to install the package and get started.
3. **Usage Example**: A more detailed example of how to use the `DashedOutline` widget in various scenarios (rectangular, rounded, circle, and oval borders).
4. **Parameter Table**: An easy-to-read table that explains the available parameters for users to understand how they can customize their dashed borders.
5. **Border Types**: A section explaining the available border types with examples for each.
6. **Use Cases**: Added multiple example use cases to show different border styles.
7. **License Information**: Added a section for the license (MIT) and a link to the license file.

This README should make it easier for users to understand how to integrate the package into their projects and customize it to fit their needs.
11
likes
155
points
41
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter package to easily add dashed borders around widgets.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, path_drawing

More

Packages that depend on dashed_outline