DEV Community: Damola Adekoya

Mastering the Singleton Pattern in Dart

Damola Adekoya — Mon, 16 Jun 2025 06:30:55 +0000

Picture this: You're building a Flutter app for a food delivery service. Your app needs to track user analytics, manage configuration settings, handle API calls, and maintain a logging system. Without proper architecture, you might end up creating multiple instances of these services throughout your app, leading to inconsistent data, memory waste, and debugging nightmares.

I learned this the hard way during my first major Flutter project. I had analytics data scattered across different instances, configuration settings that somehow got out of sync between screens, and log files that were being written to from multiple places simultaneously. The result? A buggy app with memory leaks and data inconsistencies that took weeks to untangle.
This is where the Singleton design pattern becomes your best friend. It's like having a single, trusted manager for critical services in your app – ensuring there's only one instance of important classes and providing global access to them.

What is the Singleton Pattern?

The Singleton pattern is one of the most well-known design patterns in software engineering. At its core, it's deceptively simple: ensure a class has only one instance and provide a global point of access to that instance.
Think of it like having a single CEO in a company. No matter how many departments need to communicate with the CEO, there's only one person in that role. Similarly, a Singleton ensures that no matter how many parts of your app need access to a particular service, there's only one instance of that service running.

When to Use Singleton (The Good Times)

The Singleton pattern shines in several specific scenarios:

Shared Resources Management When you need to manage access to shared resources like files, network connections, or hardware devices, Singleton ensures coordinated access and prevents conflicts.
Configuration Management Application settings and configuration data typically need to be consistent across your entire app. A Singleton configuration manager ensures all parts of your app access the same settings.
Logging Services Centralized logging is crucial for debugging and monitoring. A Singleton logger ensures all log entries go through the same service, maintaining consistency and proper file handling.
Caching Systems Cache managers need to maintain a single source of truth for cached data. Multiple cache instances could lead to inconsistent data and memory waste.
Service Locators When implementing service locator patterns, you typically want a single registry that manages and provides access to various services.

When to Avoid Singleton (The Dark Side)

Despite its usefulness, Singleton can become problematic when overused:

Testing Difficulties Singletons create global state, making unit testing challenging. They can introduce dependencies between tests and make it difficult to isolate components.
Hidden Dependencies When classes use Singletons directly, it's not immediately obvious what dependencies they have, making the code harder to understand and maintain.
Tight Coupling Overuse of Singletons can lead to tightly coupled code where classes depend directly on specific implementations rather than abstractions.
Concurrent Access Issues In multi-threaded environments, Singletons can introduce race conditions and require careful synchronization.
Violating Single Responsibility Principle Singletons often end up doing too much, violating the single responsibility principle and becoming "god objects."

Implementing Singleton in Dart: A Complete Example

enum LogLevel { debug, info, warning, error }

class Logger {
  // Singleton instance
  static final Logger _instance = Logger._internal();

  // Private constructor
  Logger._internal();

  // Factory constructor returns the same instance every time
  factory Logger() => _instance;

  void log(String message, [LogLevel level = LogLevel.info]) {
    final timestamp = DateTime.now().toIso8601String();
    final levelStr = level.toString().split('.').last.toUpperCase();
    print('[$timestamp] [$levelStr] $message');
  }
}

Understanding the Implementation

Let's break down the key components of our Singleton implementation:
1. Private Constructor
The Logger._internal() constructor is private, preventing external instantiation of the class. This is crucial for maintaining the singleton guarantee.
2. Factory Constructor
The factory Logger() constructor is the public interface for getting the singleton instance. It checks if an instance already exists and creates one only if necessary.
3. Static Instance Variable
The _instance variable holds the single instance of the class. It's nullable initially and gets initialized on first access.
4. Thread Safety Considerations
In Dart, the null-aware assignment operator (??=) provides basic thread safety for singleton creation. However, for more complex scenarios, you might need additional synchronization mechanisms.

Alternative Singleton Implementations in Dart

1. Eager Initialization

class EagerSingleton {
  static final EagerSingleton _instance = EagerSingleton._internal();

  EagerSingleton._internal();

  factory EagerSingleton() => _instance;
}

2. Using Static Final

class StaticSingleton {
  static final StaticSingleton instance = StaticSingleton._internal();

  StaticSingleton._internal();
}

*3. With Async Initialization *

class AsyncSingleton {
  static AsyncSingleton? _instance;
  static final Completer<AsyncSingleton> _completer = Completer<AsyncSingleton>();

  AsyncSingleton._internal();

  static Future<AsyncSingleton> getInstance() async {
    if (_instance == null) {
      _instance = AsyncSingleton._internal();
      await _instance!._initialize();
      _completer.complete(_instance);
    }
    return _completer.future;
  }

  Future<void> _initialize() async {
    // Perform async initialization
    await Future.delayed(Duration(seconds: 1));
  }
}

Common Misuse Patterns

1. The "Everything is a Singleton" Anti-pattern

I've seen developers make every service class a Singleton, thinking it's always better to have one instance. This leads to tightly coupled, hard-to-test code.

Bad Example:

// Don't do this!
class UserService {
  static UserService? _instance;
  UserService._internal();
  factory UserService() => _instance ??= UserService._internal();
}

class ProductService {
  static ProductService? _instance;
  ProductService._internal();
  factory ProductService() => _instance ??= ProductService._internal();
}

