Last updated:
0 purchases
segment display
Segment display widget #
Segment display widget for Flutter.
Supports multiple types of segment displays and segment customization.
Contents #
Features
Installation
Usage
Seven-segment display
Fourteen-segment display
Sixteen-segment display
Styles and customization
Segment style
Custom segment styles
Features and bugs
Features #
7-segment display
14-segment display
16-segment display
Customizable segment shapes (segment styles)
Supports . (decimal point) and : (colon) characters
See WEB DEMO.
Installation #
Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
segment_display: ^0.5.0
copied to clipboard
Install it
You can install packages from the command line:
$ flutter packages get
copied to clipboard
Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:segment_display/segment_display.dart';
copied to clipboard
Usage #
Seven-segment display #
CHARACTERS
Example:
SevenSegmentDisplay(
value: "123",
size: 12.0,
)
copied to clipboard
Fourteen-segment display #
CHARACTERS
Example:
FourteenSegmentDisplay(
value: "123",
size: 12.0,
)
copied to clipboard
Sixteen-segment display #
CHARACTERS
Example:
SixteenSegmentDisplay(
value: "123",
size: 12.0,
)
copied to clipboard
Styles and customization #
You can customize segment display with:
characterSpacing- space between individual characters
backgroundColor - display background color
segmentStyle - style for segments (shape, color,...), see segment style
Example:
SevenSegmentDisplay(
text: "123",
textSize: 12.0,
characterSpacing: 10.0,
backgroundColor: Colors.transparent,
segmentStyle: HexSegmentStyle(
enabledColor: Colors.red,
disabledColor: Colors.red.withOpacity(0.15),
),
)
copied to clipboard
Segment style #
To change segment color, size or shape, use segment style.
There are following segment styles:
DefaultSegmentStyle
HexSegmentStyle
RectSegmentStyle
and you can also create or own style (shape) - see custom segment styles
Example:
SevenSegmentDisplay(
value: "13:37",
size: 12.0,
segmentStyle: HexSegmentStyle(
enabledColor: const Color(0xFF00FF00),
disabledColor: const Color(0xFF00FF00).withOpacity(0.15),
segmentBaseSize: const Size(1.0, 2.0),
),
)
copied to clipboard
enabledColor - color of enabled segments
disabledColor - color of disabled segments
segmentBaseSize - size ratio for segments; Size(1.0, 2.0) basically means that ratio will be 1:2 (width:length)
NOTE: SegmentStyle.segmentBaseSize * SegmentDisplay.textSize = segmentSize
Custom segment styles #
To create your own segment style (shape), extends SegmentStyle class and implement methods
createHorizontalPath, createVerticalPath, createDiagonalBackwardPath and createDiagonalForwardPath.
class CustomSegmentStyle extends SegmentStyle {
const CustomSegmentStyle({
Size segmentBaseSize,
Color enabledColor,
Color disabledColor,
}) : super(
segmentBaseSize: segmentBaseSize,
enabledColor: enabledColor,
disabledColor: disabledColor,
);
@override
Path createHorizontalPath(SegmentPosition position, Size segmentSize) {
// ...
}
@override
Path createVerticalPath(SegmentPosition position, Size segmentSize) {
// ...
}
@override
Path createDiagonalBackwardPath(SegmentPosition position, Size segmentSize) {
// ...
}
@override
Path createDiagonalForwardPath(SegmentPosition position, Size segmentSize) {
// ...
}
}
copied to clipboard
You can also customize shape for individual segments by overriding createPath** methods.
For 7-segment display, there are createPath7* methods, for 14-segment display createPath14* and so on.
Example: if you want to change the shape of the top segment in 7-segment display, you just have to override createPath7A method.
class CustomSegmentStyle extends SegmentStyle {
// ..
@override
Path createPath7A(Size segmentSize, double padding) {
// ...
}
// ...
}
copied to clipboard
NOTE: createPath** methods use createHorizontalPath/createVerticalPath/createDiagonalBackwardPath/createDiagonalForwardPath by default so you don't have to override all createPath7* methods.
Features and bugs #
Please file feature requests and bugs at the issue tracker.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.