DEV Community: Monday Solomon

Dart: Singleton Demystified

Monday Solomon — Tue, 20 Jun 2023 20:01:42 +0000

The Singleton pattern in Dart is a way to ensure that a class has only one instance and provides a global point of access to it. It helps eliminate redundant code by allowing you to use a single line of code to access the instance.

In Dart and Flutter, this pattern is often used when showing snack bars or confirmation dialogues to the user. It ensures that only one instance of the class responsible for displaying these UI elements exists and can be accessed from anywhere in the application.

We will demystify the topic into two sections;

Section 1: Understanding Singletons in Dart

In Dart, a singleton is a design pattern that enables you to have only one instance of a class throughout your application. It ensures that there is a single point of access to that instance, which can be useful in scenarios where you need to manage a shared resource or maintain a global state.

To implement a singleton in Dart, you typically define a class with a private constructor and a static instance variable. You provide a factory constructor that returns the single instance of the class, ensuring that only one instance is created.

Let's dive into an example to illustrate how a singleton works in Dart:

class MySingleton {
  static MySingleton _instance;

  factory MySingleton() {
    _instance ??= MySingleton._();
    return _instance;
  }

  MySingleton._();

  void doSomething() {
    print('Doing something...');
  }
}

In the above code, the MySingleton class has a private constructor _() and a static instance variable _instance. The factory constructor checks if _instance is null, and if so, it creates a new instance. If _instance is not null, it simply returns the existing instance.

Not so difficult right ?,
Leggo 🚀🚀🚀

To use the MySingleton class, you can create instances as follows:

void main() {
  var singleton1 = MySingleton();
  var singleton2 = MySingleton();

  print(identical(singleton1, singleton2)); // Output: true

  singleton1.doSomething(); // Output: Doing something...
  singleton2.doSomething(); // Output: Doing something...
}

In the main() function, we create two instances of MySingleton using the constructor MySingleton(). However, since MySingleton is a singleton class, both singleton1 and singleton2 refer to the same instance of the class. The identical() function confirms that they are the same object.

By using the singleton pattern, you ensure that only one instance of the class exists, and you can access it from anywhere in your application. This can be useful in scenarios where you want to share data, maintain a global configuration, or provide a central point of access to a resource.

Section 2: Understanding Singletons with a Simple Analogy

Understanding the concept of singletons can be easier with a simple analogy. Let's use the example of a music player in your phone.

Think of a music player on your phone. You can only have one instance of the music player at a time. No matter how many times you try to open the music player from different apps or screens, it's always the same music player that appears, with the same song playing.

In code, a singleton class works similarly:

class MusicPlayer {
  static MusicPlayer _instance;

  factory MusicPlayer() {
    _instance ??= MusicPlayer._();
    return _instance;
  }

  MusicPlayer._();

  void playSong(String song) {
    print('Playing song: $song');
  }
}

In this example, MusicPlayer is the singleton class. It has a private constructor _() and a static instance variable _instance. The class provides a factory constructor that checks if an instance exists. If it does, it returns that instance; otherwise, it creates a new instance and returns it.

To use the MusicPlayer singleton:


void main() {
  var player1 = MusicPlayer();
  var player2 = MusicPlayer();

  player1.playSong('Some Song'); // Output: Playing song: Some Song
  player2.playSong('Another Song'); // Output: Playing song: Another Song
}

In this example, player1 and player2 are both instances of MusicPlayer. However, since MusicPlayer is a singleton class, they refer to the same instance. So, when you call the playSong() method on either player1 or player2, it operates on the same music player and plays the requested song.

The singleton pattern ensures that you have only one instance of a class and that you can access it from anywhere in your code.

Implementing singletons in Dart can provide significant benefits when managing shared resources or global states in your application.

Thank You 🤗🤗,
Happy Coding 👨🏿‍💻

Creating a Custom Curved Navigation Bar in Flutter

Monday Solomon — Sat, 10 Jun 2023 15:27:53 +0000

Introduction:
Flutter is a popular cross-platform framework for building beautiful and interactive mobile applications. One of the essential components of many mobile apps is a navigation bar that allows users to navigate between different sections or screens. In this tutorial, we will learn how to create a custom curved navigation bar in Flutter.

Table of Contents

Prerequisites
Setting Up the Project
Creating the CurvedNavigationBar Widget
Defining Navigation Items
Styling the Navigation Bar
Implementing Tap Callbacks
Clipping the Container
Summary
Conclusion

Prerequisites:
Before we begin, make sure you have Flutter installed on your machine and have a basic understanding of Flutter concepts.

Setting Up the Project:
To start, create a new Flutter project using your preferred IDE or by running the following command in your terminal:

flutter create curved_navigation_bar

Creating the CurvedNavigationBar Widget:

In Flutter, we can create reusable widgets to encapsulate specific functionality. Let's define a new widget called CurvedNavigationBar by creating a new file named curved_navigation_bar.dart in the lib directory of your project.

Defining Navigation Items:

To configure the navigation items for our curved navigation bar, we will create another class called CurvedNavigationBarItem. Each item will consist of an IconData for the default icon and an optional IconData for the selected state. We will define these classes in the same curved_navigation_bar.dart file

