dashed_outline 0.1.2
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:
- Open your
pubspec.yamlfile. - Under
dependencies:, add the following line:
dependencies:
dashed_outline: ^0.0.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 toRRect).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 theradiusparameter 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.