class CartService {
  static CartService? _instance;
  CartService._internal();
  factory CartService() => _instance ??= CartService._internal();
}

2. Singleton as a Glorified Global Variable

Using Singleton just to avoid passing parameters is a code smell. If you're not truly ensuring single instance semantics, you're probably misusing the pattern.

3. Mutable Singleton State

Making Singleton instances heavily mutable can lead to unexpected behavior and debugging nightmares.

4. Ignoring Disposal and Cleanup

Not properly managing resources in Singletons can lead to memory leaks and resource exhaustion.

Best Practices for Singleton in Dart

1. Use Dependency Injection When Possible

Instead of accessing Singletons directly, consider using dependency injection frameworks like get_it or provider.

// Using get_it for dependency injection
import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

void setupDependencies() {
  getIt.registerSingleton<Logger>(Logger());
}

class OrderService {
  final Logger logger;
  OrderService({required this.logger});
}

2. Make Singletons Immutable When Possible

If your Singleton doesn't need to change state, make it immutable.

3. Provide Clear Disposal Methods

Always provide ways to clean up resources:

class DatabaseService {
  // ... singleton implementation

  Future<void> dispose() async {
    await _connection?.close();
    _instance = null;
  }
}

4. Consider Using Abstract Interfaces

Make your Singletons implement interfaces to improve testability:

abstract class ILogger {
  void info(String message);
  void error(String message);
}

class Logger implements ILogger {
  // ... singleton implementation
}

5. Document Singleton Behavior

Always document why a class is a Singleton and what guarantees it provides.

Testing Strategies for Singletons

1. Reset Between Tests

void main() {
  tearDown(() {
    // Reset singleton state between tests
    Logger.instance.clearLogs();
  });
}

2. Use Dependency Injection for Testing

class TestableOrderService {
  final ILogger logger;
  TestableOrderService(this.logger);
}

3. Mock Singletons

class MockLogger implements ILogger {
  final List<String> logs = [];

  @override
  void info(String message) => logs.add('INFO: $message');

  @override
  void error(String message) => logs.add('ERROR: $message');
}

Real-world Considerations

In production Flutter apps, I've found that Singleton works well for:

Analytics services - You want all events going through the same tracking instance
Configuration managers - App settings should be consistent everywhere
Cache managers - Shared cache state across the app
Network clients - Reusing HTTP clients and connection pools

However, I avoid Singleton for:

Business logic services - These should be injected dependencies
UI state management - Use proper state management solutions
Data repositories - These benefit from dependency injection for testing

Performance Considerations

From my experience with Flutter apps, Singletons can improve performance by:

Reducing object creation overhead
Sharing expensive resources like network connections
Maintaining cache state across the application

However, they can hurt performance if:

They hold onto large amounts of memory
They prevent garbage collection of unused resources
They create bottlenecks in multi-threaded scenarios

Conclusion

The Singleton pattern is a powerful tool that, like any tool, can be both helpful and harmful depending on how it's used. In Dart and Flutter development, it's particularly useful for managing shared resources, configuration, and services that truly benefit from having a single instance.
The key is restraint. Not every class needs to be a Singleton, and global state should be used judiciously. When you do use Singleton, implement it properly with consideration for testing, resource management, and long-term maintainability.
Remember that modern dependency injection frameworks often provide better alternatives to direct Singleton usage, offering the benefits of single instances while maintaining testability and loose coupling.
As with any design pattern, the goal isn't to use Singleton everywhere, but to recognize when it's the right tool for the job and implement it thoughtfully.

Coming up next: In our next article, we'll explore the Factory design pattern in Dart. We'll see how Factory methods can help you create objects without specifying their exact classes, making your code more flexible and easier to extend. We'll build a practical example showing how to create different types of payment processors for our food delivery app, and discuss when Factory patterns shine compared to simple constructors. Stay tuned!

[Boost]

Damola Adekoya — Sat, 31 May 2025 19:15:28 +0000

Damola Adekoya

May 31 '25

Understanding Design Patterns: Why Dart Developers Should Care

#programming #architecture #dart #beginners

Comments 1

6 min read

Understanding Design Patterns: Why Dart Developers Should Care

Damola Adekoya — Sat, 31 May 2025 19:14:35 +0000

Introduction

If you've ever built a moderately complex Flutter app, you've probably hit that moment where everything starts to feel... messy. Maybe your state management is tangled, your service classes are doing too much, or you're duplicating logic in multiple places. As the codebase grows, so does the pain.

These are signs of architectural drift — when a once-clear structure begins to dissolve under the weight of new features and rushed fixes. The good news? You're not alone, and there's a tried-and-true set of solutions to help: design patterns.

Design patterns aren’t magic wands or rigid blueprints. They're reusable solutions to common software design problems — kind of like best practices distilled into patterns. And yes, they absolutely apply to Dart and Flutter.

Let’s explore why design patterns are worth your time as a Dart developer, how they show up in real-world Flutter apps, and how they can make your architecture cleaner, leaner, and more maintainable.

What Are Design Patterns?

In plain terms, design patterns are general solutions to recurring problems in software design. They’re not chunks of copy-pasteable code but more like conceptual guides or best practices you can implement in different contexts.

The idea gained popularity through the Gang of Four (Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides), who documented 23 classic patterns grouped into three categories:

