Gradient Line Graph

GradientLineGraphWidget is a simple and customizable animated connecting button widget GradientLineGraphWidget

The source code is 100% Dart.

pub package License

Motivation

I need some animated graph in my Flutter application.

Getting started

Installing

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

This library is posted in pub.dev

pubspec.yaml

dependencies:  
	gradient_line_graph: ^1.0.0

Usage

After Importing this library, you can directly use this view in your Widget tree

import 'package:gradient_line_graph/gradient_line_graph.dart';
GradientLineGraphView(
                min: 0,
                max: 100,
                value: downloadRate,
                precentage: downloadProgress,
                color: Color(0xFF4cbdbb).withOpacity(0.7),
                duration: Duration(milliseconds: 0),
              )

Customization

Depending on your view you may want to tweak the UI. For now you can these custom attributes

PropertyTypeDescription
'min'doubleMinimum value to start graph line from
'max'doubleMaximum value (End point of graph line)
'value'doubleValue of the line points
'percentage'doubleLine graph progress percentage
'color'ColorColor of the line in line graph
'duration'doubleDuration of the animation
'gradient'doubleGradiant below the line in line graph
'lineThickness'doubleThickmedd of the line in line graph

Screenshots

Screenshot 2021-08-13 at 10 37 36 AM

Screen Recording 2021-08-13 at 11 19 31 AM

Author

  • Saurabh K Sharma - GIT

    I am very new to open source community. All suggestion and improvement are most welcomed.

Contributors

Sorabh/
Sorabh
Rohit
Rohit Kumar Mishra

Contributing

  1. Fork it (github.com/sorbh/gradient_line_graph/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Libraries

extension
gradient_line_graph