DEV Community: Oranekwu Gabriel Ekene

THE GLOBE

Oranekwu Gabriel Ekene — Mon, 30 Mar 2026 13:51:54 +0000

I first saw this idea in a post by Samuel Abada on Twitter, and it immediately made me want to build my own version in Flutter. cobe_flutter is my recreation of that experience, and the name “Cobe” is kept as a credit to the original creator.

This article is going to touch on how I was able to recreate the “Globe”. I also made it into a reuseable Flutter package. Think of it like an actual globe, built from Math, painted in Flutter and exposed as a package that people can use.

This article is about how I approached it:

how the globe is modeled mathematically
how land dots are sampled
how markers and arcs are projected
how the widget stays interactive
how I debugged a fun little bug

What I Was Actually Building

The package API is intentionally small:

CobeGlobe is the widget
CobeController owns mutable globe state
CobeOptions stores render configuration
CobeMarker and CobeArc describe things living on the globe.

The internal structure is simple too:

Generate a bunch of points on a sphere.
Decide which of those points are “land”.
Rotate those points based on the camera angles.
Project the visible ones to 2D.
Paint them.

That is the whole trick!

The Real Shape of the Problem

If you try to draw a globe by placing points on latitude/longitude lines, you get clustering near the poles. It looks wrong fast. This is one of those cases where math saves you from your own optimism.

I needed points spread fairly evenly across the sphere surface, so I used the Fibonacci sphere approach in both samplers.

final y = 1 - ((index + 0.5) * 2 / samples);
final radius = math.sqrt(math.max(0, 1 - (y * y)));
final theta = dLong * index;
final point = GlobePoint( math.cos(theta) * radius, y, math.sin(theta) * radius);

This gives us a point on the unit sphere.

Why it works:

y walks from near 1 to near -1
for each y, the horizontal cross-section radius is sqrt(1 - y²)
theta advances by the golden-angle-related increment
the irrational angular step avoids obvious banding

That dLong value is:

math.pi * (3 - math.sqrt(5))

That expression is tied to the golden ratio. The result is a spacing pattern that is cheap, elegant, and very hard to beat when you just want “lots of points distributed nicely on a sphere”.

The Sphere Model

The foundational 3D type is GlobePoint

class GlobePoint {
  const GlobePoint(this.x, this.y, this.z);

  final double x;
  final double y;
  final double z;
}

Then it gets a few vector operations:

scale
+
-
length
normalized

That keeps the rest of the globe code readable. Once a 3D point type exists, rotations, arc midpoints, and projections become relatively easy.

From Latitude/Longitude to 3D

Markers and arcs begin as geographic coordinates:

latitude in degrees
longitude in degrees

GlobePoint _latLonTo3D(CobeLocation location) {
  final latRad = location.latitude * math.pi / 180;
  final lonRad = (location.longitude * math.pi / 180) - math.pi;
  final cosLat = math.cos(latRad);
  return GlobePoint(
    -cosLat * math.cos(lonRad),
    math.sin(latRad),
    cosLat * math.sin(lonRad),
  );
}

Let’s unpack that.

Given latitude φ and longitude λ, the classic sphere mapping is:

x = cos(φ) cos(λ)
y = sin(φ)
z = cos(φ) sin(λ)

Rotating the Globe

The globe’s orientation is controlled by phi and theta in CobeOptions.

GlobePoint _applyRotation(GlobePoint point, CobeOptions options) {
  final cx = math.cos(options.theta);
  final cy = math.cos(options.phi);
  final sx = math.sin(options.theta);
  final sy = math.sin(options.phi);

  return GlobePoint(
    (cy * point.x) + (sy * point.z),
    (sy * sx * point.x) + (cx * point.y) - (cy * sx * point.z),
    (-sy * cx * point.x) + (sx * point.y) + (cy * cx * point.z),
  );
}

This is effectively a composed rotation.

Conceptually:

phi controls horizontal spin around the globe
theta controls tilt

The code is the matrix multiplication written out explicitly. This avoids creating temporary matrix objects and keeps rendering tight.