Creational Patterns – Deal with object creation logic.
Structural Patterns – Deal with object composition and relationships.
Behavioral Patterns – Deal with communication between objects.

Design patterns are language-agnostic, but can and should be adapted idiomatically in Dart — especially with Flutter’s component-driven architecture and reactive programming style.

Why Dart Developers Should Care

Flutter allows you to build rich UIs quickly, but without good structure, things can spiral fast. As your app grows, features become harder to isolate, test, and debug.

Here’s how design patterns help:

Maintainability – Changes are easier when responsibilities are clearly separated.
Reusability – Patterns can be reused across different projects or parts of the app.
Scalability – Your codebase remains structured even as it grows.
Separation of Concerns – Business logic, data layers, and UI are decoupled.

Example Problem

You might start by making network calls directly inside your widgets. Then, business logic spreads everywhere. When the backend changes or you need to cache data locally, your only option is a painful refactor. A Repository or Facade pattern would have saved the day.

Categories of Design Patterns (With Dart/Flutter Examples)

Creational Patterns

How objects are created in a flexible, scalable way.

Pattern	Description	Flutter Use Case
Singleton	Ensures a class has only one instance and provides a global point of access to it.	Services like logging, analytics, or `SharedPreferences` wrapper.
Factory Method	Creates objects without specifying the exact class of object that will be created.	Dynamic widget creation based on user type or feature flags.
Builder	Constructs a complex object step-by-step.	Building configurable dialogs or complex UI from simpler components.
Abstract Factory	Provides an interface for creating families of related objects.	Theme switching between light and dark UI widgets.
Prototype	Creates new objects by cloning an existing object.	Repeating configurations like custom button styles. (less common in Dart)

Structural Patterns How objects and classes are composed to form larger structures.

Pattern	Description	Flutter Use Case
Facade	Provides a simplified interface to a complex system.	Combining Firebase Auth, Google Sign-In, and database logic under one AuthService.
Decorator	Dynamically adds behavior to an object without changing its structure.	Enhancing widgets by wrapping them in `Padding`, `Container`, etc.
Adapter	Converts one interface into another that clients expect.	Adapting a REST API model to a local database model.
Bridge	Separates abstraction from implementation so they can vary independently.	Abstracting business logic from different data sources (e.g., remote vs local).
Composite	Treats individual objects and compositions uniformly.	Building nested menu structures or UI trees.
Proxy	Provides a surrogate or placeholder for another object to control access.	Caching images or controlling access to network calls.

Behavioral Patterns How objects communicate and responsibilities are assigned.

Pattern	Description	Flutter Use Case
Observer	Allows an object to notify other objects when its state changes.	`ValueNotifier`, `Stream`, `Bloc`, or `Provider` for state management.
Strategy	Defines a family of algorithms, encapsulates each one, and makes them interchangeable.	Switching sorting or filtering strategies in a product list.
Command	Encapsulates a request as an object.	Undo/redo operations in a form or drawing app.
Mediator	Encapsulates communication between objects to reduce dependencies.	Centralizing UI interaction logic in a controller or service.
State	Allows an object to alter its behavior when its internal state changes.	Managing page or tab view states in an onboarding flow.
Iterator	Provides a way to access elements of a collection sequentially.	Custom list views or carousel components.
Chain of Responsibility	Passes a request along a chain until it's handled.	Form field validation pipelines.

Real-world Use Cases in Dart/Flutter

Let’s zoom into a few Dart-specific examples:

Singleton for app-wide services

class AuthService {
  static final AuthService _instance = AuthService._internal();
  factory AuthService() => _instance;
  AuthService._internal();

  User? _currentUser;
  bool get isAuthenticated => _currentUser != null;

  Future<void> login(String email, String password) {
    // Login implementation
  }
}

Factory for widget creation

abstract class ButtonFactory {
  Widget createButton(ButtonType type, String text, VoidCallback onPressed);
}

class MaterialButtonFactory implements ButtonFactory {
  @override
  Widget createButton(ButtonType type, String text, VoidCallback onPressed) {
    switch (type) {
      case ButtonType.primary:
        return ElevatedButton(onPressed: onPressed, child: Text(text));
      case ButtonType.secondary:
        return OutlinedButton(onPressed: onPressed, child: Text(text));
      case ButtonType.text:
        return TextButton(onPressed: onPressed, child: Text(text));
    }
  }
}

Observer via ValueNotifier or Stream

class CounterNotifier extends ValueNotifier<int> {
  CounterNotifier() : super(0);

  void increment() {
    value++;
  }

  void decrement() {
    value--;
  }
}

// Usage in widget
class CounterWidget extends StatelessWidget {
  final CounterNotifier counter;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<int>(
      valueListenable: counter,
      builder: (context, count, child) {
        return Text('Count: $count');
      },
    );
  }
}

Facade to simplify complex APIs

class UserFacade {
  final ApiService _apiService;
  final DatabaseService _dbService;
  final CacheService _cacheService;

  UserFacade(this._apiService, this._dbService, this._cacheService);

  Future<User> getUser(String id) async {
    // Try cache first
    final cachedUser = await _cacheService.getUser(id);
    if (cachedUser != null) return cachedUser;

    // Try local database
    final dbUser = await _dbService.getUser(id);
    if (dbUser != null) {
      await _cacheService.setUser(dbUser);
      return dbUser;
    }

    // Fetch from API
    final apiUser = await _apiService.fetchUser(id);
    await _dbService.saveUser(apiUser);
    await _cacheService.setUser(apiUser);
    return apiUser;
  }
}

