If you’re new to Flutter, you may not have heard of or utilized the CustomPaint widget much. The Flutter CustomPaint Widget allows us to make a highly personalized user interface with interesting animations and this widget also offers you access to low-level graphics. In my most recent project, I was asked to create scrollable path between GridView children widgets. So, in this article, I’ll walk you through the steps I took to achieve this.

Step 1: Creating a GridView using “GridView.builder()”.

Create a class LevelsScreen extends StatefulWidget .In the Build method return the scaffold and add a GridView.builder() inside the body. Then create a List which we use to create Gridview using GridView.builder()

List<String> levels = [
    'Start',
    'Level-1',
    'Level-2',
    'Level-3',
    'Level-4',
    'Level-5'
  ];

Give the itemCount as the length of the list we just created. itemBuilder will return the circular containers on which we display the text from the list .

Step 2: Create a class “DashLinePainter” that extends “CustomPainter”.

Then we create a new class DashLinePainter that extends CustomPainter ,in which we define the Paint with the required color, strokeWidth and style .Later inside the paint method define the Path .

Step 3: Wrap “GridView.builder()” with “CustomPaint”.

To show the path between gridView children, we wrap the GridView.builder with CustomPaint and pass the painter as DashLinePainter.

CustomPaint(
     painter: DashLinePainter(),
     child: GridView.builder(<Code>),
  )

Step 4: Make the path scrollable .

Now to make the path scrollable along with the gridView children we need to wrap the customPaint with SingleChildScrollView and give any scroll physics .

SingleChildScrollView(
     physics: const BouncingScrollPhysics(),
     child: CustomPaint(
     painter: DashLinePainter(),
     child: GridView.builder(<code>),
    ),
  ),

Output:

You can get the complete code on GitHub ,and the GIF below demonstrates how scrollable path using CustomPaint works.

Conclusion:

I’ve discussed how to create scrollable path using CustomPaint in this article, and you can adapt this code to match your requirements. This was just a quick introduction to drawing scrollable paths using CustomPaint from my perspective, and how it works with Flutter. I hope that this blog has given you enough information to try out scrollable paths in Flutter in your own projects.

Links: Check out the articles below to learn more about Flutter CustomPaint.