From 3D Back to 2D

Once a point has been rotated, it still has to be painted on a flat canvas, because screens remain stubbornly two-dimensional.

The package uses a straightforward orthographic-style projection:

Offset(
  center.dx + (rotated.x * scaleFactor),
  center.dy - (rotated.y * scaleFactor),
)

That means:

horizontal screen position comes from x
vertical screen position comes from y
z is used for visibility/depth decisions

This is an important design choice.

I did not want heavy perspective distortion. COBE-style globes look good partly because they read as clean, graphic, and calm. Orthographic projection fits that look better than aggressive perspective.

The z value still matters, though. It determines whether a point is on the front hemisphere:

if (rotated.z <= 0) {
  continue;
}

That is how land dots on the back side of the globe politely avoid ruining the illusion.

The Painter Pipeline

Rendering happens inside _CobeGlobePainter in lib/src/cobe_globe.dart.

The paint order is deliberate:

glow
ocean
land dots
arcs
markers

That ordering does a lot of visual work.

If you paint in the wrong order:

the globe loses depth
markers look pasted on
arcs feel detached
glow becomes mud

The land itself is not a filled shape. It is a cloud of visible points on the front hemisphere. That was an aesthetic choice, but also a practical one: the dotted look is part of the package identity.

Two Ways to Decide What Counts as Land

This package has two samplers:

GeoJsonMapSampler
MapSampler

They answer the same question:

“Given a point on the sphere, is this land?”, but they answer it very differently.

1. GeoJSON Sampler

I load polygon data from countries.geojson.

The process is:

parse GeoJSON
convert polygon rings into internal point lists
convert each sphere point into latitude/longitude
test whether that geographic point lies inside a polygon

The polygon containment uses a ray-casting style algorithm:

final intersects =
    ((yi > point.lat) != (yj > point.lat)) &&
    (point.lon <
        ((xj - xi) * (point.lat - yi) / ((yj - yi) + 1e-12)) + xi);
if (intersects) {
  inside = !inside;
}

This approach is geometrically meaningful and usually closer to “truth”, but it is more computationally expensive than sampling a raster mask.

2. Image Sampler

The land test comes from a texture:

final asset = await rootBundle.load(
  'packages/cobe_flutter/assets/texture.png',
);

That texture is a grayscale mask. A point on the globe is converted into UV coordinates, then a pixel is sampled.

The mapping looks like this:

final phi = math.asin(point.y);
final theta = math.atan2(point.z, -point.x);
final u = (((theta * 0.5) / math.pi) % 1 + 1) % 1;
final v = (((-((phi / math.pi) + 0.5)) % 1) + 1) % 1;

This is effectively spherical UV mapping:

theta maps around the equator
phi maps from north pole to south pole
u and v are normalized into [0, 1]

Then the code samples a pixel:

final px = (u * (texture.width - 1)).round();
final py = (v * (texture.height - 1)).round();
final index = ((py * texture.width) + px) * 4;
return texture.bytes[index] / 255;

And that value is used as a land mask.

This method is simple and fast. It is also more fragile:

texture resolution matters
threshold choice matters
UV orientation matters
raster edges are never as precise as polygon boundaries

The Bug

At one point, the GeoJSON sampler looked correct, but the image sampler looked reversed:

land was sparse or clear
water was getting the dots

Which is a terrible feature unless you are building a globe for fish.

The bug was in lib/src/map_sampler.dart, specifically this classification:

if (_sampleMap(texture, point) < 0.5) {
  points.add(point);
}

That meant dark pixels were being treated as land.

But for the actual mask I was using, the intended semantics were the reverse: bright pixels corresponded to land.

So the fix was:

if (_sampleMap(texture, point) >= 0.5) {
  points.add(point);
}

Why the Two Samplers Are Similar, Not Equal

One natural question is:

“If both samplers are trying to detect land, shouldn’t they return the same points?”

No. They should be similar enough visually, but not identical.

Why:

GeoJsonMapSampler uses polygon containment
MapSampler uses a raster texture

So the right expectation is:

same broad land/water orientation
comparable land coverage
visually consistent output