Decorator to enhance UI widgets

class LoadingDecorator extends StatelessWidget {
  final Widget child;
  final bool isLoading;

  const LoadingDecorator({
    required this.child,
    required this.isLoading,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        if (isLoading)
          Container(
            color: Colors.black26,
            child: Center(child: CircularProgressIndicator()),
          ),
      ],
    );
  }
}

Design Patterns and Clean Architecture

Clean Architecture emphasizes separation of concerns: UI, business logic, and data handling should live in distinct layers. Here’s how design patterns help:

Use Cases: Implemented using the Command or Strategy pattern to isolate logic.

Repositories: Abstract data sources using Factory, Facade, or Adapter patterns.

UI: Uses Observer or State patterns to react to changes.

The result? Code that’s easier to test, maintain, and expand.

Misconceptions and Anti-patterns

“Design patterns are too heavy.”
No, they’re lightweight guidelines when used correctly. Use what makes sense — and keep it simple.
Overusing Singleton
Not everything should be globally available. Overuse leads to tight coupling and poor testability.
Forcing patterns unnecessarily
Don’t use a pattern just because you can. Apply them where there’s a clear need.

Series Preview / What’s Coming Next

This article kicks off a deep-dive series into Design Patterns in Dart/Flutter, where we’ll explore:

🔹 Creational Patterns – Singleton, Factory, Builder
🔹 Structural Patterns – Adapter, Facade, Decorator
🔹 Behavioral Patterns – Observer, Strategy, State

Each pattern will include:

Real Dart/Flutter code

Practical use cases

When to use (and when not to)

Common mistakes

Conclusion

Whether you're building a side project or leading a team on a production app, design patterns help you write cleaner, more scalable, and easier-to-understand Dart code.

They’re not academic fluff — they’re proven tools used by seasoned developers across industries.

💬 Now it’s your turn:

Follow the series

Share your favorite pattern

Or suggest one you’d love to see covered next

Let’s build apps that don’t just work — but scale beautifully.

See you in the next article! 💙

How to run your flutter app on multiple emulator devices using vscode

Damola Adekoya — Fri, 28 Aug 2020 19:39:46 +0000

How to run your flutter app on multiple emulator devices using vscode

Flutter is a cross-platform mobile framework i.e it support for both Android and iOS, developing flutter is so fascinating that you get to write once and run on both platform. in this post I will be showing how to run more than one emulator concurrently using Visual studio code, by default you can only run a single emulator at a time on a project. Thanks to super-fast hot reload and restart feature of flutter which makes development experience faster and better. But it would have been better if you can be testing/debugging your application as you are developing on both platforms devices without you have to wait for one device.

Steps

Create different emulator devices you want to run your application on. e.g iOS devices, Android device NB: I won't be showing how to create emulator devices

How to create Android and iOS emulator device .

Make sure all the devices are launched.i.e all devices for iOS and Android.
Get ID for all your devices, to get the device id run

flutter devices

on your terminal to get your device id. [screenshot below]

Create a launch configuration setting for your flutter project. [screenshot below]

Create a device profile for each of the devices in the launch.json

{
      "name": "iPad Pro",
      "request": "launch",
      "type": "dart",
      "deviceId": "CE96E50B-A047-40D9-9921-1359CA2CF231"

}

NB:
name is the profile name i.e device name although it can be any name.
below is the sample configuration setting for my flutter app

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "Android",
      "request": "launch",
      "type": "dart",
      "deviceId": "emulator-5554"
    },
    {
      "name": "iPhone",
      "request": "launch",
      "type": "dart",
      "deviceId": "iPhone"
    },
    {
      "name": "iPad Pro",
      "request": "launch",
      "type": "dart",
      "deviceId": "CE96E50B-A047-40D9-9921-1359CA2CF231"
    }
  ],
  "compounds": [
    {
      "name": "All Devices",
      "configurations": ["Android", "iPhone", "iPad Pro"]
    }
  ]
}

Top 10 Youtube channels for Flutter developers (2020)

Damola Adekoya — Wed, 08 Jan 2020 11:20:16 +0000

Top 10 Youtube channels for Flutter developers (2020)

It's 2020 and the rate in which Flutter is trending is increasing exponentially, and learning can be difficult if people are not been pointed to the right resources. With the below-curated list of the youtube channel, I believe it will help flutter developers to learn and master the Flutter.

Official Flutter Youtube Channel

Flutter Youtube channel is a goto place to learn things about flutter, the Flutter team has published various content on flutter. you will get to know things about different widgets, Google IO videos content on flutter, Flutter Interact and lot more.

MTECHVIRAL

MTECHVIRAL is a youtube channel created and managed by Pawan Kumar known as imthepk, Pawan Kumar is the first Google Developer Expert in Indian and he is also an expert for web, firebase e.t.c. He has spent the last 2 years creating a lot of awesome content on flutter.

Fireship

Fireship has huge content that varies from the web, firebase, flutter e.t.c. Fireship is a goto place to learn various things as a flutter developer either beginner, intermediate or expert. Fireship was created and managed by Jeff Delaney. Jeff Delaney is a Google Developer Expert for firebase and he is passionate about creating content for the community.

Code With Andrea.

