segment_display 0.6.0

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

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
  • 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,
)

Fourteen-segment display

CHARACTERS

Example:

FourteenSegmentDisplay(
  value: "123",
  size: 12.0,
)

Sixteen-segment display

CHARACTERS

Example:

SixteenSegmentDisplay(
  value: "123",
  size: 12.0,
)

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
  
• HexSegmentStyle
  
• 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),
  ),
)

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