wx_divider

Description:

wx divider

A widget that displays a divider with a configurable style, pattern, and child. It can be
horizontal or vertical, with a solid, dotted, dashed, or Morse code-like pattern.
You can also customize the color, thickness, and number of lines.

Demo
Features #

Orientation: The divider can be displayed horizontally or vertically by setting the direction property to Axis.horizontal or Axis.vertical, respectively.
Line Pattern: Control the line pattern using the pattern property. Supported options include:

WxDivider.solid (default)
WxDivider.dashed
WxDivider.dotted
WxDivider.morse (predefined morse code pattern)
Provide a custom array for creating custom patterns, example <double>[2,1,3].


Thickness: Set the thickness of the divider line using the thickness property.
Color and Gradient: Customize the color of the divider line using the color property. You can also define a gradient for the line using the gradient property.
Multiple Lines: Create dividers with multiple lines using the lines property to specify the number of lines and the spacing property to control the space between lines.
Indentation: Indent the divider from the start using the indent property.
Child and Alignment: Include a child widget within the divider using the child property. The align property allows you to position the child widget within the divider (start, center, end).
Customization Callback: The onPaint callback provides access to the Paint object before it's used to draw the divider. This allows for advanced customization of the divider's appearance.

Usage #
To delve deeper into the technical details of wx_divider's classes, methods, and properties, please refer to the official API Reference.
import 'package:wx_divider/wx_divider.dart';

// Horizontal divider with dashed line pattern
WxDivider(
direction: Axis.horizontal,
pattern: WxDivider.dashed,
color: Colors.grey,
thickness: 2.0,
lines: 2,
spacing: 5.0,
child: Text('My Text'),
align: WxDividerAlign.center,
);

// Vertical divider with custom color and gradient
WxDivider(
direction: Axis.vertical,
thickness: 1.0,
color: Colors.blue,
gradient: LinearGradient(
colors: [Colors.blue, Colors.lightBlue],
),
onPaint: (paint, rect) {
// Modify paint object for custom effects
},
);
copied to clipboard
WxDividerAlign: #
This enum defines the possible alignments for the child widget relative to the WxDivider. It consists of the following options:

start: Aligns the child widget at the beginning of the divider (left for horizontal, top for vertical).
center: Aligns the child widget in the center of the divider.
end: Aligns the child widget at the end of the divider (right for horizontal, bottom for vertical).

Sponsoring #


If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.