Styling the Navigation Bar:

In the CurvedNavigationBar widget, we will use a Row widget to arrange the navigation items horizontally. We will also specify the colors for the selected and unselected states.

Implementing Tap Callbacks:

To handle tap events on the navigation items, we will pass a callback function called onTap to the CurvedNavigationBar widget. Inside the Row widget, we will wrap each navigation item with an IconButton and set the onPressed property to call the onTap callback with the corresponding index.

Clipping the Container:
To achieve the curved shape for our navigation bar, we will use the ClipPath widget. We will create a custom clipper called _CurvedClipper by extending CustomClipper. Inside the getClip method, we will define the curved shape using Path operations.

A Little Sauce

Summary of the codes

The code defines a custom curved navigation bar widget in Flutter. The navigation bar has a curved shape and contains a row of icons. Here's a breakdown of the code:

The CurvedNavigationBar widget is the main widget that represents the curved navigation bar. It takes the following parameters:
- items: a list of CurvedNavigationBarItem objects representing the navigation items.
- onTap: a callback function to handle the tap event on the navigation items.
- unselectedColor: the color of unselected navigation items.
- selectedColor: the color of the selected navigation item.
- currentIndex: the index of the currently selected item.
The CurvedNavigationBarItem class represents a single item in the navigation bar. It contains the iconData property for the default icon and the selectedIconData property for the icon when the item is selected.
The _CurvedClipper class is a custom CustomClipper that defines the curved shape of the navigation bar using the getClip method. It creates a path with a quadratic Bezier curve and lines to form the curved shape.
In the build method of the CurvedNavigationBar widget, the navigation bar is constructed using a ClipPath and a Container. The navigation items are generated using a Row and IconButton widgets. The selected and unselected colors are applied based on the currentIndex.
The Padding widget is used to add spacing at the bottom of the first and last navigation items.

To use this custom curved navigation bar, you can create an instance of CurvedNavigationBar and provide the necessary parameters. For example:

Note: Make sure to import the necessary dependencies and define the PhotoAppColors class to use the desired colors.

Entire Code
**



import 'package:flutter/material.dart';

class CurvedNavigationBar extends StatelessWidget {
  const CurvedNavigationBar({
    Key? key,
    required this.items,
    this.onTap,
    this.unselectedColor = Colors.grey,
    this.selectedColor = Colors.blue,
    this.currentIndex = 0,
  })  : assert(
          items.length == 4,
          'The correct functioning of this widget '
          'depends on its items being exactly 4',
        ),
        super(key: key);

  final List<CurvedNavigationBarItem> items;
  final ValueChanged<int>? onTap;
  final Color unselectedColor;
  final Color selectedColor;
  final int currentIndex;

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: _CurvedClipper(),
      child: Container(
        alignment: const Alignment(0, 1.6),
        height: kToolbarHeight * 1.5,
        color: Colors.white,
        padding: const EdgeInsets.symmetric(horizontal: 30),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(items.length, (index) {
            final item = items[index];
            return Padding(
              padding: EdgeInsets.only(
                bottom: (index == 0 || index == 3) ? 20.0 : 0,
              ),
              child: IconButton(
                onPressed: () => onTap?.call(index),
                color: index == currentIndex ? selectedColor : unselectedColor,
                icon: Icon(
                  index == currentIndex
                      ? item.selectedIconData ?? item.iconData
                      : item.iconData,
                ),
              ),
            );
          })
            ..insert(2, const SizedBox()),
        ),
      ),
    );
  }
}

class CurvedNavigationBarItem {
  const CurvedNavigationBarItem({
    required this.iconData,
    this.selectedIconData,
  });

  final IconData iconData;
  final IconData? selectedIconData;
}

class _CurvedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..quadraticBezierTo(size.width * .5, kToolbarHeight, size.width, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height);
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

_> The code overrides the build method of the CurvedNavigationBar widget and returns a widget tree.

The ClipPath widget is used to clip the container with a custom shape defined by the CurvedClipper class.
Inside the Container, the alignment property is set to Alignment(0, 1.6) to align the contents at the bottom of the container.
The height property is set to kToolbarHeight * 1.5 to determine the height of the navigation bar,
kToolbarHeight is a predefined height constant in Flutter.
The color property is set to Colors.white to give the navigation bar a white background color.
The padding property is set to provide horizontal spacing for the navigation item

Conclusion:

In this tutorial, we learned how to create a custom curved navigation bar in Flutter. We defined a CurvedNavigationBar widget and configured its navigation items, styling, and tap callbacks. We also used a custom clipper to create the curved shape for the navigation bar. By following these steps, you can easily create your own custom navigation bar with a curved design to enhance the user experience of your Flutter applications.

That's it! With the custom curved navigation bar implemented, you can further customize it by adjusting colors, icons, and adding animations to create a unique and visually appealing user interface. Feel free to explore more possibilities and incorporate this navigation bar into your Flutter projects. Happy coding!

Expected output:

Updated !!!: Check out the new update with in my gitub repo:
Github Repo