segment_display 0.2.0

Segment display widget #

Segment display

Pub

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)

Planned

  • Support for decimal point (.)
  • Support for colons (:)

Installation #

  1. Depend on it

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

dependencies:
  segment_display: ^0.2.0
  1. Install it

You can install packages from the command line:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

  1. Import it

Now in your Dart code, you can use:

import 'package:segment_display/segment_display.dart';

Usage #

Seven-segment display #

SevenSegmentDisplay(
  text: "123",
  textSize: 12.0,
);

Fourteen-segment display #

FourteenSegmentDisplay(
  text: "123",
  textSize: 12.0,
);

Sixteen-segment display #

SixteenSegmentDisplay(
  text: "123",
  textSize: 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

Example:

SevenSegmentDisplay(
  text: "123",
  textSize: 12.0,
  characterSpacing: 10.0,
  backgroundColor: Colors.transparent,
  segmentStyle: HexSegmentStyle(
    enabledColor: Colors.red,
    disabledColor: Colors.red.withOpacity(0.15),
  ),
);

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(
  text: "123",
  textSize: 12.0,
  segmentStyle: HexSegmentStyle(
    enabledColor: Colors.red,
    disabledColor: Colors.red.withOpacity(0.15),
    segmentBaseSize: const Size(1.0, 4.0),
  ),
);
  • enabledColor - color of enabled segments
  • disabledColor - color of disabled segments
  • segmentBaseSize - size ratio for segments; Size(1.0, 4.0) basically means that ratio will be 1:4 (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 RectSegmentStyle({
    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) {
    // ...
  }
}

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) {
    // ...
  }
  
  // ...
  
}

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.

[0.2.0]

  • added sixteen-segment display
  • updated segment styles for sixteen-segment display
  • updated HexSegmentStyle diagonals

[0.1.0]

  • initial release
  • added seven-segment and fourteen-segment display
  • added DefaultSegmentStyle, HexSegmentStyle and RectSegmentStyle

example/README.md

Segment display example #

Use this package as a library

1. Depend on it

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


dependencies:
  segment_display: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:segment_display/segment_display.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
27
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
64
Learn more about scoring.

We analyzed this package on Jul 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/src/display/sixteen_segment_display.dart.

Run flutter format to format lib/src/display/sixteen_segment_display.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
pedantic ^1.5.0

Admin