hs_custom_bar

Pub

"hs_custom_bar" is a custom widget that implements a thermometer gauge bar.



Installing

In your pubspec.yaml

dependencies:
  hs_custom_bar: ^0.0.4

import 'package:hs_custom_bar/hs_custom_bar.dart';


Basic Usage

  TemperatureVerticalBar(10, 5),


Where to use

It can be used to show a certain mission or achievement rate. For example, complete 10 missions of the day gauge 5/10.

  • this is sample image. sample image


How to use

  1. Enter the maximum gauge number and the current gauge number. (necessary)
  • Enter the current gauge number not to exceed the maximum gauge number.

  1. The current achievement count is displayed on the right side of the gauge bar. (Optional) Usage: showCountView: true (defalut: false)

  2. For the gauge bar gradation color, input Color values from bottom to top and from left to right. (Optional, there is a default value.) Usage: gradientStartColor: Colors.blueAccent, gradientEndColor: Colors.yellowAccent,

  3. Adjustable gauge bar up and down, left and right length and round size (option)


Custom Usage

Properties Description
maxIndex Maximum value of gauge bar.
currentIndex Current value of gauge bar.
baseBgColor Default border and gauge ruler color around the gauge bar. (default: white).
gradientBottomColor or gradientStartColor Gauge bar gradient start color.
gradientTopColor or gradientEndColor Gauge bar gradient end color.
barWidth gauge bar thickness.
barHeight gauge bar height.
barPointCount number of gauge bar rulers.
showCountView Gauge bar maximum and minimum count display (marked position: lower right).

Sample code (Source Code)

Libraries

hs_custom_bar
sample/sample_code