Draw Graph In Flutter

A Dart Package To Draw Line Graphs In Your Flutter Apps

Shaiq khan
Apr 11 · 7 min read
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.

Table Of Contents ::

Draw Graph

Properties

Implementation

Code Implement

Code File

Conclusion

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: ^0.0.2

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.

Flutter Graph

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.

Swift Graph

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.

Final Output

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:

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.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Shaiq khan

Written by

Flutter Developer ll Blogger ll Content Writer😎

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store