janstol/flutter_segment_display

Segment display widget

Segment display

Pub CI Demo

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
  • Disabled dividers
  • Custom character map
  • 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
• 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

2. Install it

You can install packages from the command line:

$ flutter pub get

3. 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.