dashed_outline 0.0.3
dashed_outline: ^0.0.3 copied to clipboard
A Flutter package to easily add dashed borders around widgets.
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:
bash
Copy
Edit
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
dart
Copy
Edit
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:
dart
Copy
Edit
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:
dart
Copy
Edit
DashedOutline(
borderType: BorderType.Circle,
dashPattern: [5, 3],
color: Colors.red,
strokeWidth: 2,
child: Container(
height: 150,
width: 150,
color: Colors.blue,
),
)
Oval Border:
dart
Copy
Edit
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!
markdown
Copy
Edit
### 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.