Not:

exact point-for-point equality

Markers, Arcs, and Overlay Projections

The globe is not just dots. It also supports markers, arcs, and overlay UI.

That meant I needed a way to project world-space entities into screen-space data that other widgets could use.

This is modeled by GlobeProjection and GlobeSceneData in lib/src/cobe_models.dart.

CobeGlobe computes these projections during build and passes them to overlayBuilder.

That is useful because it separates:

paint-time globe rendering
regular Flutter widget overlays

This is the kind of boundary I like. The globe painter can stay focused on canvas work, while overlays remain ordinary widgets that can show labels, cards, annotations, and whatever other chaos product requirements invent next Tuesday.

Controller-Driven State

class CobeController extends ChangeNotifier {
  CobeController(this._options);

  CobeOptions _options;

  CobeOptions get options => _options;

  void update(CobeOptionsPatch patch) {
    _options = _options.merge(patch);
    notifyListeners();
  }

  void replace(CobeOptions next) {
    _options = next;
    notifyListeners();
  }
}

I wanted:

easy animation updates
easy user drag updates
minimal public API complexity

The widget listens to the controller and repaints when options change. That gives a nice “reactive enough” model without dragging in extra state machinery.

Auto-Rotation and Dragging

CobeGlobe uses a Ticker for auto-rotation and GestureDetector for dragging.

The auto-rotation logic is based on elapsed time deltas:

final deltaSeconds =
    (elapsed - lastTick).inMicroseconds / Duration.microsecondsPerSecond;

widget.controller.update(
  CobeOptionsPatch(
    phi: widget.controller.options.phi +
        (widget.autoRotateSpeed * deltaSeconds),
  ),
);

This matters because animation should be time-based, not frame-count-based. Otherwise different devices rotate the globe at different speeds.

Dragging updates:

phi from horizontal pointer movement
theta from vertical pointer movement

with sensible clamping on tilt:

.clamp(-math.pi / 2, math.pi / 2)

Testing the Package

I also added package-level tests for:

controller updates
options merging and copying
vector math
widget behavior
sampler behavior

The test suite lives in the test folder.

Package Information

Package Name: cobe_flutter
GitHub Repository: https://github.com/gabbygreat/cobe_flutter

Happy coding!

Cache Me If You Can: Custom Dio Interceptors Made Simple

Oranekwu Gabriel Ekene — Sat, 10 May 2025 22:35:55 +0000

"Nawa ooo, this thing is taking really long 😪"; I heard this statement last week from a frustrated user who was using a certain app.

In modern mobile applications, managing API requests efficiently is crucial for providing a smooth user experience. Network requests are often slow and battery-intensive, and users may find themselves in situations with poor connectivity. This is where implementing a proper caching strategy becomes essential.

In this article, we'll explore how to build a custom caching interceptor for the popular Dio HTTP client in Flutter. Our solution will allow for flexible cache durations and seamless fallback to cached data when needed.

## The Problem

Consider these common scenarios in mobile apps:

A user opens your app in an area with poor connectivity
Your backend service experiences temporary downtime
You want to reduce unnecessary API calls for data that changes infrequently
You need to optimize battery usage by minimizing network operations

Without caching, each of these scenarios leads to a degraded user experience. Users might see endless loading indicators, error messages, or stale data.

## Enter the Caching Interceptor

Dio, one of the most popular HTTP clients for Flutter, provides an elegant way to intercept and modify requests and responses through its interceptor system. We can leverage this to implement a robust caching mechanism.

Here's our custom CacheInterceptor implementation:

import 'dart:convert';
import 'package:dio/dio.dart';
import 'storage_interface.dart';

class CacheInterceptor implements Interceptor {
  final CacheStorage storage;
  final String dataKey = 'data';
  final String timeStampKey = 'timestamp';

  CacheInterceptor(this.storage);

