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

Property Type Description
'min' double Minimum value to start graph line from
'max' double Maximum value (End point of graph line)
'value' double Value of the line points
'percentage' double Line graph progress percentage
'color' Color Color of the line in line graph
'duration' double Duration of the animation
'gradient' double Gradiant below the line in line graph
'lineThickness' double Thickmedd 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