Andrea Bizzotto is a Google Developer Expert in Flutter, Udemy instructor and the founder of CodeWithAdrea Youtube channel. Andrea created the channel to be a better flutter developer and he has published videos on flutter for the community.

Marcus Ng

Marcus Ng is a mobile app developer specializing in building apps with Flutter and Swift. Marcus Ng is also an Udemy instructor and the founder of Marcus Ng youtube channel, he has published a lot of flutter content on his youtube channel. feel free to give his channel a shot.

Raja Yogan

Raja Yogan Youtube channel was created and managed by Raja Yogan himself. Raja Yogan is a Software Engineer, Consultant, and Architect in India, who is passionate about flutter, firebase, and mobile app development. Raja Yogan Youtube channel has a lot of flutter tutorials, tip, and trick you can learn as a flutter developer

Reso Coder

Reso Coder is a Youtube channel that has a lot of content for beginner, intermediate and expert alike. Subscribe to the channel so you can catch up with the upcoming video

Techie Blossom

Techie Bossom is a youtube channel that has a lot of amazing content around flutter, firebase, and web. if you are a beginner flutter developer who wants to build apps to have the experience, Techie Blossom youtube channel is for you.

FilledStacks

Another Youtube channel to explore its content is FilledStack. FilledStack has content dedicated to flutter alone, there are a lot of flutter widgets, tricks and tips you need to add to what you already know. Filledstack also has a dev blog where you can read and learn thing around flutter click here

The Net Ninja

The Net Ninja is a youtube channel that has a lot of amazing content not only flutter also various content across all areas on the web. The Net Ninja channel was created and managed by Shaun. Shaun is a Udemy instructor who is obsessed with technology and loves creating content around it.

Conclusion

I hope the above channels will help you to learn flutter faster and easier, if you have any other youtube channel that is not on the list please feel free to drop it in the comment box.

Managing multiple themes in flutter application

Damola Adekoya — Fri, 22 Nov 2019 10:33:55 +0000

One of the trending concepts in the mobile application is the ability to have multiple themes such as light and dark themes, and you can have as many themes as possible in your application. the question right now is how to manage the theme in order to cut across all pages. thinking about managing the state of your theme in the application. one of the ways of managing the state is using stateful widget which is a terrible approach and it's inefficient and the other approach is to use statement package, there are a lot of statement management packages in flutter such as Providers, BLOC, Redux, Mobx e.t.c in this article I will be chosen provider state management package.

Provider State management package

using a state management package allows you to manage your state globally in your application, it is more like having a global store where each page, widgets can connect directly to and access and manipulate data.

Steps:

How to install Provider Package add below snippet in your pubspec.yml file under the dependencies section

provider: ^3.1.0+1

//to have the latest provider package
provider:

2.
create a dart file that has all your theme definition

//theme.dart

ThemeData darkTheme = ThemeData.dark().copyWith(
    primaryColor: Color(0xff1f655d),
    accentColor: Color(0xff40bf7a),
    textTheme: TextTheme(
        title: TextStyle(color: Color(0xff40bf7a)),
        subtitle: TextStyle(color: Colors.white),
        subhead: TextStyle(color: Color(0xff40bf7a))),
    appBarTheme: AppBarTheme(color: Color(0xff1f655d)));

ThemeData lightTheme = ThemeData.light().copyWith(
    primaryColor: Color(0xfff5f5f5),
    accentColor: Color(0xff40bf7a),
    textTheme: TextTheme(
        title: TextStyle(color: Colors.black54),
        subtitle: TextStyle(color: Colors.grey),
        subhead: TextStyle(color: Colors.white)),
    appBarTheme: AppBarTheme(
        color: Color(0xff1f655d),
        actionsIconTheme: IconThemeData(color: Colors.white)));

3.
Create a theme model

you need to create your theme model

import 'package:flutter/material.dart';
import 'package:whatsapp/theme.dart';

enum ThemeType { Light, Dark }

class ThemeModel extends ChangeNotifier {
  ThemeData currentTheme = darkTheme;
  ThemeType _themeType = ThemeType.Dark;

  toggleTheme() {
    if (_themeType == ThemeType.Dark) {
      currentTheme = lightTheme;
      _themeType = ThemeType.Light;
      return notifyListeners();
    }

    if (_themeType == ThemeType.Light) {
      currentTheme = darkTheme;
      _themeType = ThemeType.Dark;
      return notifyListeners();
    }
  }
}

Explanation:

we are creating an enum type for our theme, which we allow us to assign a type to each Themedata, it also helps us to check currently theme efficiently
We create a class that extends ChangeNotifier, create currentTheme as a property of ThemeData and set the default value to darkTheme and also property _themeType then assign your current themeType to it. you can set any theme of your choice, it's the theme that will be the default app theme
create a method that handles the toggling of your theme from theme 1 to theme 2. But the most important part is to call notifyListener() method, it is the method that informs your store that your state value has changed.

Wrap provider Class as a parent of your MaterialApp, which will allow all pages, widgets e.t.c have access to the provider value.

void main() => runApp(
ChangeNotifierProvider<ThemeModel>(
    builder: (BuildContext context) => ThemeModel(), child: MyApp()));

Consuming your state value anywhere in your application

Provider.of<object>(context);

it allows you to access your provider store value and access your data. by specifying the ThemeModel.

below is your output

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: Provider.of<ThemeModel>(context).currentTheme,
      home: MyHomePage(title: 'WhatsApp'),
    );
  }
}