  Future<Response?> _getCachedResponse(
    RequestOptions options, {
    required Duration duration,
  }) async {
    try {
      final cacheKey = '${options.uri}';
      final cacheEntry = await storage.get(cacheKey);
      if (cacheEntry == null) return null;

      final Map<String, dynamic> decodedCache = jsonDecode(cacheEntry);
      final cachedTime = DateTime.tryParse(decodedCache[timeStampKey]);
      if (cachedTime == null) return null;

      final timeInterval = DateTime.now().difference(cachedTime);
      if (timeInterval > duration) {
        await storage.remove(cacheKey);
        return null;
      }

      return Response(
        requestOptions: options,
        data: decodedCache[dataKey],
        statusCode: 200,
      );
    } catch (_) {
      return null;
    }
  }

  Future<void> _saveResponseToCache(Response response) async {
    final cacheKey = '${response.realUri}';
    final cacheEntry = jsonEncode({
      dataKey: response.data,
      timeStampKey: DateTime.now().toIso8601String(),
    });
    await storage.set(cacheKey, cacheEntry);
  }

  @override
  void onRequest(
    RequestOptions options,
    RequestInterceptorHandler handler,
  ) async {
    final durationResolver = options.headers['X-Cache-Duration'];
    if (durationResolver is Duration) {
      // Skip cache completely if Duration is zero
      if (durationResolver == Duration.zero) {
        return handler.next(options);
      }
      final cached = await _getCachedResponse(
        options,
        duration: durationResolver,
      );
      if (cached != null) {
        return handler.resolve(cached);
      }
    }
    handler.next(options);
  }

  @override
  void onResponse(
    Response response,
    ResponseInterceptorHandler handler,
  ) async {
    await _saveResponseToCache(response);
    handler.next(response);
  }

  @override
  void onError(DioException err, ErrorInterceptorHandler handler) {
    handler.next(err);
  }
}

## How It Works

Let's break down how this interceptor handles caching:

1. Storage Abstraction

First, we inject a CacheStorage interface, making our interceptor independent of the actual storage implementation. This means you can use anything from shared preferences to a local database:

CacheInterceptor(this.storage);

The CacheStorage interface might look something like:

abstract class CacheStorage {
  Future<String?> get(String key);
  Future<void> set(String key, String value);
  Future<void> remove(String key);
}

2. Cache Key Generation

For each request, we create a unique key based on the URI:

final cacheKey = '${options.uri}';

In more complex scenarios, you might want to include query parameters, headers, or request method in the key generation.

3. Request Interception

The magic happens in the onRequest method:

void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
  final durationResolver = options.headers['X-Cache-Duration'];
  if (durationResolver is Duration) {
    // Skip cache completely if Duration is zero
    if (durationResolver == Duration.zero) {
      return handler.next(options);
    }
    final cached = await _getCachedResponse(
      options,
      duration: durationResolver,
    );
    if (cached != null) {
      return handler.resolve(cached);
    }
  }
  handler.next(options);
}

We check if the request includes a custom header X-Cache-Duration specifying how long cached data should be considered valid. If we find valid cached data within that duration, we immediately resolve the request with the cached response, bypassing the network call entirely.

4. Response Caching

When a response is received, we cache it for future use:

void onResponse(Response response, ResponseInterceptorHandler handler) async {
  await _saveResponseToCache(response);
  handler.next(response);
}

The response is stored with the current timestamp, which we'll use later to determine if the cache is still valid.

5. Cache Validation and Expiry

Before serving cached data, we validate it:

final timeInterval = DateTime.now().difference(cachedTime);
if (timeInterval > duration) {
  await storage.remove(cacheKey);
  return null;
}

If the cache has expired, we remove the old entry and proceed with a network request.

Using the Interceptor

Integrating this interceptor with your Dio instance is straightforward:

final dio = Dio();
final cacheStorage = SharedPreferencesCacheStorage(); // Your implementation
dio.interceptors.add(CacheInterceptor(cacheStorage));

Now, any API call can specify its cache duration through a custom header:

// Cache for 1 hour
final response = await dio.get(
  'https://api.example.com/data',
  options: Options(
    headers: {'X-Cache-Duration': Duration(hours: 1)},
  ),
);

