GitLocker: The Coding Marketplace

Description:

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.