Finally, Adding toggle widget to your app, this is the widget that will eneable you to switch from theme 1 to theme 2 and vice-versa. for the sake of simplicity of the article, I will just add a RaisedButton widget to MyHomePage Screen.
snippet below

class MyHomePage extends StatelessWidget
{
final String title;

MyHomePage({this.title});

Widget build(BuildContext context){
 return Scaffold(
     appBar: AppBar(
     title: Text(widget.title)),
     body: Center(
child:RaisedButton(child: Text("Change Theme",
 onpressed:(){
Provider.of<ThemeModel>(context).toggleTheme();
}
))
);
}

}

NB: Provider.of(context).toggleTheme(); allows you to connect to your themeModel class and run toggleTheme() method.

Conclusion

The main purpose of this article is to allow you, to have an understanding of how you can create your own multi-based flutter applications using Providers State management package.

React Hook (useState) with React Context API

Damola Adekoya — Wed, 29 May 2019 11:18:31 +0000

Managing State in React App is tricky, especially when you want to share data from component 1 to (x)components, you will have to pass the data from component 1, 2 to 7 which is basically unnecessary. Packages like Redux, Flux, MobX e.tc help to manage states but the problem with this kind of packages they are external to react library, some people find it kind of cumbersome to fully understand, working and integrating it with react. So react team release alternative to Redux which is Context API in React 16.x.

What is React Context API

It is a feature/approach that provides a way to pass data through the component tree without having to pass props down manually at every level.

Let assume I am a delivery man, I want to deliver a package to Floor 7 of a particular building using staircase. For me to get to floor 7, I have to carry the package from floor 1 to 2 to 3..7, it kinda cumbersome right?, why can’t I just jump/teleport myself from floor 1 to 7 and vice-versa without me stressing myself of going through from floor 1 of a building to the last floor(7th Floor). That’s typically how passing data via props from parent component to nested child. But with React Context you don’t have to do go through all that, all you need to do is just jump directly to floor 7 and jump back without making any additional/unnecessary trip.

Simple Guide

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
     return (
        <ThemeContext.Provider value="dark">
        <Toolbar />
       </ThemeContext.Provider>
     );
 }
}

Terminologies to understand

React.createContext

const MyContext = React.createContext(defaultValue);

it will allows you to create a context object, which accept a default values. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

Context.Provider

<MyContext.Provider value={/* some value */}>

The moment a context object has been created you will have access to context API method such as Provider, Consumer e.t.c. Provider allows consuming component to subscribe to context changes and also set/store value/data.

Context.Consumer

<MyContext.Consumer>

{value => /* render something based on the context value */}

Just as the name implies Consumer it allows you to consume the value set/store from the Context Provider.

When Should I use React Context API

Context API is only meant to be used when you need to access your data from a nested component, The moment you realised the nested level of your component is more than 3, then try to use Context API to avoid passing unnecessary data via props.

React Hook(useState)

Sophie Alpert said at React Conf 2018 Class are very confusing and annoying to understand for both Human and Machine. React team develop React Hook to manage state from a stateless/functional component and also handle every component life cycle supported by class component. e.g componentDidMount, componentDidUpdate,componentWillUnmount e.t.c

Simple Guide