// Bypass cache - always fetch fresh data
final freshResponse = await dio.get(
  'https://api.example.com/data',
  options: Options(
    headers: {'X-Cache-Duration': Duration.zero},
  ),
);

Implementing the Storage Backend

You'll need to create a concrete implementation of the CacheStorage interface. Here's a simple example using shared preferences:

import 'package:shared_preferences/shared_preferences.dart';
import 'storage_interface.dart';

class SharedPreferencesCacheStorage implements CacheStorage {
  @override
  Future<String?> get(String key) async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString(key);
  }

  @override
  Future<void> set(String key, String value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(key, value);
  }

  @override
  Future<void> remove(String key) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove(key);
  }
}

For larger responses, you might want to use a solution like Hive or SQLite instead.

Advanced Features

This basic implementation can be extended with several advanced features:

1. Cache Invalidation Patterns

You could add methods to invalidate cache by pattern:

Future<void> invalidateCache(Pattern pattern) async {
  // Implementation to remove all cache entries matching the pattern
}

2. Cache-Control Headers Support

Support standard HTTP cache-control headers:

final cacheControl = response.headers['cache-control'];
// Parse and apply cache control directives

3. Offline-First Strategy

Automatically serve cached responses when offline:

if (await connectivityService.isOffline()) {
  final cached = await _getCachedResponseIgnoringExpiry(options);
  if (cached != null) {
    return handler.resolve(cached);
  }
}

4. Cache Compression

For large responses, consider compressing the cached data:

final compressed = GZipCodec().encode(utf8.encode(cacheEntry));
// Store compressed data

Common Pitfalls

While implementing caching, be aware of these potential issues:

Cache Bloat: Without proper management, your cache can grow indefinitely. Consider adding size limits or periodic cleanup.
Security Concerns: Avoid caching sensitive data like authentication tokens or personal information.
Stale Data: Balance between fresh data and performance. Critical features might need fresher data than less important ones.
Memory Usage: Large responses cached in memory can cause OOM errors. Use persistent storage instead.

Conclusion

A well-implemented caching strategy can dramatically improve your app's performance and user experience. This custom Dio interceptor provides a flexible foundation that you can adapt to your specific needs.

By intelligently caching API responses, your app can:

Load faster
Work better in poor network conditions
Reduce server load
Save battery life
Provide a more responsive UI

Remember that caching is a trade-off between freshness and performance. The right balance depends on your specific application requirements and data characteristics.

What caching strategies have you implemented in your Flutter apps? Share your experiences in the comments below!

In this article, we've explored how to build a custom caching interceptor for the popular Dio HTTP client in Flutter. Our solution allows for flexible cache durations and seamless fallback to cached data when needed.

The code we discussed has been packaged and published for easy use in your projects. You can find it here:

Package Information

Package Name: simple_dio_cache_interceptor
GitHub Repository: https://github.com/gabbygreat/simple_dio_cache_interceptor

Installation

Add the package to your pubspec.yaml:

dependencies:
  simple_dio_cache_interceptor: ^latest_version

Check out the package for detailed usage instructions and examples. It provides a simple yet powerful solution for all your API caching needs in Flutter applications.

Happy coding!

Number input on Flutter TextFields the RIGHT way!

Oranekwu Gabriel Ekene — Sun, 26 May 2024 05:48:29 +0000

Eureka!

That was my expression a few days ago, when I found the perfect algorithm to XYZ. You should have seen the excitement on my face, I couldn't wait for the weekend to finally share the experience 😁.

Since Flutter is used to develop Iphone and Android applications (two different platforms -> with two different keypads), I'll explain my thoughts clearly with images from an Emulator (Android) and a Simulator (iOS).

Let's dive in ...

NUMBER INPUT ON FLUTTER TEXTFIELD

In Flutter, when we want to collect number inputs from users, we set the keyboardType property of a TextField widget to TextInputType.number

Once you do this, you're simply asking the device's keyboard to display it's number display.

From the two images above, we are able to collect what we need, right? and, it's largely sufficient, right?

Most Flutter developers will stop at doing this. However, this article aims to expose the RIGHT WAY!

