Flutter - GridPaper Widget

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?

GridPaper(
         color: Color.fromARGB(255, 60, 138, 62), // grid lines color
         divisions: 2, // divisions of the grid
         subdivisions: 2, // subdivisions of the grid.
         child: Container(
           width: double.infinity,
           height: double.infinity,
           color: Color.fromARGB(255, 51, 248, 149), // background color of grids.
      ),
  ),

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

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: