Flutter – GridPaper Widget
Last Updated :
26 Apr, 2025
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article.
How to use it?
Dart
GridPaper(
color: Color.fromARGB(255, 60, 138, 62),
divisions: 2,
subdivisions: 2,
child: Container(
width: double .infinity,
height: double .infinity,
color: Color.fromARGB(255, 51, 248, 149),
),
),
|
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the material package
A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.
import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
In the above code, runApp method calls the class RunMyApp, Now we have to create it.
Step 3: Creating Stateless Widget
Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.
Shortcut for creating stateless or Stateful widget – You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp();
}
}
Step 4: Working with Scaffold Widget
Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.
home: Scaffold(
appBar: AppBar(
title: Text('Grid Paper'),
),
body:
),
Step 5: Now we can simply use the Grid Paper widget and assign its parameters. we can assign divisions, subdivisions, child.
body: GridPaper(
color: Color.fromARGB(255, 60, 138, 62),
divisions: 2,
subdivisions: 2,
child: Container(
width: double.infinity,
height: double.infinity,
color: Color.fromARGB(255, 51, 248, 149),
),
),
Final Code
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(RunMyApp());
}
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
theme: ThemeData(primarySwatch: Colors.green),
home: Scaffold(
appBar: AppBar(
title: Text( 'Grid Paper' ),
),
body: GridPaper(
color: Color.fromARGB(255, 60, 138, 62),
divisions: 2,
subdivisions: 2,
child: Container(
width: double .infinity,
height: double .infinity,
color: Color.fromARGB(255, 51, 248, 149),
),
),
),
);
}
}
|
Output:

Similar Reads
Flutter - Stepper Widget
In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. Stepper is generally used in filling forms online. For example, remember filling an online form for applying to any university or passport or driving license. We filled
8 min read
PageView Widget in Flutter
The PageView widget allows the user to transition between different screens in their flutter application. All you need to set it up are a PageViewController and a PageView. Constructor of PageView class:Syntax: PageView({Key key, Axis scrollDirection, bool reverse, PageController controller, ScrollP
3 min read
Flutter - Transform Widget
The Transform widget in Flutter is used to apply various transformations to its child widget, such as rotation, translation (positioning), scaling, and skewing. In this article, we are going to implement all transformations such as rotation, translation (positioning), scaling, and skewing made by th
6 min read
Flutter - SliverAppBar Widget
SliverAppBar is a Material Design widget in Flutter that gives a scrollable or collapsible app bar. The word Sliver is given to scrollable areas here. It allows us to create an app bar that can change appearance, blend in the background, or even disappear as we scroll. We already had AppBar widget i
5 min read
Flutter - Inherited Widget
If you are a flutter developer then you know how easy is to create Flutter UI. But when you have lots of widgets in your app and you want to pass data from one widget to another widget, this will be a pain for many developers,s especially for the newbie, this will be really hard for them to pass the
6 min read
Flutter - OctoImage Widget
The OctoImage widget in Flutter requires an ImageProvider to display images in an application. The images in the OctoImage widget can be supplied with a Progress indicator or a Place holder for loading the Image in it. An OctoImage widget makes use of the Octosets which are nothing but the combinati
4 min read
Flutter - Padding Widget
Padding widget in flutter does exactly what its name says, it adds padding or empty space around a widget or a bunch of widgets. We can apply padding around any widget by placing it as the child of the Padding widget. The size of the child widget inside padding is constrained by how much space is re
3 min read
Flutter - InkWell Widget
InkWell is the material widget in flutter. It responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of
2 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read
Flutter - GestureDetector Widget
A GestureDetector is a very useful Flutter widget that allows you to recognize and respond to various touch gestures, such as taps, swipe, double taps, drags, and more. It provides a way to make your Flutter app interactive and responsive to user input. In this article, we are going to implement and
4 min read