Draw Graph In Flutter
The Flutter Line Graph is shown and imagines time-subordinate information to show the patterns at equivalent spans. It upholds the numeric, classification, date-time, or logarithmic axis of a graph. You can make a delightful, enlivened, continuous, and a superior line graph that additionally upholds intuitive highlights like selection, plot diverse informational sets, and so on.
In this article, we will explore the Draw Graph In Flutter. We will implement a draw line graphs demo program and use multiple axes to plot different data sets that widely vary from one other using the draw_graph package in your flutter applications.
draw_graph | Flutter Package
A dart package to draw line graphs in your flutter app.pub.dev
Table Of Contents::
Draw Graph
It has a widget that draws a line graph for you. A line graph is a sort of chart used to show data that changes over the long haul. We plot line graphs utilizing a few focuses associated with straight lines. We additionally consider it a line graph. The line graph involves two axes known as the ‘X’ axis and ‘Y’ axis. The horizontal axis is known as the x-axis. Would you like to show a graph in your application?. This package can help.
Demo Module :
This demo video shows how to draw a line graph in a flutter. It shows how the line graph will work using the draw_graph package in your flutter applications. It shows multiple axes to plot different data sets on one line graph, and also, we will split all line graph to proper show. It also tracks your work in one line graph. It will be shown on your device.
Properties:
- > features: This property is used for a list of features to be shown in the graph.
- > labelX: This property has been used for a list of X-Axis Labels. This will determine and the number of cells to distribute your data in and the width of your cells.
- > labelY: This property is used for a list of Y-Axis Labels. The labels will be distributed on Y-Axis and determine the height of cells.
- > size: This property is used required. This will determine the size of your graph. Height will be size is 50 in the case when the description is shown.
- > showDescription: This property is used for whether to show description at the end of the graph.
- > fontFamily: This property is used for labels and descriptions of features.
- > graphColor: This property is used for the color of your axis and labels.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
draw_graph:
Step 2: Import
import 'package:draw_graph/draw_graph.dart';
import 'package:draw_graph/models/feature.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called graph_screen.dart inside the lib folder.
In the body, we will add LineGraph() Widget. In this widget, we will add features that mean a detailed description of the Feature class below. We will add the size of the x-axis and y-axis. This will determine the size of your graph. We will add labelX means the number of cells to distribute your data according to your cells’ width. We will add six data.
LineGraph(
features: features,
size: Size(420, 450),
labelX: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
labelY: ['25%', '45%', '65%', '75%', '85%', '100%'],
showDescription: true,
graphColor: Colors.black87,
),
Now, we will add labelY means determine the height of cells. We will add six percent data. We will add showDescription and graphColor.
We will deeply describe features
First, we will import the package.
import 'package:draw_graph/models/feature.dart';
We will create a list of feature
final List<Feature> features = [...]
We will create five features of the line graph. We will add Feature(). Inside, we will add a title, color, and data. Data is distributed in our data and the width of your cells.
Feature(
title: "Flutter",
color: Colors.blue,
data: [0.3, 0.6, 0.8, 0.9, 1, 1.2],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
When we click on flutter, they will show a flutter line graph according to percentage and days data.
Feature(
title: "Swift",
color: Colors.green,
data: [0.25, 0.6, 1, 0.5, 0.8, 1,4],
),
In this graph, the title was swift programming, color was green, and data was set with different axes to plot. When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will show a graph. The data was decreasing to increase with the x-axis and y-axis. When we click the swift button again, we will show us all five graphs on one graph. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:draw_graph/draw_graph.dart';
import 'package:draw_graph/models/feature.dart';
import 'package:flutter/material.dart';
class GraphScreen extends StatefulWidget {
@override
_GraphScreenState createState() => _GraphScreenState();
}
class _GraphScreenState extends State<GraphScreen> {
final List<Feature> features = [
Feature(
title: "Flutter",
color: Colors.blue,
data: [0.3, 0.6, 0.8, 0.9, 1, 1.2],
),
Feature(
title: "Kotlin",
color: Colors.black,
data: [1, 0.8, 0.6, 0.7, 0.3, 0.1],
),
Feature(
title: "Java",
color: Colors.orange,
data: [0.4, 0.2, 0.9, 0.5, 0.6, 0.4],
),
Feature(
title: "React Native",
color: Colors.red,
data: [0.5, 0.2, 0, 0.3, 1, 1.3],
),
Feature(
title: "Swift",
color: Colors.green,
data: [0.25, 0.6, 1, 0.5, 0.8, 1,4],
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white54,
appBar: AppBar(
title: Text("Flutter Draw Graph Demo"),
automaticallyImplyLeading: false,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 64.0),
child: Text(
"Tasks Management",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
letterSpacing: 2,
),
),
),
LineGraph(
features: features,
size: Size(420, 450),
labelX: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
labelY: ['25%', '45%', '65%', '75%', '85%', '100%'],
showDescription: true,
graphColor: Colors.black87,
),
SizedBox(
height: 50,
)
],
),
);
}
}
Conclusion:
In the article, I have explained the Draw Graph of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Draw Graph On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Draw Graph in your flutter projects. We will show you what the Draw Graph is?. Show some draw graph properties, make a demo program for working draw graph, and show multiple axes to plot different data sets on one line graph and also we will split all line graph to proper show. It also tracks your work in one line graph using the draw_graph package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Draw Graph Demo:
flutter-devs/flutter_draw_graph_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
