Segment display widget

Segment display

Pub CI Demo

Segment display widget for Flutter. Supports multiple types of segment displays and segment customization.

Contents

Features

  • 7-segment display
  • 14-segment display
  • 16-segment display
  • Customizable segment shapes (segment styles)
  • Supports . (decimal point) and : (colon) characters
  • Always-visible disabled decimal points (showDisabledDividers)
  • Custom character-to-bitmask entries (customCharacterMap)

See WEB DEMO.

Installation

  1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  segment_display: ^0.6.0
  1. Install it

You can install packages from the command line:

$ flutter pub get
  1. Import it

Now in your Dart code, you can use:

import 'package:segment_display/segment_display.dart';

Usage

Seven-segment display

CHARACTERS

Example:

SevenSegmentDisplay(
  value: "123",
  size: 12.0,
)
Seven-segment display

Fourteen-segment display

CHARACTERS

Example:

FourteenSegmentDisplay(
  value: "123",
  size: 12.0,
)
Fourteen-segment display

Sixteen-segment display

CHARACTERS

Example:

SixteenSegmentDisplay(
  value: "123",
  size: 12.0,
)
Sixteen-segment display

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
  • showDisabledDividers - always show a decimal point after each digit (dim unless . is present in value)
  • customCharacterMap - add or override character-to-bitmask entries

Example:

SevenSegmentDisplay(
  value: "123",
  size: 12.0,
  characterSpacing: 10.0,
  backgroundColor: Colors.transparent,
  segmentStyle: HexSegmentStyle(
    enabledColor: Colors.red,
    disabledColor: Colors.red.withValues(alpha: 0.15),
  ),
)

Disabled dividers

Set showDisabledDividers: true to always show a decimal point after each digit — dim when not in value, lit when . follows the character:

SevenSegmentDisplay(
  value: "12.3",
  size: 12.0,
  showDisabledDividers: true,  // dots visible after all digits
)

Custom character map

Use customCharacterMap to add characters not in the built-in map, or override existing ones, by supplying a char → bitmask map:

// 7-segment: bit 0 = G (middle), bit 6 = A (top), etc.
SevenSegmentDisplay(
  value: "~",
  size: 12.0,
  customCharacterMap: {'~': 0x63},
)

Segment style

To change segment color, size or shape, use segment style.

There are following segment styles:

  • DefaultSegmentStyle
    DefaultSegmentStyle
  • HexSegmentStyle
    HexSegmentStyle
  • RectSegmentStyle
    RectSegmentStyle

and you can also create your 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).withValues(alpha: 0.15),
    segmentBaseSize: const Size(1.0, 2.0),
  ),
)
Style example
  • 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.size = segmentSize

Custom segment styles

To create your own segment style (shape), extend SegmentStyle and implement createHorizontalPath, createVerticalPath, createDiagonalBackwardPath and createDiagonalForwardPath.

class CustomSegmentStyle extends SegmentStyle {

  const CustomSegmentStyle({
    super.segmentBaseSize,
    super.enabledColor,
    super.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) {
    // ...
  }
}

You can also customize the 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) {
    // ...
  }
  
  // ...
  
}

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.

Libraries

segment_display