import React, { useState } from 'react';
 const hookExample =()=>{
const[state, setState] =useState(0);
 return (
   <div>
    <p>You clicked {count} times </p>
    <button onClick={()=> setState()}>Click me </button>
  </div>
}

const [state, setState] = useState(0);

I used array destructing to extract state and setState from useState. I set the initial value/state as zero(0). useState can accept any default value string,numbers,bool,array,object.

NB: useState return an array of 2 elements: current state and set State. (state and setState) are just variable representation, you can use any name to represent your state and setState.

Passing data via props

import React, { Fragment } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

//Building Component
const Building = () => {
  const data = {
    companyName: "DHL Delivery Package",
    recipientName: "Mr Adekoya Damola Felix",
    package: "MacBook Pro retina Display (20Kg)"
  };
  return <Floor1 data={data} />;
};

//Floor1 Component
const Floor1 = ({ data }) => {
  return <Floor2 data={data} />;
};

//Floor2 Component
const Floor2 = ({ data }) => {
  return <Floor3 data={data} />;
};

//Floor3 Component
const Floor3 = ({ data }) => {
  return <Floor7 data={data} />;
};

//Floor 7 Component
const Floor7 = ({ data }) => {
  return (
    <Fragment>
      <h3>Welcome to Floor 7</h3>
      <p>
        <strong>Company Name: </strong>
        {data.companyName}
      </p>
      <p>
        <strong>Recipient Name: </strong>
        {data.recipientName}
      </p>
      <p>
        <strong>Package: </strong>
        {data.package}
      </p>
    </Fragment>
  );
};
function App() {
  return (
    <div className="App">
      <h1>Simple Context API Tutorial using Hook(useState)</h1>
      <Building />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

From above source code is the normal way of passing data without Context API or redux in react. In order for component 7 to received data (package), the package has to pass all the way from Floor 1 to Floor 2… Floor 7.

Managing State with hook and context API

import React from "react";

export default React.createContext();

in the above snippet I created a reusable context that can be use across other component in my application.

import React, { useState } from "react";
import PackageContext from "./context";

const provider = props => {
  const [state, setState] = useState({
    companyName: "DHL Delivery Package",
    recipientName: "Mr Adekoya Damola Felix",
    package: "MacBook Pro retina Display (20Kg)",
    deliveryStatus: "Delivery In Progress..."

  });
  return (
   <PackageContext.Provider
      value={{
        data: state,
        updateDeliveryStatus: () => {
          setState({ ...state, deliveryStatus: "Delivered" });
        }
      }}
    >
      {props.children}
    </PackageContext.Provider>
  );
};

export default provider;

I import context component created earlier, we are going to be using it to set our provider value and consume the value.

const [state, setState] = useState({
companyName: "DHL Delivery Package",
recipientName: "Mr Adekoya Damola Felix",
package: "MacBook Pro retina Display (20Kg)"
});

I set the initial state which is the package(data) to be delivered, you can consider provider component as the centre store and also HOC(Higher order component which going to wrap our main component.

return (
{props.children}

);

I returned my context component i created earlier, assign a value as a props which hold the state data (Package Details)

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Provider from "./provider";
import Context from "./context";
import "./styles.css";

const Building = () => {
  return <Floor1 />;
};

//Floor1 Component
const Floor1 = () => {
  return <Floor2 />;
};

//Floor2 Component
const Floor2 = () => {
  return <Floor3 />;
};

//Floor3 Component
const Floor3 = () => {
  return <Floor7 />;
};

//Floor 7 Component
const Floor7 = () => {
  return (
    <Context.Consumer>
      {context => (
        <Fragment>
          <h3>Welcome to Floor 7</h3>
          <p>
            <strong>Company Name: </strong>
            {context.data.companyName}
          </p>
          <p>
            <strong>Recipient Name: </strong>
          {context.data.recipientName}
          </p>
          <p>
            <strong>Package: </strong>
            {context.data.package}
          </p>
    <p>
            <strong>Delivery Status: </strong>
            {context.data.deliveryStatus}
          </p>
          <button onClick={context.updateDeliveryStatus}>
            Update Delivery Status
          </button>
        </Fragment>
      )}
    </Context.Consumer>
  );
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Provider>
        <Building />
      </Provider>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Let go straight direct to last component (Floor 7) where we are going to use our data.. I wrapped all my tags with which allows me to connect to my store and access my data directly.

NB: In any component you want to use or consume the data you already saved in the provider. all you have to do is import your context component and use the Consumer property or you can destructure Consumer from the context component. E.g

import {Consumer} from './context-component'

From your App Component you need to wrap main component(Building component) as a parent component. Every Child/children component of the building will have access to the Provider Data more like Provider in redux.

How to Update My State from Child or Consumer Component

Updating your state that resides in component 1 from component 7 might look strange, but you can actually update your state from any Consumer component.

{
data: state,
updateDeliveryStatus: () =>
{
setState({ ...state, deliveryStatus: "Delivered" });
}
}}>

in the Provider value data object, you need to set the action you want to perform in the object as a function which can later be triggered in the consumer component.

Conclusion

In this article I hope I was able to impact and explain how context api and react hook usestate works. Context API is basically your center store where you can store your data that you want to access globally in your react application. Hook allows you to manage your state in a functional component.

I have created a simple demo on codesandbox to demonstrate how to use context API with react hook useState.

originally published on https://codeburst.io/beginner-guide-to-react-context-api-with-hook-usestate-4df7c3e08ad

Knowing your stack

Damola Adekoya — Mon, 04 Mar 2019 10:46:23 +0000

There are lot of misconception about stack in tech ecosystem, some developers especially the junior, aspiring developers and lot more are confuse about the stack they belong.

sometimes stack can be confusing and aspiring developers cannot differentiate or knows what makes up a particular stack they just learn any languages/libraries/framework that comes their way,i have been a victim of this and i want every aspiring developer to learn and know their stack.

List of stacks

UI/UX Designer.
Front end Developer.
Back end Developer.
Full Stack Developer.
Software Engineer.
Dev Ops

please let share our ideas on above listed stack and what makes up the stack

please share your idea, no idea is too small.

Setting up ESLINT in your JavaScript Project with VS Code

Damola Adekoya — Wed, 20 Feb 2019 15:42:42 +0000

ESLINT: have you ever wonder what ESLINT is all about, when i first heard of ESLINT i was curious what it actually all about, ever since then i have been using it in my project, although at first i was using it wrongly, that is why I am putting up this post to allow people to get it right. but before i dive in let me quickly explain what is ESLINT and VS Code.

ESLINT is pluggable linting utility for Javascript and JSX, it help to discover possible errors.

VS Code is one of the top editor for development it was developed and maintain by Microsoft it help to improve productivity and also comes with many features, one of the feature i am going to emphasize on is extension. Extension are external packages in VS Code that allows you to extend the functionalities of your editor

you can download VS Code from their official website VS Code Download

NB: I won't be digging deep into VS Code..everything on VS Code in this post will only be related to ESLINT.

steps:

create a javascript project
install eslint as an extension in your VS Code Editor
Install eslint as a global package using npm
initialize eslint in your javascript project
modify your eslint configuration file in your project.

let create a simple javascript project using

npm init --yes

after the operation was successful it will create a package.json file that will manage all configuration for our project.

let try to install ESLINT extension on vs code editor

once we have installed eslint extension on our vs code editor then let install eslint as a global package via npm using the below code

npm install eslint -g

you need to initialize eslint in your project so you can leverage the power of eslint. From your root project enter the below code to initialize eslint

eslint --init

during the initialization eslint will ask you some questions, more like to setup your configuration file.

How would you like to use ESLint?
- To check syntax only => it helps you correct your syntax and make sure it conform to standard.
- To check syntax and find problems => to help you check for syntax correctness and also help to find any problems in your code base
- To check syntax, find problems, and enforce code style_ => to help you check for syntax, find problem and enforce style, enforcing style means to conforms to a particular coding standard such as Airbnb, Google and other Standard coding style. But I always go for the last option the one with syntax, find problems and enforce code style
What type of modules does your project use?
- Javascript module (import/export) => if your project has babel installed then you definitely need to choose this option. If you are working on a project such as React, Vue, Angular e.t.c they all use babel so you need choose this option.
- CommonJS (require/exports) => this option is meant for commonJS that has nothing to do with babel, maybe your nodejs project and any other javascript project
Which framework does your project use?
- React => if you are using react in/for your project then this option is for you
- Vue => if you are using Vue in/for your project then this option is for you
- None of these => if you are using neither React or Vue in your project choose this option
Where does your code run?
- Browser => if your project runs on browser e.g React, Angular, Vue e.t.c then go for this option
- Node => if your project is a node based then gladly choose this option
How would you like to define a style for your project?
- Use a popular style guide => This allows you to choose from set of popular style such as Airbnb,Standard and Google style guide, it is advisable to choose this option in order for you to follow popular and most used style guide and i will be choosen this option in this post.
- Answer questions about your style: This is for custom style guide
- Inspect your JavaScript file(s).: custom style guide
What format do you want your config file to be in?
- Javascript => whether you want your eslint config file to be in .js file
- YAML => whether you want your eslint config file to be in .yaml file
- JSON => whether you want your eslint config file to be in .json file you can choose any option in this section

after you have chosen your preferred configuration file type it will then prompt you to install all necessary dependencies. after all neccessary dependencies has been successfully installed it will now generate a config file with ".eslintrc"."js/json/yaml".

example of the the configuration file shown below

below is a little animated image that show how vs code works with eslint to notify you of errors in your javascript project

Setting up rules for ESLINT in your project

Defining rules for ESLINT in your project informed eslint the kind of rules you want to add or remove. you can modify/set your rules in the rules section in the configuration file

example of rules to set are

"rules" : {
  no-console: 0; 
  no-empty: 0;
  no-irregular-whitespace:0;

}

you can define as many rules as possible, you can read more on ESLINT rules on their official documentation ESLINT Rules Documentation

Lastly, I am going to show you how you can link your eslint to your javascript project compiler/transpiler

steps below

Goto your package.json file, in the script segment in your file add the following

script:{
    "lint":"eslint"

}

NB: "lint" is just an ordinary word, you can use any word you are comfortable with

then in your root project you can run your linting script with

npm run lint

ESLINT helps to increase productivity, write your code according to standard and flag errors when your code base is breaking style guide rules. With this post you should be able to integrate ESLINT in your Javascript project.

Why you should adopt Graphql

Damola Adekoya — Tue, 19 Feb 2019 13:29:38 +0000

Sharing data across multiple platforms and devices has been a great burden over past years, to find solution to these problem 2000 Microsoft launch SOAP(Simple Object Access Protocol) web service architecture. SOAP is a messaging protocol specifically for exchanging structural data over the internet across multiple devices. But SOAP Web architecture has some flaws which led to development of REST(Representational State Transfer) Web service architecture.

Representational State Transfer (REST) is a software architectural style that defines a set of constraints to be used for creating web services. Web services that conform to the REST architectural style, termed RESTful web services, provide interoperability between computer systems on the Internet. RESTful web services allow the requesting systems to access and manipulate textual representations of web resources by using a uniform and predefined set of stateless operations.

What is GraphQL?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Graphql is language developed by Facebook team, it was internally used on Facebook product before it was publicly released in 2015, it was aim to provide alternative to traditional REST API architecture. many companies such as twitter, GitHub, PayPal, Shopify,Cousera, Stackshare e.t.c has adopted Graphql API as web service architecture

Advantages Graphql has over Rest (Representational State Transfer)

Not based on HTTP verbs: Graphql does not base it request on POST, GET, DELETE,PUT, PATCH. it doesn't care about the HTTP verb, just send your data it instantly understood the kind of operation your want to perform.
Automated Documentation: Documentation is a very effectual and efficient way of explaining what your web service entails, all the endpoints, endpoint parameters and response data. Graphql provides a nice documentation approach which is auto-documenting. it provides you with every necessary details that has to do with your web service unlike REST architecture that uses third party packages like swagger, Doxygen, Daux etc.
Single endpoint Route: GraphQL exposes only one single endpoint route which will allows you to get your all your data at one shot. Multiple endpoint route on REST has being one of the greatest con's of REST web service and it has great side effect on performance. assuming you need to get twitter user detail using ID as parameter and also get user's tweet and also need to get user's retweet.
with REST Web service you have a trip to the database thrice.. i.e you have a three API endpoint.. But with GraphQL you just need to specify all data you needed in a single trip and you have every data you needed
Data flexibility and Performance: This allows the client to have full control on the data the web service will be returning, it helps to remove irrelevant data and also optimize performance. GraphQL also provides a playground for client/developer to play around with the data.