While the above code is enough to collect a user's age, it's not entirely good user experience, because, on a Platform like Android, user's will be able to type hyphens, commas, blank spaces and period (This particular concern will not be an issue on iOS, however, we are coming to that).

What we can do is; Use the inputFormatters property of a TextField object to filter for just numbers. This ensures we constrain our inputs to DIGITS only.

DECIMAL INPUT ON FLUTTER TEXTFIELD

While the above solutions does exactly what we want, it is important I point out that, this is recommended if you're collecting just WHOLE NUMBERS from the user, a typical example being an age. If we are collecting decimals, say, a person's weight, we need to go through another path. Because, our first constraint does not allow period(decimals).

While this seems like a very nice approach, we are faced with a challenge, users are able to type a period more than once 😱, and we don't want that, AT ALL!

We need to find a way to stop users from entering a period more than once, luckily, the inputFormatters takes a List of TextInputFormatter, we can create our own custom TextInputFormatter.

class SinglePeriodEnforcer extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    final newText = newValue.text;
    // Allow only one period
    if ('.'.allMatches(newText).length <= 1) {
      return newValue;
    }
    return oldValue;
  }
}

Awesome, there's yet another issue, and that is with Iphones, our current keyboardType doesn't show a period on Iphones, remember the purpose of a cross-platform framework like Flutter is to write once and deploy everywhere.

Our solution would be to change the keyboard type to TextInputType.numberWithOptions and set the decimal parameter to true. This will ensure the period key appears at the bottom left.

You can explore the signed property of the TextInputType.numberWithOptions.

FORMAT LIKE A PRO 😎

While the two solutions above are largely sufficient for the kind of data we intend to collect from the user, I want to take the TextInputFormatter up a notch; that is where the "Aha" moment came, the "XYZ" solution.

The Challenge

When we want to collect information, such as an amount from a user, solution 2 above will be very nice, since the user is allowed to type decimals, however, I want to seperate the digits entered with "commas" automatically, without the user needing to do anything. This approach, I believe is very intuitive, it helps users visualise whatever amount they are entering, since it's comma seperated.

The Solution

For this solution, we need the intl package. Just include it in your pubspec.yaml file.

import 'package:intl/intl.dart';
import 'package:flutter/services.dart';

class ThousandsSeparatorInputFormatter extends TextInputFormatter {
  // Setup a formatter that supports both commas for thousands and decimals
  final formatter = NumberFormat("#,##0.###");

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.isEmpty) {
      return newValue;
    }
    // Remove commas to check the new input and for parsing
    final newText = newValue.text.replaceAll(',', '');
    // Try parsing the input as a double
    final num? newTextAsNum = num.tryParse(newText);

    if (newTextAsNum == null) {
      return oldValue; // Return old value if new value is not a number
    }

    // Split the input into whole number and decimal parts
    final parts = newText.split('.');
    if (parts.length > 1) {
      // If there's a decimal part, format accordingly
      final integerPart = int.tryParse(parts[0]) ?? 0;
      final decimalPart = parts[1];
      // Handle edge case where decimal part is present but empty (user just typed the dot)
      final formattedText = '${formatter.format(integerPart)}.$decimalPart';
      return TextEditingValue(
        text: formattedText,
        selection: updateCursorPosition(formattedText),
      );
    } else {
      // No decimal part, format the whole number
      final newFormattedText = formatter.format(newTextAsNum);
      return TextEditingValue(
        text: newFormattedText,
        selection: updateCursorPosition(newFormattedText),
      );
    }
  }

  TextSelection updateCursorPosition(String text) {
    return TextSelection.collapsed(offset: text.length);
  }
}

Then, we use it, like so:

We end up with something like this, a nicely formatted text input filter for collecting information, such as an amount

However 😩, we have one more tiny thing to fix, the value collected from the field has a "comma", we need to do away with that (We cannot be sending values with commas to the backend), you can create a function to strip the comma off, or you create an extension. I prefer the later though (Just a personal preference).

So, let's go ahead and create an extension on String

You just need to use it whereever you are collecting the value from the Field.

