author author author GitHub

Flutter Digital Lcd Widget

Digital Lcd Style Widget For Numbers.

About

With this plugin you can create digital lcd style number widgets. Supports various phone sizes. Settings are available for a responsive design.

Usage

  1. Installing
  • Local
dependencies:
  digital_lcd:
    path: ../digital_lcd/
  • Package
dependencies:
  digital_lcd: ^1.0.1
  1. Import
import 'package:digital_lcd/digital_lcd.dart';
import 'package:digital_lcd/hex_color.dart';   //if you want use Hex Color codes this is required
  1. Example
Lcd(context).Number(
    number: 1837837, //Your number variable
    digitHorizontalMargin:8 ,//Each time this value is increased, the digits are shrinks. default 8
    digitCount:10, //Each time this value is increased, the digits are shrinks for width.
    lcdPadding: EdgeInsets.symmetric(horizontal:0),//this value only provides spaces to the left and right of the numbers. it also reduces proportionally the numbers
    lcdMargin: EdgeInsets.only(top:50),
    digitAlignment: MainAxisAlignment.center, //if you have extra width, use it for better ui
    lcdWidth: MediaQuery.of(context).size.width,// numbers automatically fit to width by count of digit. if you only use this value, the height of the lcd is automatically adjusted
    lcdHeight:110 , // you may need to use scaleFactor if you use this value.
    scaleFactor :MediaQuery.of(context).size.height < MediaQuery.of(context).size.width ? 0.38: 0.2,//if you use lcdHeight , set this value for better ui
    segmentWidth : 10,// Thickness of each segment default 10 , best value range 5-12
    lcdDecoration: BoxDecoration(  //This is default decoration . not required
                      gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [HexColor("#A2AC89"), HexColor("#ABAE75")]
                      )
                  ),
     activeColor: Colors.black87.withOpacity(0.6),  //This is default  . not required
     inactiveColor: Colors.black26.withOpacity(0.08),  //This is default  . not required
),

Screenshots

  • Horizontal
  • Vertical

Libraries

digit_clipper
digital_lcd
hex_color