Here, I used the extension on the onChanged parameter of a TextField.

It's also important to note that; all the solutions we did works just as well on a TextFormField.

If you have any questions related to this article, you can leave them in the comment section and I'll attend to them as soon as I can 😊.

HAPPY CODING! ✌️

Feel free to connect with me:

Embarking on a Flutter CustomPaint adventure: Part 1; Unveiling the Canvas with Custom Paint Basics 🎨

Oranekwu Gabriel Ekene — Mon, 22 Jan 2024 23:15:34 +0000

I bet you've seen really beautiful designs or even animations on a Flutter application and wondered 'how do they create these things?' 🤔.

You could also be in the category of developers who actually know what those designs are done with, but, find it difficult to grasp 😔.

Or, you could be those who have no idea what I am talking about 👀.

But, not to worry, the Painter 🧑‍🎨 is here to the rescueeee!! 🚀🚀.

Before we delve in, let's establish some ground basics and understanding.

WHAT IS CUSTOM PAINT IN FLUTTER?

CustomPaint is really just an widget in Flutter. But, a painter cannot leave his upcoming apprentice more confused 🤣.

CustomPaint is a versatile widget that empowers developers to create custom graphics and perform custom painting on the screen. It acts as a canvas, allowing you to draw shapes, paths, and images, providing full control over the visual elements within your application. With CustomPaint, you can unleash your creativity, building unique and tailored visual experiences for your Flutter applications. (You guessed right, ChatGPT helped me here 😹).

WHAT'S NEXT 🤔?

We've already established a clearer definition of what CustomPaint is all about. I won't bore you with all the theories here. In later articles, I'll slot them in bit by bit, so, you'll be well versed in both theory and practical, just like a real-painter should 💪.

I'll be showing us a very simple paint (the boring stuff) and slowly, we'll advance our paint and algorithm (the exciting stuff). For each episode of our article on CustomPaint, I'll introduce new and interesting concept. You just have to hold my hands tightly, while I take you on a journey like you never experienced before 🌚.

HURRAY, LET'S PAINT!!! 🎨

As I promised, I won't bore you and I'll quickly get down to business.

Firstly, we'll create our project

We should be all be familiar with this, I only did it so, everyone can follow through with the tutorial.

Open the project in your favourite IDE. If you do it exactly as I did and you have VSCode installed, it will launch the project on VSCode. You may be wondering why I had to open it from the terminal; short answer: Makes me look more like a BADASS developer 😎.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      home: const CustomPaintApp(),
    );
  }
}

class CustomPaintApp extends StatelessWidget {
  const CustomPaintApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Paint'),
      ),
    );
  }
}

So, far so good, we have a clean slate (Canvas?) to start working on.

OUR FIRST PAINT

We already established earlier that, the entirety of our discussion is the CustomPaint widget. So, we'll be using the widget for anything paint, in future episodes, I'll explain more about it, for now, let's just paint 😤.

This screen grab is from the official flutter docs and if you read it carefully, you'll understand that, we must use a CustomPaint (widget) and a CustomPainter (an abstract class that we will always extend) for any Paint we need.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      home: const CustomPaintApp(),
    );
  }
}

class CustomPaintApp extends StatelessWidget {
  const CustomPaintApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Paint'),
      ),
      body: Center(
        child: CustomPaint(
          painter: SquarePainter(),
        ),
      ),
    );
  }
}

class SquarePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    canvas.drawPaint(paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

The Code

The output 🌚.

Not what you were expecting? 💔

Stick around, we'll cover more in the next Edpisode. Until then, keep FLUTTERING! 💙.

Meanwhile, feel free to explore some of my other creative works here. Not all of them are CustomPaint though, but, most of them are.

I know you enjoyed the article and would like to see more of it.

Hold on to your paint brush because, more are yet to come. Can you follow me on my socials?, I drop amazing contents too, every once in a while 🥹.

If you have any questions relating to this article you can leave them in the comment section and I'll attend to them as soon as I can 😊.

Until then, keep FLUTTERING! (again) 💙.