The Singleton Design Pattern is a creational design pattern that solves this problem by ensuring that a class has exactly one instance and provides a global point of access to it.

This pattern is widely used in mobile apps, backend systems, and Flutter applications for managing shared resources such as:

• Database connections

• API clients

• Logging services

• Application configuration

• Security checks during app bootstrap

In this article, we'll explore what the Singleton pattern is, how to implement it in Flutter/Dart, its variations (eager, lazy, and factory), and physical examples. By the end, you'll understand the proper way to use this pattern effectively and avoid common pitfalls.

Table of Contents

1. Prerequisites

2. What is the Singleton Pattern?

   • When to Use the Singleton Pattern

3. How to Create a Singleton Class

   • Eager Singleton

   • Lazy Singleton

   • Choosing Between Eager and Lazy

4. Factory Constructors in the Singleton Pattern

   • What Are Factory Constructors?

   • Implementing Singleton with Factory Constructor

5. When Not to Use a Singleton

   • Why Singletons Can Be Problematic

   • Scenarios Where You Should Avoid Singletons

   • General Guidelines

6. Conclusion

Prerequisites

Before diving into this tutorial, you should have:

1. Basic understanding of the Dart programming language

2. Familiarity with Object-Oriented Programming (OOP) concepts, particularly classes and constructors

3. Basic knowledge of Flutter development (helpful but not required)

4. Understanding of static variables and methods in Dart

5. Familiarity with the concept of class instantiation

What is the Singleton Pattern?

The Singleton pattern is a creational design pattern that ensures a class has only one instance and that there is a global point of access to the instance.

Again, this is especially powerful when managing shared resources across an application.

When to Use the Singleton Pattern

You should use a Singleton when you are designing parts of your system that must exist once, such as:

1. Global app state (user session, auth token, app config)

2. Shared services (logger, API client, database connection)

3. Resource heavy logic (encryption handlers, ML models, cache manager)

4. Application boot security (run platform-specific root/jailbreak checks)

For example, in a Flutter app, Android may check developer mode or root status, while iOS checks jailbroken device state. A Singleton security class is a perfect way to enforce that these checks run once globally during app startup.

How to Create a Singleton Class

We have two major ways of creating a singleton class:

1. Eager Instantiation

2. Lazy Instantiation

Eager Singleton

This is where the Singleton is created at load time, whether it's used or not.

In this case, the instance of the singleton class as well as any initialization logic runs at load time, regardless of when this class is actually needed or used. Here's how it works:

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

  static EagerSingleton get instance => _instance;

  void sayHello() => print("Hello from Eager Singleton");
}

//usage
void main() {
  // Accessing the singleton globally
  EagerSingleton.instance.sayHello();
}

How the Eager Singleton Works

Let's break down what's happening in this implementation:

First, EagerSingleton._internal() is a private named constructor (notice the underscore prefix). This prevents external code from creating new instances using EagerSingleton(). The only way to get an instance is through the controlled mechanism we're about to define.

Next, static final EagerSingleton _instance = EagerSingleton._internal(); is the key line. This creates the single instance immediately when the class is first loaded into memory. Because it's static final, it belongs to the class itself (not any particular instance) and can only be assigned once. The instance is created right here, at declaration time.

The static EagerSingleton get instance => _instance; getter provides global access to that single instance. Whenever you call EagerSingleton.instance anywhere in your code, you're getting the exact same object that was created when the class loaded.

Finally, sayHello() is just a regular method to demonstrate that the singleton works. You could replace this with any business logic your singleton needs to perform.

When you run the code in main(), the class loads, the instance is created immediately, and EagerSingleton.instance.sayHello() accesses that pre-created instance to call the method.

Pros:

1. This is simple and thread safe, meaning it's not affected by concurrency, especially when your app runs on multithreads.

2. It's ideal if the instance is lightweight and may be accessed frequently.

Cons:

1. If this instance is never used through the runtime, it results in wasted memory and could impact application performance.

Lazy Singleton

In this case, the singleton instance is only created when the class is called or needed in runtime. Here, a trigger needs to happen before the instance is created. Let's see an example:

class LazySingleton {
  LazySingleton._internal(); 
  static LazySingleton? _instance;

  static LazySingleton get instance {
    _instance ??= LazySingleton._internal();
    return _instance!;
  }

  void sayHello() => print("Hello from LazySingleton");
}

//usage 
void main() {
  // Accessing the singleton globally
  LazySingleton.instance.sayHello();
}

How the Lazy Singleton Works

The lazy implementation differs from eager in one crucial way: timing.

Again, LazySingleton._internal() is a private constructor that prevents external instantiation.

But notice that static LazySingleton? _instance; is declared as nullable and not initialized. Unlike the eager version, no instance is created at load time. The variable simply exists as null until it's needed.

The magic happens in the getter: _instance ??= LazySingleton._internal(); uses Dart's null-aware assignment operator. This line says "if _instance is null, create a new instance and assign it. Otherwise, keep the existing one." This is the lazy initialization: the instance is only created the first time someone accesses it.

The first time you call LazySingleton.instance, _instance is null, so a new instance is created. Every subsequent call finds that _instance already exists, so it just returns that same instance.

The return _instance!; uses the null assertion operator because we know _instance will never be null at this point (we just ensured it's not null in the previous line).

This approach saves memory because if you never call LazySingleton.instance in your app, the instance never gets created.

Pros:

1. Saves application memory, as it only creates what is needed in runtime.

2. Avoids memory leaks.

3. Is ideal for resource heavy objects while considering application performance.

Cons:

1. Could be difficult to manage in multithreaded environments, as you have to ensure thread safety while following this pattern.

Choosing Between Eager and Lazy

Now that we've broken down these two major types of singleton instantiation, it's worthy of note that you'll need to be intentional while deciding whether to create a singleton the eager or lazy way. Your use case/context should help you determine what singleton pattern you need to apply during object creation.

As an engineer, you need to ask yourself these questions when using a singleton for object creation:

1. Do I need this class instantiated when the app loads?

2. Based on the user journey, will this class always be needed during every session?

3. Can a user journey be completed without needing to call any logic in this class?

These three questions will determine what pattern (eager or lazy) you should use to fulfill best practices while maintaining scalability and high performance in your application.

Factory Constructors in the Singleton Pattern

Applying factory constructors in the Singleton pattern can be powerful if you use them properly. But first, let's understand what factory constructors are.

What Are Factory Constructors?

A factory constructor in Dart is a special type of constructor that doesn't always create a new instance of its class. Unlike regular constructors that must return a new instance, factory constructors can:

1. Return an existing instance (perfect for singletons)

2. Return a subclass instance

3. Apply logic before deciding what to return

4. Perform validation or initialization before returning an object

The factory keyword tells Dart that this constructor has the flexibility to return any instance of the class (or its subtypes), not necessarily a fresh one.

Implementing Singleton with Factory Constructor

This allows you to apply initialization logic while your class instance is being created before returning the instance.

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

  static FactoryLazySingleton get instance => _instance;

  factory FactoryLazySingleton() {
    // Your logic runs here
    print("Factory constructor called");
    return _instance;
  }
}

How the Factory Constructor Singleton Works

This implementation combines aspects of both eager and lazy patterns with additional control.

The FactoryLazySingleton._internal() private constructor and static final _instance create an eager singleton. The instance is created immediately when the class loads.

The static get instance provides the traditional singleton access pattern we've seen before.

But the interesting part is the factory FactoryLazySingleton() constructor. This is a public constructor that looks like a normal constructor call, but behaves differently. When you call FactoryLazySingleton(), instead of creating a new instance, it runs whatever logic you've placed inside (in this case, a print statement), then returns the existing _instance.

This pattern is powerful because:

1. You can log when someone tries to create an instance

2. You can validate conditions before returning the instance

3. You can apply configuration based on parameters passed to the factory

4. You can choose to return different singleton instances based on conditions

For example, you might have different configuration singletons for development vs production:

factory FactoryLazySingleton({bool isProduction = false}) {
  if (isProduction) {
    // Apply production configuration
    _instance.configure(productionSettings);
  } else {
    // Apply development configuration
    _instance.configure(devSettings);
  }
  return _instance;
}

Pros

1. You can add logic before returning an instance

2. You can cache or reuse the same object

3. You can dynamically return a subtype if needed

4. You avoid unnecessary instantiation

5. You can inject configuration or environment logic

Cons

1. Adds slight complexity compared to simple getter access

2. The factory constructor syntax might confuse developers unfamiliar with the pattern

3. If overused with complex logic, it can make debugging harder

4. Can create misleading code where FactoryLazySingleton() looks like it creates a new instance but doesn't

When Not to Use a Singleton

While singletons are powerful, they're not always the right solution. Understanding when to avoid them is just as important as knowing when to use them.

Why Singletons Can Be Problematic

Singletons create global state, which can make your application harder to reason about and test. They introduce tight coupling between components that shouldn't necessarily know about each other, and they can make it difficult to isolate components for unit testing.

Scenarios Where You Should Avoid Singletons

Avoid using the Singleton pattern if:

You need multiple independent instances

If different parts of your app need their own separate configurations or states, singletons force you into a one-size-fits-all approach.

For example, if you're building a multi-tenant application where each tenant needs isolated data, a singleton would cause data to bleed between tenants.

Alternative: Use dependency injection to pass different instances to different parts of your app. Each component receives the specific instance it needs through its constructor or a service locator.

// Instead of singleton
class UserRepository {
  final DatabaseConnection db;
  UserRepository(this.db); 
}

// Usage
final dbForTenantA = DatabaseConnection(tenantId: 'A');
final dbForTenantB = DatabaseConnection(tenantId: 'B');
final repoA = UserRepository(dbForTenantA);
final repoB = UserRepository(dbForTenantB);

Your architecture avoids shared global state

Modern architectural patterns like BLoC, Provider, or Riverpod in Flutter specifically aim to avoid global mutable state. Singletons work against these patterns by reintroducing global state.

Alternative: Use state management solutions designed for Flutter. Provider, Riverpod, BLoC, or GetX offer better ways to share data across your app while maintaining testability and avoiding tight coupling.

// Using Provider instead of singleton
class AppConfig {
  final String apiUrl;
  AppConfig(this.apiUrl);
}

// Provide it at the top level
void main() {
  runApp(
    Provider<AppConfig>(
      create: (_) => AppConfig('https://api.example.com'),
      child: MyApp(),
    ),
  );
}

// Access it anywhere in the widget tree
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final config = Provider.of<AppConfig>(context);

  }
}

It forces tight coupling between unrelated classes

When multiple unrelated classes depend on the same singleton, they become indirectly coupled. Changes to the singleton affect all these classes, making the codebase fragile and hard to refactor.

Alternative: Use interfaces and dependency injection. Define what behavior you need through an interface, then inject implementations. This way, classes depend on abstractions, not concrete singletons.

// Define an interface
abstract class Logger {
  void log(String message);
}

// Implementation
class ConsoleLogger implements Logger {
  @override
  void log(String message) => print(message);
}

// Classes depend on the interface, not a singleton
class PaymentService {
  final Logger logger;
  PaymentService(this.logger);

  void processPayment() {
    logger.log('Processing payment');
  }
}

// Easy to test with mock
class MockLogger implements Logger {
  List<String> logs = [];
  @override
  void log(String message) => logs.add(message);
}

You need clean, isolated testing

Singletons maintain state between tests, causing test pollution where one test affects another. This makes tests unreliable and order-dependent.

Alternative: Use dependency injection and create fresh instances for each test. Most testing frameworks support this pattern, allowing you to inject mocks or fakes easily.

// Testable code
class OrderService {
  final PaymentProcessor processor;
  OrderService(this.processor);
}

// In tests
void main() {
  test('processes order successfully', () {
    final mockProcessor = MockPaymentProcessor();
    final service = OrderService(mockProcessor); 

  });
}

General Guidelines

Use singletons sparingly and only when you truly need exactly one instance of something for the entire application lifecycle. Good candidates include logging systems, application-level configuration, and hardware interface managers.

For most other cases, prefer dependency injection, state management solutions, or simply passing instances where needed. These approaches make your code more flexible, testable, and maintainable.

Conclusion

The Singleton pattern is a powerful creational tool, but like every tool, you should use it strategically.

Overusing singletons can make apps tightly coupled, hard to test, and less maintainable.

But when used correctly, the Singleton pattern helps you save memory, enforce consistency, and control object lifecycle beautifully.

The key is understanding your specific use case and choosing the right implementation approach – whether eager, lazy, or factory-based – that best serves your application's needs while maintaining clean, testable code.

Table of Contents

• What is a Page Size?

• Why is this Change Being Implemented Now?

• What are the Pros and Cons of this Change?

• Should You worry About this Change?

• Is this Mandatory?

• What if You Don’t Upgrade Your App?

• How Does this Affect Hybrid Apps?

• What Would be the Code Change for This?

• How to Verify if Your App is Upgraded to a 16 KB Page Size

• Conclusion

What is a Page Size?

Think of your device's memory like a book. An operating system doesn't read memory one tiny word at a time; it reads in chunks. These chunks are called "pages." For a long time, on most ARM64 Android devices, these pages were 4 KB in size. Now, for some newer Android devices (specifically those launching with Android 13 and later), that page size has quadrupled to 16 KB.

Why is this Change Being Implemented Now?

It's all about making Android run better on modern hardware. Here are some of the reasons why is it being implemented:

Better Performance: Modern processors can handle larger memory chunks more efficiently. A 16 KB page size means the CPU spends less time managing tiny bits of memory and more time doing actual work, which can lead to faster app performance.

Smoother Operations: With fewer, larger pages to keep track of, the system itself has a little less overhead, making things a bit more streamlined.

Keeping Up with Tech: This change helps Android align with how newer ARM64 processors are designed to work best.

What are the Pros and Cons of this Change?

Every big change has its own pros and cons.

Pros

• Apps that move a lot of data around or are memory-intensive might just feel a bit snappier

• The system could run a bit more efficiently, benefiting all apps indirectly

Cons

• If your native code is constantly asking for very small bits of memory (less than 16 KB), each of those might now take up a full 16 KB page, potentially using a little more memory than before.

• If your native code makes assumptions that "memory pages are always 4 KB," it could run into issues on 16 KB page devices.

Should You worry About this Change?

You need to pay attention if:

• Your app includes native libraries (like .so files) written in C/C++. This is where the impact is most direct. If your native code does anything with memory mapping (mmap, shmem) or file I/O where it calculates offsets or sizes based on a fixed page size.

• You're developing games or other highly performance-sensitive apps with native components.

• You're targeting Android 15+ with your app updates.

You need not worry if:

• Your app is built purely in Java or Kotlin with no native components. The Android Runtime (ART) handles memory for you, so these underlying page size changes are largely invisible. You'll still get the performance benefits!

• You're using React Native or Flutter, unless you've added custom native modules that directly deal with memory mapping or page-size-dependent operations

Is this Mandatory?

Yes. Google Play is making this a requirement for app updates. You would have received an email from Google Play if your app does not support 16 KB page size yet.

As the screenshot clearly shows, "From Nov 1, 2025, if your app updates do not support 16 KB memory page sizes, you won't be able to release these updates" for apps targeting Android 15+. This gives us a solid timeframe to get things ready.

What if You Don’t Upgrade Your App?

You could notice some serious issues if your app has native libraries that aren't ready for the 16 KB page size by the deadline. Here are a few:

• Crashes: This is the most serious. Your app might crash unexpectedly (often with a "segmentation fault") if it tries to access memory incorrectly due to old page size assumptions.

• Wasted Memory: If your code allocates memory in smaller chunks than 16 KB, it could end up using more memory than necessary, potentially slowing things down or hitting memory limits.

• Performance Hit: Instead of gaining speed, your app might actually run slower if its memory operations aren't aligned with the larger page size.

Essentially, your app might work fine today, but become unstable or inefficient on newer Android devices if its native components aren't updated.

How Does this Affect Hybrid Apps?

Generally, if you're building a standard hybrid app (React Native or Flutter app) without custom native modules, you're in a pretty good spot. The frameworks themselves, and the underlying runtimes (JavaScript engine for React Native, Dart VM for Flutter), usually handle memory management, abstracting away the page size.

However, if you've implemented custom native modules in C++ for performance-critical tasks or specific hardware interactions, then you do need to check those modules.

For the vast majority of standard React Native and Flutter apps, you likely won't need direct code changes related to page size, but always ensure you're using the latest SDK versions for your framework to benefit from any underlying platform updates.

What Would be the Code Change for This?

The biggest thing to avoid in your native code is making assumptions about memory page sizes. Instead of hardcoding 4096 (for 4 KB), always ask the operating system what its current page size is.

Steps to Take:

1. Audit Your Native Code: Search your .cpp, .c, and .h files for any direct use of 4096 or 4 KB in memory allocation, buffer sizing, or alignment calculations

2. Replace with sysconf(_SC_PAGESIZE) or getpagesize(): Update any fixed values to dynamically retrieve the actual page size.

3. Recompile with Latest NDK: Make sure you're building your native libraries with a recent Android NDK (r25 or newer is a good target). This ensures your toolchain is aware of the 16 KB page size and provides correct system definitions.

How to Verify if Your App is Upgraded to a 16 KB Page Size

You can verify if your app is upgraded by running extensive testing. However, here are the few more steps.

1. Check Your Test Device's Page Size:

   • Connect your Android 13+ test device (preferably a newer one like a Pixel) via ADB

   • Run adb shell getconf PAGE_SIZE

   • If it returns 16384, you're testing on a 16 KB page device! If it returns 4096, you'll need to find a different device to properly test for this change

   • Here’s an example screenshot from my device

     

2. Run Your App Extensively: Once you have a 16 KB page device, put your app through its paces. Try all features, especially those involving native code, heavy data loading, or complex operations.

3. Monitor for Crashes: Keep a close eye on your crash reporting tools (like Crashlytics). Specifically look for native crashes (SIGSEGV, SIGBUS) coming from Android 13+ devices, as these could be related to page size issues.

4. Memory Profiling: While less direct, if you suspect memory inefficiency in your native code, use Android Studio's Memory Profiler to see if allocations are unexpectedly large or if there's excessive memory usage.

Conclusion

In this blog, we learnt about page size in Android, and why and how to upgrade your app to support 16 KB page size. I hope you have a clear idea about 16 KB page size in Android. By being proactive now, you can avoid last-minute scrambling and ensure your apps continue to perform beautifully on the latest Android devices, well past the November 2025 deadline!

You can follow my Twitter/X account to receive the top AI news everyday. If you wish to learn more about mobile app development, subscribe to my email newsletter (https://5minslearn.gogosoon.com/) and follow me on social media.

This article highlights nine common accessibility challenges in mobile apps and demonstrates how SwiftUI features can help developers address these issues effectively.

Each challenge is paired with a SwiftUI solution, sample code, and testing tips to guide developers in creating accessible and user-friendly apps.

Table of Contents

• Mobile Apps Accessibility Issues and SwiftUI Solutions

  • Missing Labels and Descriptions

  • Insufficient Color Contrast

  • Small Touch Targets

  • Inaccessible Navigation

  • Lack of Feedback for Actions

  • Complex or Confusing User Interfaces

  • Lack of Support for Assistive Technologies

  • Poorly Implemented Accessibility Features

  • Insufficient Customization Options

  • References

Mobile Apps Accessibility Issues and SwiftUI Solutions

Missing Labels and Descriptions

• Challenge: Many apps lack appropriate labels or descriptions for buttons, images, and other interactive elements, making it difficult for screen readers to communicate their purpose to visually impaired users. Without these labels, users might struggle to understand the app’s functionality.

• SwiftUI Solution: SwiftUI’s .accessibilityLabel(_:) modifier allows developers to assign clear, descriptive labels to interactive elements. These labels improve navigation and understanding by giving screen readers the necessary context.

• Example:

    Label("Shop", systemImage: "cart")
        .accessibilityLabel("Go to Shop")
  

• Testing: Enable VoiceOver on an iOS device, navigate through the app, and ensure each element has an accurate label. VoiceOver should read labels clearly to help users understand each element’s purpose without needing additional explanation.

Insufficient Color Contrast

• Challenge: Low contrast between text and background colors can make it difficult for users with visual impairments to read the content, especially for those with color vision deficiencies or low vision.

• SwiftUI Solution: Use SwiftUI’s dynamic system colors (.primary and .secondary), which automatically adapt to the light or dark mode setting on the device, ensuring good readability.

• Example:

    Text("Shop")
        .foregroundColor(.primary)  // Adapts to light or dark mode automatically
  

• If custom colors are necessary, test them against WCAG standards for color contrast, using tools like Color Contrast Analyzer.

• Testing: Use Xcode’s Accessibility Inspector to verify contrast, and ensure that text remains readable in both light and dark modes. WCAG guidelines recommend a minimum contrast ratio of 4.5:1 for normal text.

Small Touch Targets

• Challenge: Small buttons or other touch areas can be difficult for users with motor impairments to interact with accurately. Elements that are too small may require more precision than some users can provide.

• SwiftUI Solution: Set minimum touch sizes by adding padding or using .frame(minWidth:minHeight:) to ensure a comfortable touch target size.

• Example:

    Button(action: { /* Action */ }) {
        Text("Tap Me")
            .frame(minWidth: 44, minHeight: 44)
    }.padding()
  

• Testing: Manually interact with touch elements in the app on an iOS device. Ensure they are easily tappable without precise effort. Verify touch target size with the Accessibility Inspector to confirm they meet recommended minimums (44x44 points).

Inaccessible Navigation

• Challenge: Apps with limited navigability can cause frustration for users who rely on screen readers or keyboards. Without a clear reading order, navigating through the interface becomes challenging.

• SwiftUI Techniques for Accessible Navigation:

  • Group Elements with .accessibilityElement(children:): Combine related elements into a single accessible unit for more streamlined navigation.

      VStack {
          Text("Profile")
          Image("profile_picture")
      }
      .accessibilityElement(children: .combine)
    

  • Set Focus with .accessibilityFocused: Programmatically control focus on specific elements.

      Text("Special Announcement")
          .accessibilityFocused($isFocused)
    

  • Custom Actions with .accessibilityAction: Add specific actions for interactive controls like sliders or steppers.

      Slider(value: $value)
          .accessibilityAction(named: "Increase") { value += 10 }
    

  • Hide Decorative Elements with .accessibilityHidden: Exclude non-essential visuals from screen readers.

      Image("decorative_image")
          .accessibilityHidden(true)
    

• Testing: Enable VoiceOver and use swipe gestures to confirm the intended focus order. Also, use a connected keyboard or switch control to test smooth transitions and confirm navigability.

Lack of Feedback for Actions

• Challenge: Without feedback, users with visual or hearing impairments may struggle to confirm if an action has completed. Feedback like haptic, auditory, or visual cues can enhance usability.

• SwiftUI Solution: Use .accessibilityHint to provide additional information about the action that will occur.

• Example:

    Button("Submit") {
        // Submit action
    }.accessibilityHint("Submits the form")
  

• Testing: Use VoiceOver to ensure that hints are read immediately after labels. Check that users can understand what each button does without extra explanation.

Complex or Confusing User Interfaces

• Challenge: Cluttered interfaces can be overwhelming, particularly for users with cognitive impairments, who may struggle to navigate or process information effectively.

• SwiftUI Solution: Simplify layouts and use .accessibilitySortPriority to organize the reading order logically.

• Example:

    VStack {
        Text("Main Content")
            .accessibilitySortPriority(1)
        Button("Secondary Action")
            .accessibilitySortPriority(2)
    }
  

• Testing: Use VoiceOver to verify the logical reading order and ensure only relevant elements are accessible. Use .accessibilityHidden to hide decorative elements that do not add meaningful information.

Lack of Support for Assistive Technologies

• Challenge: Inadequate support for screen readers or other assistive technologies can make apps unusable for some users.

• SwiftUI Solution: Group elements with .accessibilityElement(children: .combine) for cohesive navigation. This improves readability and usability for screen reader users.

• Example:

    VStack {
        Text("Profile")
        Image("profile_picture")
    }
    .accessibilityElement(children: .combine)
  

• Testing: Check with VoiceOver that grouped elements are announced as a single unit, improving navigation flow for visually impaired users.

Poorly Implemented Accessibility Features

• Challenge: Without regular testing and updates, accessibility features can degrade over time, negatively impacting the user experience.

• SwiftUI Solution: Regular testing with VoiceOver and Xcode’s Accessibility Inspector helps maintain effective functionality.

• Testing: Conduct regular testing to detect regressions or improvements needed for accessibility. Recheck VoiceOver usability after UI updates to confirm features remain effective.

Insufficient Customization Options

• Challenge: Limited customization options, such as font size or color schemes, restrict usability for users with specific visual needs.

• SwiftUI Solution: Use .dynamicTypeSize() to allow text scaling based on the user’s preferred settings.

• Example:

    Text("Adjustable Text")
        .dynamicTypeSize(.xxxLarge)
  

• Testing: Adjust text size in iOS Accessibility settings, and ensure the app’s text scales correctly without truncating or overlapping, preserving readability.

References

1. Apple Developer Documentation: SwiftUI Accessibility

   • Comprehensive guide to accessibility in SwiftUI, covering accessibility properties like .accessibilityLabel, .accessibilityHint, .accessibilityElement, and more.

   • SwiftUI Accessibility Guide

2. Apple Human Interface Guidelines: Accessibility

   • Apple's best practices for designing accessible apps, including color contrast and touch target size recommendations.

   • Apple Human Interface Guidelines: Accessibility

3. Color Contrast Analyzer

   • A tool for testing contrast ratios to ensure color accessibility compliance with WCAG standards.

   • Color Contrast Analyzer

4. VoiceOver and Accessibility Inspector

   • Tools for testing accessibility features, available in iOS and Xcode for simulating screen reader usage and checking accessibility properties.

   • VoiceOver Documentation

   • Accessibility Inspector Documentation

5. Chandarana, N., & Gada, T. (2024). Accessibility Challenges in Current Mobile Applications: A Comprehensive Overview.

   • This journal paper provides an in-depth analysis of common accessibility challenges faced in mobile applications, discussing real-world examples and potential solutions for developers.

   • International Journal of Innovative Research in Computer and Communication Engineering.

I found it hard to understand how I could achieve letting a completely unrelated widget know about something that happens in another widget inside my application.

Take, for example, a feature I wanted to implement that would allow the user to choose the theme of the application (light/dark). Since I had a settings screen with this feature, I wondered how I could let the rest of the application know that the theme has changed and react to it.

Searching online for guidance, I noticed there was no shortage of solutions being offered. Each with it’s own degree of complexity. Bloc was a popular choice plenty of people online suggested, but in the same breath, it was said that the learning curve is quite steep. Wanting to deliver features to the application quicker, I chose to use GetIt.

Why did I choose GetIt? I think the package’s creator(s) pretty much sum it up best in their own words:

GetIt is:
- Extremely fast (O(1))
- Easy to learn/use
- Doesn’t clutter your UI tree with special Widgets to access your data like Provider or Redux does.

It is mentioned that GetIt is not a state management solution, but rather a tool to help you access objects inside your application.

So I headed off in the direction of using GetIt with a combination of Provider and ChangeNotifier in my application. While it wasn’t pretty, it got the job done.

During the development of features for my application and making it more robust, I knew in the back of my head that I wasn’t using the correct tools to manage state properly in my application.

Recently, I decided that it was time to learn Bloc properly and to convert the code inside my application to use it. I knew that it wasn’t going to be an easy task, but after going through it, I can admit that after a few trail and error attempts, it got easier to handle. With each use case I encountered, my understanding grew.

In this article, I’ll present some actual use cases where I used GetIt in combination with Provider and ChangeNotifier and replaced them with Bloc. Hopefully you can use these examples to better understand how to use Bloc in your applications.

Managing the Dark/Light Theme

I wanted my application to support different themes. To do that, I created a Settings screen where the user could control the theme color.

Settings Screen

Developing this was the first time I had to deal with changes in the application’s state that would be reflected in widgets that weren't directly related. So, besides creating a widget for the Settings screen,

class SettingsScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
              appBar: AppBar(
                title: new Text("Settings"),
              ),
              body:
                  Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Consumer<SettingsScreenManager>(
                            builder: (context, notifier, child) {
                              return  SwitchListTile(
                                  title: const Text('Dark Mode'),
                                  value: notifier.themeMode == ThemeMode.light ? false : true,
                                  secondary:
                                  new Icon(
                                      Icons.dark_mode,
                                      color: notifier.themeMode == ThemeMode.light ? Color(0xFF642ef3) : Color.fromARGB(200, 243, 231, 106)
                                  ),
                                  onChanged:notifier.handleThemeModeSettingChange
                              );
                            }
                        ),
                        //.....
                      ],
                    ),
                  )
      );
  }

I also created a manager class for it called SettingsScreenManager, where I had this method:

 void handleThemeModeSettingChange(bool isDarkModeEnabled) {
    _themeMode = _themeMode == ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
    _storageService.saveThemeModeSetting(isDarkModeEnabled);
    notifyListeners();
  }

The connection between the screen and its manager happens when the widget is created, as that is where I create the manager class. Then, throughout the widget itself, I call methods on the manager class. To make the widget redraw itself, I used the Consumer widget.

This is not the best approach, and to rectify the situation I created a Bloc to handle the theme mode:

import 'package:birthday_calendar/service/storage_service/storage_service.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

enum ThemeEvent { toggleDark, toggleLight }

class ThemeBloc extends Bloc<ThemeEvent, ThemeMode> {
  ThemeBloc(StorageService storageService, bool isDarkMode) : super(isDarkMode ? ThemeMode.dark : ThemeMode.light) {
    on<ThemeEvent>((event, emit) {
      ThemeMode themeMode = event == ThemeEvent.toggleDark ? ThemeMode.dark : ThemeMode.light;
      emit(themeMode);
      storageService.saveThemeModeSetting(themeMode == ThemeMode.dark ? true : false);
    });
  }
}

Let’s break down the components of this Bloc:

1. I have declared an enum called ThemeEvent to signify the user’s choice of light/dark theme
2. Since the state of the Bloc is directly the ThemeMode object, there was no need to create a specific State object
3. Whenever the theme changes, I emit the chosen theme mode

And I initialized this bloc inside my main.dart file in order for it to be accessible to any widget in the widget hierarchy. Also, I wanted any change that occurred due to this Bloc to be enacted on the entire application.

 @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (context) => ThemeBloc(storageService, isDarkMode)),
        //...
      ],
      child: BlocBuilder<ThemeBloc, ThemeMode>(
        builder: (context, state) {
          return MaterialApp(
              title: applicationName,
              theme: ThemeData.light(),
              themeMode: state,
              darkTheme: ThemeData.dark(),
              home: MainPage(
                  key: Key("BirthdayCalendar"),
                  notificationService: notificationService,
                  contactsService: contactsService,
                  storageService: storageService,
                  title: applicationName,
                  currentMonth: BirthdayCalendarDateUtils.getCurrentMonthNumber()));
        },
      ),
    );
  }

Requesting Permission

There is a feature in my application that allows users to import their contacts. In order to do so, there is a requirement to first ask a runtime permission.

Initially, I handled this using the same approach as in the previous section, utilizing the SettingsScreenManager class, a Consumer, and a Provider.

Consumer<SettingsScreenManager>(
   builder: (context, notifier, child) {
    return ListTile(
      title: const Text("Import Contacts"),
      leading: Icon(Icons.contacts,
          color: !notifier.isContactsPermissionPermanentlyDenied ? Colors.blue : Colors.grey
      ),
      onTap: () {
        Provider.of<SettingsScreenManager>(context, listen: false).handleImportingContacts(context);
      },
      enabled: !notifier.isContactsPermissionPermanentlyDenied
  );
}),

Replacing this was a step up from creating the ThemeBloc since I needed to handle the different permission statuses and also to remember if the permission was permanently denied.

enum ContactsPermissionStatusEvent {
  PermissionUnknown,
  PermissionDenied,
  PermissionGranted,
  PermissionPermanentlyDenied
}

class ContactsPermissionStatusBloc
    extends Bloc<ContactsPermissionStatusEvent, PermissionStatus> {
  ContactsPermissionStatusBloc(ContactsService contactsService)
      : super(PermissionStatus.denied) {
    on<ContactsPermissionStatusEvent>((event, emit) async {
      if (event == ContactsPermissionStatusEvent.PermissionUnknown) {
        bool permissionStatus =
            await contactsService.isContactsPermissionsPermanentlyDenied();
        if (permissionStatus) {
          emit(PermissionStatus.permanentlyDenied);
          return;
        }
      }
      emit(_convertEventNameToPermissionStatus(event));
    });
  }

  PermissionStatus _convertEventNameToPermissionStatus(
      ContactsPermissionStatusEvent event) {
    switch (event) {
      case ContactsPermissionStatusEvent.PermissionDenied:
        return PermissionStatus.denied;
      case ContactsPermissionStatusEvent.PermissionGranted:
        return PermissionStatus.granted;
      case ContactsPermissionStatusEvent.PermissionPermanentlyDenied:
        return PermissionStatus.permanentlyDenied;
      default:
        return PermissionStatus.denied;
    }
  }
}

This Bloc has the following:

• A ContactsPermissionStatusEvent enum that correlates with the different permissions status the OS has
• The state for this Bloc can be easily represented with the PermissionStatus class
• I have a private helper method called _convertEventNameToPermissionStatus to help in converting the event name to it’s corresponding permission status

You might be asking yourself why I added an event called PermissionUnknown. I did this so I could get the permission status in advance of the user navigating to the SettingsScreen. In the case where the user previously chose to permanently deny the permission, I wanted to gray out the option to import contacts for them.

To achieve this, I created the Bloc in the main.dart file:

@override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (context) => ThemeBloc(storageService, isDarkMode)),
        BlocProvider(
            create: (context) => ContactsPermissionStatusBloc(contactsService)),
        BlocProvider(create: (context) => VersionBloc())
      ],
      child: BlocBuilder<ThemeBloc, ThemeMode>(
        builder: (context, state) {
          return MaterialApp(

and I sent the event inside the initState method of the widget that is the parent of the SettingsScreen.

 @override
  void initState() {
    //....
    BlocProvider.of<ContactsPermissionStatusBloc>(context)
        .add(ContactsPermissionStatusEvent.PermissionUnknown);
    super.initState();
  }

And instead of the huge chunk of code I had earlier, I now have this:

BlocBuilder<ContactsPermissionStatusBloc, PermissionStatus>(
              builder: (context, state) {
            return ListTile(
                title: const Text("Import Contacts"),
                leading: Icon(Icons.contacts, color: Colors.blue),
                onTap: () {
                  _handleImportingContacts(context);
                },
                enabled: state.isPermanentlyDenied ? false : true);
          }),

Interacting with a List

Part of my application allows users to add/remove birthdays on specific calendar dates. As with previous features, here too I created a manager class to handle the state for if a user added/removed a birthday.

Part of the logic involved the presentation of an alert dialog with fields to add a birthday. This logic proved to be the most robust when trying to migrate to Bloc, as I had to think about all of the user flows.

This is what that widget looked like:

@override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BirthdaysForCalendarDayManager(this.birthdays, this.dateOfDay),
          builder: (context, provider) {
              return Scaffold(
              appBar: AppBar(
              title: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text(
                      "Birthdays for ${_dateService.convertMonthToWord(this.dateOfDay.month)} ${this.dateOfDay.day}")
              )
          ),
            body: Center(
                child: Column(
                  children: [
                      Consumer<BirthdaysForCalendarDayManager>(
                          builder: (context, data, child) =>
                          Expanded(child:
                            ListView.builder(
                                  itemCount: data.birthdays.length,
                                  itemBuilder: (BuildContext context, int index) {
                                  return BirthdayWidget(
                                    key: Key(data.birthdays[index].name),
                                      birthdayOfPerson: data.birthdays[index],
                                      onDeletePressedCallback: () {
                                        Provider.of<BirthdaysForCalendarDayManager>(context, listen: false).removeBirthdayFromList(data.birthdays[index]);
                                    },
                                    indexOfBirthday: index);
                                  },
                                 ),
                           ),
                          )
                      ],
                   )
                ),
                floatingActionButton: FloatingActionButton(
                onPressed: () {
                  Provider.of<BirthdaysForCalendarDayManager>(context, listen: false).handleAddBirthdayBtnPressed(context, dateOfDay);
                  },
                child: Icon(Icons.add)),
              );
          },
    );
  }

And the manager class:

class BirthdaysForCalendarDayManager extends ChangeNotifier {

  NotificationService _notificationService = getIt<NotificationService>();
  StorageService _storageService = getIt<StorageService>();
  final List<UserBirthday> _currentBirthdays = [];
  DateTime date = DateTime.now();

  UnmodifiableListView<UserBirthday> get birthdays => UnmodifiableListView(_currentBirthdays);

  BirthdaysForCalendarDayManager(List<UserBirthday> birthdays, DateTime dateTime) {
    //....
  }

  void _handleUserInput(UserBirthday userBirthday) {
    //....
  }

  void _addBirthdayToList(UserBirthday userBirthday) {
    //....
    notifyListeners();
  }

  void removeBirthdayFromList(UserBirthday birthdayToRemove) async {
    //....
    notifyListeners();
  }

  void handleAddBirthdayBtnPressed(BuildContext context, DateTime dateOfDay) async {
    //....
  }

So how can we go about migrating all this logic to Bloc? Well, first let’s think of the different events we will need:

1. Adding an item to the list
2. Removing an item to the list
3. Presenting the dialog that allows users to add an item to the list (this is used to be able to show the dialog)

So our inner enum for events can look like:

enum BirthdayEvent { AddBirthday, RemoveBirthday, ShowAddBirthdayDialog }

But what will our BirthdaysEvent include?

class BirthdaysEvent {
  final BirthdayEvent eventName;  // 1
  final UserBirthday? birthday;   // 2
  final bool? shouldShowAddBirthdayDialog; // 3
  final List<UserBirthday> birthdays; // 4
  final DateTime? date;  //5

  BirthdaysEvent(
      {required this.eventName,
      this.birthday,
      this.shouldShowAddBirthdayDialog,
      required this.birthdays,
      this.date});
}

1. The event name
2. The birthday we will either add or remove
3. A flag to indicate if we should present the dialog
4. The whole list of birthdays for the specific date
5. The date the user wants to add/remove birthdays to/from

You may have noticed that not all fields are required to create a BirthdaysEvent. This is because not all of these fields are necessary for the different types of events. For example, when the user wants to add another birthday, the second argument (titled birthday) is irrelevant since we want to create a birthday.

Next, we need to think about what should be included in our state. Looking at the code above, it is clear that we need:

• To keep the list of birthdays, as we are either removing from or adding to it
• A flag to indicate if we should show the add birthday dialog
• The current date to add/remove birthdays to

class BirthdaysState {
  final DateTime? date;
  final List<UserBirthday>? birthdays;
  final bool showAddBirthdayDialog;

  BirthdaysState(
      {this.date, this.birthdays, required this.showAddBirthdayDialog});
}

So we got our events in place and our state as well. Now it's time to implement the logic in our bloc that handles each of these events and create a new state:

class BirthdaysBloc extends Bloc<BirthdaysEvent, BirthdaysState> {
  BirthdaysBloc(NotificationService notificationService,
      StorageService storageService, List<UserBirthday> birthdaysForDate)
      : super(BirthdaysState(
            date: DateTime.now(),
            birthdays: birthdaysForDate,
            showAddBirthdayDialog: false)) {
    on<BirthdaysEvent>((event, emit) {
      switch (event.eventName) {
        case BirthdayEvent.AddBirthday:
          _handleAddEvent(event, emit, storageService, notificationService);
          break;
        case BirthdayEvent.RemoveBirthday:
          _handleRemoveEvent(event, emit, storageService, notificationService);
          break;
        case BirthdayEvent.ShowAddBirthdayDialog:
          emit(new BirthdaysState(showAddBirthdayDialog: true));
          break;
      }
    });
  }

If we look at one event, ShowAddBirthdayDialog, you can see that we are just emitting a new BirthdayState where the showAddBirthdayDialog is set to true. But where is this handled? I had to heavily refactor the widget from above in order for it to respond for changes in the state.

  @override
  Widget build(BuildContext context) {
   return BlocProvider(                            // 1
        create: (context) =>
            BirthdaysBloc(notificationService, storageService, birthdays),
        child: BlocBuilder<BirthdaysBloc, BirthdaysState>(   // 2
            builder: (context, state) {
          return Scaffold(
            appBar: AppBar(
                title: FittedBox(
                    fit: BoxFit.fitWidth,
                    child: Text(
                        "Birthdays for ${BirthdayCalendarDateUtils.convertMonthToWord(this.dateOfDay.month)} ${this.dateOfDay.day}"))),
            body: Center(
                child: Column(
              children: [
                (state.birthdays == null || state.birthdays!.length == 0)
                    ? Spacer()
                    : Expanded(
                        child: ListView.builder(
                          itemCount: state.birthdays != null
                              ? state.birthdays!.length
                              : 0,
                          itemBuilder: (BuildContext context, int index) {
                            return BirthdayWidget(
                                key: Key(state.birthdays![index].name),
                                birthdayOfPerson: state.birthdays![index],
                                onDeletePressedCallback: () {  // 3
                                  BlocProvider.of<BirthdaysBloc>(context).add(
                                      new BirthdaysEvent(
                                          eventName:
                                              BirthdayEvent.RemoveBirthday,
                                          birthday: state.birthdays![index],
                                          birthdays: birthdays));
                                },
                                indexOfBirthday: index,
                                storageService: storageService,
                                notificationService: notificationService);
                          },
                        ),
                      ),
                BlocListener<BirthdaysBloc, BirthdaysState>(  // 4
                  listener: (context, state) {
                    if (state.showAddBirthdayDialog) {
                      showDialog(
                          context: context,
                          builder: (_) => BlocProvider.value(  // 5
                              value: BlocProvider.of<BirthdaysBloc>(context),
                              child: AddBirthdayForm(
                                  dateOfDay: dateOfDay,
                                  storageService: storageService)));
                    }
                  },
                  child: Spacer(),
                )
              ],
            )),
            floatingActionButton: FloatingActionButton(
                onPressed: () { // 6
                  BlocProvider.of<BirthdaysBloc>(context).add(BirthdaysEvent(
                      eventName: BirthdayEvent.ShowAddBirthdayDialog,
                      shouldShowAddBirthdayDialog: true,
                      birthdays: birthdays));
                },
                child: Icon(Icons.add)),
          );
        }));
  }

There is a lot to unpack here, so let’s take it one step at a time.

1. The BirthdaysBloc is created inside this widget since it is not needed anywhere else up the widget tree
2. We are using a BlocBuilder so the widget will re-draw itself when the state changes
3. When a birthday is chosen to be deleted, we create a RemoveBirthday event and pass along all the necessary information
4. We are using a BlocListener to handle the changes in the state in order to show the AlertDialog for adding a new birthday
5. Since our BirthdaysBloc is not found on the global level, it is necessary to pass it in to the AddBirthdayForm widget using BlocProvider
6. When the user presses the floating action button to signify an intent to add a birthday, we create a ShowAddBirthdayDialog event

Notice that, after all these changes, the manager class was no longer needed and therefore, the code itself is more straightforward and easier to maintain.

You are more than welcome to check out the entirety of the code shown above in the GitHub repository here:

And if you like, you can check out the application itself, here.

The application leverages some of Supabase's features, such as authentication and database storage, to build a secured full-stack mobile application.

Additionally, you'll learn how to create React Native applications with Expo, generate a set of questions and answers from ChatGPT, and perform CRUD operations and user authentication with Supabase.

To fully understand this tutorial, you'll need to have a basic knowledge of React Native and data fetching in React applications.

Table of Contents

• Mobile Application Demo
• How to set up a React Native application with Expo
• How to style the React Native application with Tailwind CSS
• How to build the application screens
• How to build the authentication screens
• How to build the tab screens
• How to build the stack screens
• How to generate quiz questions and answers from ChatGPT
• How to add Supabase to React Native
• How to add Supabase authentication to React Native applications
• How to sign up new users
• How to sign in existing users
• How to log users out of the application
• How to protect screens from unauthenticated users
• How to interact with the Supabase database
• How to save user's score to the database
• How to retrieve data from Supabase
• Conclusion

Mobile Application Demo

To preview the application, download Expo Go and paste the links below into the app URL field:

Android: exp://u.expo.dev/update/a4774250-e156-4d34-bcfc-a4f2549c2e1d
iOS: exp://u.expo.dev/update/7e5f8ba5-89c4-4c1d-b219-a613ace642df

Scan the QR code to preview the mobile quiz application within the Expo Go application

How to Set Up a React Native Application with Expo

Expo is an open-source platform that allows you to create cross-platform applications easily with JavaScript. It saves us from the complex configurations required to create a native application with the React Native CLI, making it the easiest and fastest way to build and publish React Native apps.

Execute the code snippet below to create a new Expo project that uses Expo Router for navigating between screens.

npx create-expo-app@latest --template tabs@50

Expo Router is an open-source file-based routing system that enables users to navigate between screens easily. It is similar to Next.js, where each file name represents its route name.

Start the development server to ensure that the app is working as expected.

npx expo start

How to style the React Native application with Tailwind CSS

Tailwind CSS is a CSS framework that lets you create modern and stunning applications easily.

However, to style Expo applications using Tailwind CSS, you need to install NativeWind – a library that uses Tailwind CSS as its scripting language.

Run the code snippet below to install NativeWind and its dependencies:

npx expo install nativewind@^4.0.1 react-native-reanimated tailwindcss

Execute npx tailwindcss init within your terminal to create a tailwind.config.js file. Update the file with the code snippet below:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./app/**/*.{js,jsx,ts,tsx}"],
    presets: [require("nativewind/preset")],
    theme: {
        extend: {},
    },
    plugins: [],
};

Create a globals.css file within the root of your project and add the Tailwind directives below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the babel.config.js file with the code below:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Create a metro.config.js file within the root of your project and paste the code snippet below into the file:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname)

module.exports = withNativeWind(config, { input: './globals.css' })

Finally, import the ./globals.css file into the app/_layout.tsx file to enable you to style your application with Tailwind CSS:

//👉🏻 Within ./app/_layout.tsx

import "../globals.css";

Great job on creating the React Native project with Expo! Now, you're ready to add some style using Tailwind CSS. If you encounter any problems while installing NativeWind, check out the documentation for a step-by-step guide.

How to Build the Application Screens

Here, I'll guide you through building the application screens. They are divided into three categories:

• The Authentication screens – the register and login screens.
• The Tab layout screens – the dashboard, leaderboard, and profile screens.
• The Stack screens – the test and test completion screens.

The application prompts new users to create an account and log in before allowing access to the Tab layout screens.

On the dashboard screen, users can take tests on various topics. The leaderboard screen showcases the top ten users. Users can log out or preview their previous attempts on the profile page.

Application Demo

How to Build the Authentication Screens

The authentication screens accept the user's email and password and ensure the credentials are valid before creating an account or granting access to the application.

The Authentication Screens

Create an index.tsx and a register.tsx file within the app folder and a component that accepts the user's email and password using the React Native TextInput component.

import { Text, View, TextInput, Pressable, Alert } from "react-native";
import { Link, useRouter } from "expo-router";
import { useState } from "react";

export default function LoginScreen() {
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
    const router = useRouter();

    //👇🏻 triggered when the user submits the email & password
    const handleLogin = () => {
        if (!email.trim() || !password.trim())
            return Alert.alert("Error", "Please fill in all fields");
        setLoading(true);
        console.log({
            email,
            password,
        });
        router.replace("/(tabs)/");
    };

    return (
        <View>
        {/** -- user interface--*/}
        </View>
    );
}

The code snippet stores the user's email and password in states using the React useState hook. The handleLogin function accepts the user's email and password when the form is submitted and ensures that they are not empty before logging them to the console and redirecting the user to the Dashboard page.

You can create the user interface using the code snippet below. It displays the input fields for the user's credentials and an interactive Sign-in button that executes the handleLogin function. Additionally, the loading state ensures that the button is only pressed once.

<View className=' flex-1'>
    <View className='w-full px-4'>
        <Text className='text-3xl mb-4 font-bold text-white text-center'>
            Log in
        </Text>

        <Text className='text-lg text-gray-200'>Email Address</Text>
        <TextInput
            className='w-full border-b-[1px] py-4 rounded-md mb-3 text-white font-bold'
            value={email}
            onChangeText={setEmail}
        />
        <Text className='text-lg text-gray-200'>Password</Text>
        <TextInput
            className='w-full border-b-[1px] py-4 rounded-md mb-3 text-white font-bold'
            secureTextEntry
            value={password}
            onChangeText={setPassword}
        />
        <Pressable
            className={`w-full ${
                loading ? "bg-orange-200" : "bg-orange-600"
            } rounded-xl p-4 border-[1px] border-orange-200`}
            disabled={loading}
            onPress={() => handleLogin()}
        >
            <Text className='text-white text-center font-bold text-xl'>
                {loading ? "Authenticating..." : "Sign in"}
            </Text>
        </Pressable>
        <Text className='text-center mt-2 text-orange-200'>
            Don't have an account?{" "}
            <Link href='/register'>
                <Text className='text-white'>Register</Text>
            </Link>
        </Text>
    </View>
</View>

For instance, the loading state becomes true when a user clicks the Sign-in button. The Pressable component (button) has a disabled attribute set to the loading state to ensure that the user does not press the button multiple times. Additionally, you can use the loading state to notify the user that the request is processing.

The register.tsx file is also similar to the login.tsx file. You only need to change the words from Login to Register.

How to Build the Tab Screens

The Tab Screens consist of the Dashboard, Leaderboard, and Profile screens.

The Tab Screens

Create a (tabs) folder containing index.tsx, leaderboard.tsx, profile.tsx, and _layout.tsx files within the app folder.

cd app
mkdir (tabs)
cd (tabs)
touch index.tsx leaderboard.tsx profile.tsx _layout.tsx

After creating the _layout.tsx file within the (tabs) folder, update the _layout.tsx to specify Tab screen navigation for the newly created screens. The screens use icons from the Expo Vector Icons library.

import { Tabs } from "expo-router";
import { Ionicons, MaterialIcons, FontAwesome5 } from "@expo/vector-icons";
import { ActivityIndicator } from "react-native";

export default function TabScreen() {
    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: "#f97316",
                tabBarInactiveTintColor: "gray",
                tabBarShowLabel: false,
                headerShown: false,
                tabBarStyle: {
                    backgroundColor: "#ffedd5",
                    borderTopColor: "#ffedd5",
                },
            }}
        >
            <Tabs.Screen
                name='index'
                options={{
                    tabBarIcon: ({ color }) => (
                        <Ionicons name='home' size={24} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name='leaderboard'
                options={{
                    tabBarIcon: ({ color }) => (
                        <MaterialIcons name='leaderboard' size={24} color={color} />
                    ),
                }}
            />
            <Tabs.Screen
                name='profile'
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesome5 name='user-alt' size={24} color={color} />
                    ),
                }}
            />
        </Tabs>
    );
}

Next, update the RootLayoutNav component within the _app/layout.tsx file to render all the screens within the application.

function RootLayoutNav() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name='(tabs)' />
            <Stack.Screen name='(stack)' />
            <Stack.Screen name='index' />
            <Stack.Screen name='register' />
        </Stack>
    );
}

The Dashboard Screen

Update the component to allow users to select four categories from a list of categories.

export default function HomeScreen() {
    const greet = getGreeting();
    const router = useRouter();
    const { session } = useAuth();
    const [loading, setLoading] = useState<boolean>(false);
    const [userCategories, setUserCategories] = useState<string[]>([]);

    const fetchQuestions = async () => {};

    const handleStartTest = async () => {
        Alert.alert("Start Test", "Are you sure you want to start the test?", [
            {
                text: "Cancel",
                style: "destructive",
            },
            {
                text: "Yes",
                onPress: () => fetchQuestions(),
            },
        ]);
    };

    return (
        <SafeAreaView className='flex-1 bg-orange-100 px-4 py-2'>
            <View className='flex flex-row items-center justify-between mb-2'>
                <View>
                    <Text className='font-bold text-2xl mb-[1px]'>
                        Good morning
                        <Ionicons name='partly-sunny-sharp' size={24} color='orange' />
                    </Text>

                    <Text className='text-lg'>Welcome User</Text>
                </View>
            </View>
            {userCategories.length === 4 && (
                <Pressable
                    className={`w-full h-[70px] flex items-center justify-center ${
                        loading ? "bg-orange-300" : "bg-orange-500"
                    } rounded-xl mb-2`}
                    disabled={loading}
                    onPress={() => handleStartTest()}
                >
                    <Text className='text-xl font-bold text-orange-50'>
                        {loading ? "Loading questions..." : "START TEST"}
                    </Text>
                </Pressable>
            )}

            <View className='w-full flex-1'>
                <Text className='text-xl font-bold text-orange-500 mb-4'>
                    Available Categories
                </Text>
                <FlatList
                    data={categories}
                    numColumns={2}
                    contentContainerStyle={{ width: "100%", gap: 10 }}
                    columnWrapperStyle={{ gap: 10 }}
                    renderItem={({ item }) => (
                        <Categories
                            item={item}
                            userCategories={userCategories}
                            setUserCategories={setUserCategories}
                        />
                    )}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={(item) => item.id}
                />
            </View>
        </SafeAreaView>
    );
}

The code snippet above renders a list of categories where users can select only four categories to answer questions on and start the quiz.

The Dashboard Screen

The Leaderboard Screen

The Leaderboard screen displays the top ten users ranked in descending order.

import { Text, FlatList, SafeAreaView } from "react-native";
import Board from "../../components/Board";

interface Props {
    total_score: number;
    user_id: string;
}

export default function LeaderboardScreen() {
    const [leaderboard, setLeaderboard] = useState<Props[]>([]);

    return (
        <SafeAreaView className='flex-1 bg-orange-100 p-4'>
            <Text className='text-2xl font-bold text-gray-500 text-center mb-6'>
                Leaderboard
            </Text>

            <FlatList
                data={leaderboard}
                renderItem={({ item }) => <Board item={item} />}
                keyExtractor={(item) => item.user_id}
                showsVerticalScrollIndicator={false}
            />
        </SafeAreaView>
    );
}

The code snippet above renders a FlatList with ten items. You can create an array containing ten users and pass it into the FlatList for now.

The Profile Screen

The Profile Screen displays the user's image, recent attempts, and a log-out button that enables the user to sign out of the application.

export default function ProfileScreen() {
    const [loading, setLoading] = useState<boolean>(false);
    const [total_score, setTotalScore] = useState<number>(0);
    const [attempts, setAttempts] = useState<string[]>([]);

    const handleSignOut = async () => {
        setLoading(true);
    };

    return (
        <SafeAreaView className='flex-1 bg-orange-100 p-4'>
            <View className='flex items-center justify-center mb-6'>
                <Text className='text-gray-600 mb-[1px]'>
                    <FontAwesome name='star' size={20} color='red' />
                    <Text>45</Text>
                </Text>
                <Text className='text-gray-600 mb-2'>@dhastix</Text>

                <Pressable onPress={() => handleSignOut()} disabled={loading}>
                    <Text className='text-red-500'>
                        {loading ? "Logging out..." : "Log out"}
                    </Text>
                </Pressable>
            </View>

            <Text className='font-bold text-xl text-gray-700 mb-3 px-4'>
                Recent Attempts
            </Text>

            <FlatList
                data={attempts}
                contentContainerStyle={{ padding: 15 }}
                renderItem={({ item }) => <Attempts item={item} />}
                keyExtractor={(item, index) => index.toString()}
                showsVerticalScrollIndicator={false}
            />
        </SafeAreaView>
    );
}

The code snippet above displays the user's image, the sign-out button, and all the user's attempts. You can create an array of items for testing purposes.

How to Build the Stack Screens

The Stack Screens comprise two screens – the quiz screen and the screen that displays the user's score after completing a quiz session.

The Stack Screens

The Quiz Screen

The Quiz Screen displays a timer that countdowns from 15 seconds before moving to the next question. It shows the question, its category, available options, the Skip and Next buttons, and a cancel icon.

Create a similar screen to the one shown below. You can use this as a guide.

The Quiz Screen

The Quiz Completion Screen

It displays the user's score after completing a test.

import {
    SafeAreaView,
    Text,
    Pressable,
    View,
    ImageBackground,
} from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";

export default function CompletedScreen() {
    const { score } = useLocalSearchParams();

    return (
        <View className='flex flex-1 bg-orange-400'>
            <ImageBackground
                source={{ uri: "https://source.unsplash.com/NAP14GEjvh8" }}
                className='flex-1 p-4'
            >
                <SafeAreaView />
                <Pressable onPress={() => router.replace("/(tabs)/")}>
                    <MaterialIcons name='cancel' size={60} color='white' />
                </Pressable>

                <View className='flex-1 flex items-center justify-center'>
                    <View className='bg-orange-50 w-full py-[50px] rounded-xl p-4 flex items-center justify-center shadow-lg shadow-orange-500'>
                        <Text className='text-3xl text-orange-600 font-bold mb-4'>
                            {Number(score) > 20 ? "Congratulations🥳" : "Sorry! You lose 🥲"}
                        </Text>
                        <Text className='font-bold text-xl'>You scored {score}!</Text>
                    </View>
                </View>
            </ImageBackground>
        </View>
    );
}

The code snippet above accepts the user's score as a parameter after completing the quiz and displays the score to the user.

How to Generate Quiz Questions and Answers from ChatGPT

When building a quiz application, the first question is: how do you get the questions and options for the application? You can either create a list of questions or search for a suitable public API.

However, I'll guide you through creating a list of questions and options in JSON format using ChatGPT. Use this prompt to generate questions and answers from ChatGPT:

Generate 25 distinct questions on and ensure they are in JSON format containing an id, category which is , a question attribute containing the question, an options array of 3 options, and an answer property.

The prompt returns a JSON result containing the questions and answers. You can host them on GitHub or save them to a database.

The questions and answers I'm using in this mobile application are available on GitHub. Feel free to clone or copy the files.

Once your questions and answers are ready, you can connect the application to Supabase.

How to Add Supabase to React Native

Supabase is an open-source Firebase alternative that enables you to create secured and scalable software applications within a few minutes.

It provides a secured Postgres database, a complete user management system that handles various forms of authentication (including email and password, email sign-in, and social authentication), a file storage system that lets you store and serve files of any size, real-time communication, and many other features.

In this tutorial, I'll walk you through the following:

• How to authenticate users and control access to some application screens with Supabase.
• How to save the users' scores to the database to enable you to rank them based on their scores.

First, you need to install Supabase and its required dependencies. You can do that with the following commands:

npm install @supabase/supabase-js 
npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill
npx expo install expo-secure-store

Create a supabase.ts file within your project and copy the code snippet below into the file to initiate Supabase:

import "react-native-url-polyfill/auto";
import * as SecureStore from "expo-secure-store";
import { createClient } from "@supabase/supabase-js";

const ExpoSecureStoreAdapter = {
    getItem: (key: string) => {
        return SecureStore.getItemAsync(key);
    },
    setItem: (key: string, value: string) => {
        SecureStore.setItemAsync(key, value);
    },
    removeItem: (key: string) => {
        SecureStore.deleteItemAsync(key);
    },
};

const supabaseUrl = "YOUR_REACT_NATIVE_SUPABASE_URL";
const supabaseAnonKey = "YOUR_REACT_NATIVE_SUPABASE_ANON_KEY";

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
    auth: {
        storage: ExpoSecureStoreAdapter as any,
        autoRefreshToken: true,
        persistSession: true,
        detectSessionInUrl: false,
    },
});

Next, visit the Supabase homepage, sign in, and create a new organization and project.

Create a new Supabase project

Click the Settings icon on the sidebar and select API to copy the project URL and the public API key.

Supabase API settings containing project credentials

Create a .env.local file and copy the credentials into the variables. Update the supabase.ts file to use the Supabase URL and API key.

EXPO_PUBLIC_API_URL=<YOUR_SUPABASE_URL>
EXPO_PUBLIC_API_KEY=<YOUR_SUPABASE_API_KEY>

Congratulations! You can now interact with Supabase from your application and access various features such as authentication, database, file storage, and so on.

How to Add Supabase Authentication to React Native Applications

Supabase offers various forms of authentication. But we only need the email and password method of authentication for this application.

How to sign up new users

The code snippet below accepts an email and a password and creates an account for the user. Otherwise, it returns an error if any of the credentials is invalid.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 sign up function
const handleRegister = async () => {
    if (!email.trim() || !password.trim())
        return Alert.alert("Error", "Please fill in all fields");
    const { error } = await supabase.auth.signUp({ email, password });
    if (error) return Alert.alert("Error", error.message);
    router.replace("/");
};

With the supabase.auth.signUp() function, Supabase handles the authentication process. If successful, the user is redirected to the login page. Otherwise, it displays an error message.

How to sign in existing users

This function allows existing users to access the application. It accepts the user's email and password and logs the user into the application.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 register function
const handleLogin = async () => {
    if (!email.trim() || !password.trim())
        return Alert.alert("Error", "Please fill in all fields");
    const { error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) return Alert.alert("Error", error.message);
    router.replace("/(tabs)/");
};

The supabase.auth.signInWithPassword() function validates the user's email and password and redirects the user to the Dashboard screen. Otherwise, it returns the necessary authentication error.

How to log users out of the application

Supabase also allows users to sign out of the application. You can execute this function when the user clicks a button within the Profile page.

//👇🏻 import supabase from supabase file
import { supabase } from "../lib/supabase";

//👇🏻 sign out function
const handleSignOut = async () => {
    try {
        const { error } = await supabase.auth.signOut();
        if (error) throw error;
    } catch (error) {
        console.log(error);
    }
};

How to protect screens from unauthenticated users

You've been able to add the sign-up, sign-in, and log-out functionalities to the React Native application. But the Dashboard and other screens containing sensitive data are still accessible to unauthenticated users.

How do we fix this?

In this section, I'll walk you through how to protect screens from unauthorized users using the React Context API.

The React Context API allows us to pass data through the component tree without needing to pass props down manually at every level.

Create an AuthProvider.tsx file. This is where the data to be passed down the application screens is stored. Copy the code snippet below into the file:

import { supabase } from "./supabase";
import { Session } from "@supabase/supabase-js";
import {
    PropsWithChildren,
    createContext,
    useContext,
    useEffect,
    useState,
} from "react";

type AuthData = {
    session: Session | null;
    loading: boolean;
};

//👇🏻 data to be passed down the components
const AuthContext = createContext<AuthData>({
    session: null,
    loading: true,
});

export default function AuthProvider({ children }: PropsWithChildren) {
    const [session, setSession] = useState<Session | null>(null);
    const [loading, setLoading] = useState(true);

    //👇🏻 fetches the current user's session
    useEffect(() => {
        const fetchSession = async () => {
            const {
                data: { session },
            } = await supabase.auth.getSession();
            setSession(session);
            setLoading(false);
        };

        fetchSession();
        supabase.auth.onAuthStateChange((_event, session) => {
            setSession(session);
            setLoading(false);
        });
    }, []);

    return (
        <AuthContext.Provider value={{ session, loading }}>
            {children}
        </AuthContext.Provider>
    );
}
//👇🏻 custom hook for using the context (data)
export const useAuth = () => useContext(AuthContext);

The code snippet retrieves the current user's session. If the user is signed in, the session and loading state variables are updated to show that the user is active, and they are passed into other components within the application.

The useAuth custom hook allows you to access the state variables (session and loading) within the application screens.

To access the context (data) available within the application screens, wrap the entire application with the AuthProvider. So now, update the RootLayoutNav component within the app/_layout.tsx file as shown below:

import AuthProvider from "../lib/AuthProvider";

function RootLayoutNav() {
    return (
        <AuthProvider>
            <Stack screenOptions={{ headerShown: false }}>
                <Stack.Screen name='(tabs)' />
                <Stack.Screen name='(stack)' />
                <Stack.Screen name='index' />
                <Stack.Screen name='register' />
            </Stack>
        </AuthProvider>
    );
}

Congratulations! You've successfully set up the context. Next, how do we read the context and ensure that only authenticated users can view some of the application screens?

You can do this using the custom useAuth hook. For example, you can protect the Tabs screens via the (tabs)/_layout.tsx file.

import { Tabs, Redirect } from "expo-router";
import { useAuth } from "../../lib/AuthProvider";
import { ActivityIndicator } from "react-native";

export default function TabScreen() {
    const { session, loading } = useAuth();

    if (!session) {
        return <Redirect href='/' />;
    }

    if (loading) {
        return <ActivityIndicator size='large' color='#f97316' />;
    } else {
        return (
            <Tabs
                screenOptions={{
                    tabBarActiveTintColor: "#f97316",
                    tabBarInactiveTintColor: "gray",
                    tabBarShowLabel: false,
                    headerShown: false,
                    tabBarStyle: {
                        backgroundColor: "#ffedd5",
                        borderTopColor: "#ffedd5",
                    },
                }}
            >
                {/**-- screens--*/}
            </Tabs>
        );
    }
}

The code snippet above checks if there is a session for the current user. If null, the application redirects the user to the login screen. If the application is yet to determine the user's status, it displays a loading icon.

How to Interact with the Supabase Database

In this section, I'll walk you through creating the database for the mobile application. You'll learn how to store and retrieve the user's scores and rank them based on their total score.

Before we proceed, note that the application calculates the user's score after answering each question on the test screen. Upon completion, the user's score is retrieved and displayed on the test completion screen.

const handleSave = () => {
    //👇🏻 checks if the user has not completed the test
    if (count < questions.length - 1) {
        //👇🏻 updates the user's score if the selected answer is correct
        if (questions[count].answer === userAnswer) {
            setUserScore((userScore) => userScore + 1);
        }
        //👇🏻 change the question, refresh the selected answer and time
        setCount((count) => count + 1);
        setSelectedBox(null);
        setTime(15);
    } else {
        //👇🏻 test completed
        router.push({
            pathname: "/(stack)/completed",
            params: { score: userScore },
        });
    }
};

Within your Supabase project, select Table Editor from the sidebar menu and create a new table containing the following columns:

• id – contains a unique ID for each row of data.
• created_at – represents the time the data was created.
• attempts – a text array containing the score and date attributes.
• total_score – represents a user's cumulative score. We'll rank users using this score
• user_id – a unique ID used to identify each user's data.

The Table Columns

Finally, you can add a Row Level Security that allows only authenticated users interact with the database.

The Table Row Level Security Policy

How to save the user's score to the database

Before you can save a user's score to the database, you need to check if the user's data already exists – meaning the user has taken a test before. If true, you need to update the user's score with the latest test score. Otherwise, add the data to the database.

The code snippet below accepts the user's score and user's ID (from the session data) and saves the user's score to Supabase.

export const saveScore = async (userScore: number, userID: string) => {
    try {
        //👇🏻 check if the user data exists
        const { data, error } = await supabase
            .from("scores")
            .select()
            .eq("user_id", userID);
        if (error) throw error;

        //👇🏻 if the user data does not exist, insert a new one
        if (error || !data.length) {
            const { data, error } = await supabase
                .from("scores")
                .insert({
                    attempts: [{ score: userScore, date: getCurrentDate() }],
                    total_score: userScore,
                    user_id: userID,
                })
                .single();
            if (error) throw error;
        } else {
            //👇🏻 if the user data exists, update the attempts and total_score
            const { data: updateData, error } = await supabase
                .from("scores")
                .update({
                    attempts: [
                        ...data[0].attempts,
                        { score: userScore, date: getCurrentDate() },
                    ],
                    total_score: data[0].total_score + userScore,
                })
                .eq("user_id", userID);
            if (error) throw error;
        }
    } catch (err) {
        console.log(err);
    }
};

How to retrieve data from Supabase

Recall that you need to rank the users based on their scores on the Leaderboard screen and retrieve the user's attempts on the Profile screen.

The code snippet below accepts a user's ID and retrieves the attempts and total score from the database.

export const getUserAttempts = async (userID: string) => {
    try {
        const { data, error } = await supabase
            .from("scores")
            .select("attempts, total_score")
            .eq("user_id", userID);
        if (error) throw error;
        return { attempts: data[0].attempts, total_score: data[0].total_score };
    } catch (err) {
        return { attempts: "", total_score: 0 };
    }
};

The code snippet below retrieves the top ten users from the database based on their score.

export const getLeaderBoard = async () => {
    try {
        const { data, error } = await supabase
            .from("scores")
            .select("total_score, user_id")
            .order("total_score", { ascending: false })
            .limit(10);
        if (error) throw error;
        return data;
    } catch (err) {
        return null;
    }
};

Congratulations! You've successfully completed the project for this tutorial.

Conclusion

In this tutorial, you’ve learned how to:

• build React Native mobile applications with Expo,
• style your mobile applications with Tailwind CSS,
• create stack and tab screen navigations using Expo Router,
• use Supabase and leverage its authentication and database features to build full-stack applications.

Supabase is an amazing tool that enables you to build a full-stack software application with no hassle. If you are looking forward to shipping great software products or side projects faster, consider using Supabase.

Expo also saves us from the complexities of setting up and developing mobile applications using the React Native CLI. It enables you to focus more on building your applications while it handles the necessary configurations, including deployment.

Feel free to customise the application using ChatGPT to generate questions and answers tailored to any niche or topic.

The source code for this tutorial is available in this GitHub repository.

Thank you for reading!

The most difficult part is building the navigation – and swiping in particular can cause a lot of headaches. There are libraries you can use to help with this, but why not build it on your own?

In this tutorial, I will teach you how to create your own mobile swiping component in React. You can do it in 50 lines of JavaScript.

Initially, I created this component for my pet project, the 2048 Game in React, and have now decided to share how I did it.

If you want to try it out before reading the whole article, you can play the game here (use your mobile device). In this tutorial, we will focus on mobile swiping only.

You can find the following resources on GitHub:

• 📱 Source code of the component
• 🕹️ Source code of 2048 Game

Here is the sneak peak (the quality isn't the best because I was trying to keep the size small):

The final result in my pet project

Table of Contents:

1. Prerequisites
2. How to Simulate a Mobile Device in Your Browser
3. The MobileSwiper Component
4. Let's Make it Swipable
5. Summary

🛠️ Prerequisites

Before we start, make sure you know a little bit about React and JavaScript. You don't need any sophisticated tools, but if you want to run the example project on your computer, then you will need to install Node.js first.

Also, I'm using Google Chrome to simulate a mobile device on my computer. Keep in mind that if you use any different browser, then the steps might be slightly different.

🔍 How to Simulate a Mobile Device in Your Browser

Before we start coding, I need to show you how to simulate a mobile device in Google Chrome.

Open your browser, right click on your page, and choose "Inspect" from the dropdown menu.

How to open Developer Tools in Google Chrome

Your browser view should now be split into two parts. The second part contains Chrome's Developer Tools.

Now, click on the "laptop & mobile" icon (1 in the image below) in top left corner of the Developer tools. Then select the "Dimensions" (2) of the device you want to simulate. I chose iPhone SE because this device has the smallest resolution supported by my game.

Choose device dimensions in Developer Tools (Google Chrome)

Now we are ready to simulate swiping by using our mouse or touchpad. Just pay attention to the GIF below – my cursor turned into a circle which is supposed to visualize the area covered by a person's finger.

When I try to swipe, my browser thinks I am actually scrolling through the website. In my case, this isn't an expected behavior. I would like to instead use swipes to play the game.

By default, scrolling events are associated with swipes

🤓 The MobileSwiper Component

First, we need to create a mobile-swiper.jsx file. In this file, we declare a standard React component. Our component needs to accept two properties – children and onSwipe.

export default function MobileSwiper({ children, onSwipe }) {
    return null   
}

Let me briefly explain them:

• children allows MobileSwiper to accept and render any content placed between its opening and closing tags. It enables you to inject the entire board inside this component – but we will get to this later.
• onSwipe is a callback that our component will trigger each time the user swipes within the "swipable" area.

Let's define the swipable area now. First, you need to add a reference to the DOM element in which you want to allow swiping. You can do this by using the useRef hook. So declare a constant called wrapperRef:

import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)

    return null

}

Side note: The useRef is a React Hook that lets you reference a value that’s not needed for rendering. It’s particularly common to use it to manipulate the DOM. React has built-in support for this.

Now you just need to return the <div /> that references the constant you created using the useRef hook.

import { useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)

    return <div ref={wrapperRef}>{children}</div>
}

Let's think for a moment how we can detect swiping. I believe the easiest way is comparing the starting and ending position of the user's finger.

This means we need to store the initial position of the user's finger in state. Basically, we will store x and y coordinates using the useState hook.

import { useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    return <div ref={wrapperRef}>{children}</div>
}

Now we need to create two event callbacks:

• handleTouchStart will set the starting position of the user's finger.
• handleTouchEnd will set the final position of the user's finger and calculate the shift (delta) based on the starting point.

Let's start with the handleTouchStart event handler:

import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
              return
        }

        e.preventDefault()

        setStartX(e.touches[0].clientX)
        setStartY(e.touches[0].clientY)
      }, [])

    return <div ref={wrapperRef}>{children}</div>
}

Let me briefly explain it:

1. I wrapped this helper into the useCallback hook to cache and improve its performance. If you don't know this hook, you can read about it in the official React docs.
2. The if statement checks if the user is swiping within the swipable area. If they swipe outside of this area, we will proceed with scrolling.
3. e.preventDefault() disables the default scrolling event.
4. The last two lines store x and y coordinates in state.

Now let's implement the handleTouchEnd event handler:

import { useCallback, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
              return
        }

        e.preventDefault()

        setStartX(e.touches[0].clientX)
        setStartY(e.touches[0].clientY)
    }, [])

      const handleTouchEnd = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }

        e.preventDefault()

        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY

        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])

    return <div ref={wrapperRef}>{children}</div>
}

As you can see, steps 1-3 are exactly the same as in the handleTouchStart callback. Now, we'll take the final x and y coordinates of user's finger and deduct the initial x and y from those. Thanks to that we can calculate horizontal and vertical shift of the user's finger (deltas).

Then we pass those deltas onto the onSwipe callback. If you remember, we declared it in the component's props at the beginning.

Now we need to connect those callbacks into the event listener. To do so, we can use the useEffect hook from React.

import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    const wrapperRef = useRef(null)
    const [startX, setStartX] = useState(0)
    const [startY, setStartY] = useState(0)    

    const handleTouchStart = useCallback((e) => {
        if (!wrapperRef.current.contains(e.target)) {
              return
        }

        e.preventDefault()

        setStartX(e.touches[0].clientX)
        setStartY(e.touches[0].clientY)
      }, [])

      const handleTouchEnd = useCallback(
    (e) => {
        if (!wrapperRef.current.contains(e.target)) {
            return
        }

        e.preventDefault()

        const endX = e.changedTouches[0].clientX
        const endY = e.changedTouches[0].clientY
        const deltaX = endX - startX
        const deltaY = endY - startY

        onSwipe({ deltaX, deltaY })
    }, [startX, startY, onSwipe])   

     useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart)
        window.addEventListener("touchend", handleTouchEnd)

        return () => {
            window.removeEventListener("touchstart", handleTouchStart)
            window.removeEventListener("touchend", handleTouchEnd)
        }
      }, [handleTouchStart, handleTouchEnd])

    return <div ref={wrapperRef}>{children}</div>
}

You can read more about the useEffect hook in the official React docs.

The MobileSwiper component is ready now.

🔌 Let's Make It Swipable

The last thing we need to do is hook our component to the application. As I mentioned, I will be using this component in my 2048 Game (Source code). If you want to use it somewhere else, the handleSwipe helper and the MobileSwiper component will remain the same.

Let's plug it into the Board component:

import { useCallback, useContext, useEffect, useRef } from "react"
import { Tile as TileModel } from "@/models/tile"
import styles from "@/styles/board.module.css"
import Tile from "./tile"
import { GameContext } from "@/context/game-context"
import MobileSwiper from "./mobile-swiper"

export default function Board() {
    const { getTiles, moveTiles, startGame } = useContext(GameContext);

    // ... removed irrelevant parts ...

    const handleSwipe = useCallback(({ deltaX, deltaY }) => {
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
            if (deltaX > 0) {
                moveTiles("move_right")
            } else {
                moveTiles("move_left")
            }
        } else {
            if (deltaY > 0) {
                moveTiles("move_down")
            } else {
                moveTiles("move_up")
            }
        }
    }, [moveTiles])

     // ... removed irrelevant parts ...

    return (
        <MobileSwiper onSwipe={handleSwipe}>
              <div className={styles.board}>
                <div className={styles.tiles}>{renderTiles()}</div>
                <div className={styles.grid}>{renderGrid()}</div>
              </div>
        </MobileSwiper>
      )
}

Let's start with the handleSwipe handler. As you can see, we're comparing if deltaX is greater than deltaY to decide if the user swiped horizontally (left / right) or vertically (top / bottom).

If it was a horizontal swipe, then:

• negative deltaX means they swiped to the left.
• positive deltaX means they swiped to the right.

If it was a vertical swipe, then:

• negative deltaY means they swiped up.
• positive deltaY means they swiped down.

Now, let's focus on the MobileSwiper component. You can find it in the return statement. We're passing the handleSwipe helper to the onSwipe property and wrapping the entire HTML code of the Board component to enable swiping on it.

Now when we try it out, the result isn't ideal. Scrolling events are mixed with mobile swipes, as you can see below:

Board with duplicated events – swipes and scrolling

This is happening because modern browsers use passive event listeners to improve the scrolling experience on mobile devices. This means that the preventDefault we added to our event callbacks never happens.

To disable scrolling behavior, we need to disable passive listeners on the MobileSwiper component:

import { useCallback, useEffect, useState, useRef } from "react"

export default function MobileSwiper({ children, onSwipe }) {
    // ... removed to improve visibility ...

     useEffect(() => {
        window.addEventListener("touchstart", handleTouchStart, { passive: false })
        window.addEventListener("touchend", handleTouchEnd, { passive: false })
        // ... removed to improve visibility ...
      }, [handleTouchStart, handleTouchEnd])

    // ... removed to improve visibility ...
}

Now the scrolling behavior is gone and the 2048 Game looks just awesome:

Final result - swiping works!

🏁 Summary

Today I showed you that you don't always need libraries to handle mobile gestures in React. Some simple events such as swiping can be implemented using basic React features. We just used a bunch of React hooks and wrote two simple event handlers.

The entire implementation has exactly 50 lines of code. I hope I inspired you to try to deal with mobile events on your own.

If this article helped you, please let me know on Twitter. Educators like me often feel like we are speaking into a vacuum and nobody cares what we teach. A simple "shoutout" shows it was worth an effort and inspires me to create more content like this.

Please share this article on your social media. Thank you!

🎥 Create Your Own 2048 Game

This article is a part of my course on Udemy where I teach how to create a fully-functional 2048 Game in Next.js from scratch.

🧑‍🎓 Join my Next.js course on Udemy

Use code FREECODECAMP to enroll to get a 60% discount.

I believe programming should be fun and unleash creativity. You don't have to build yet another TODO list or a shopping cart. Instead, you can build something that you can show to your friends or maybe even a hiring manager!

PS. If you prefer to watch screencasts, then this lesson is available on Udemy for free. You can find it under the "Responsive Layout and Missing Game Feature" section in the lecture called "Game layout and mobile swipes".

Flutter, Google's UI toolkit for building natively compiled applications for mobile, web, and desktop, offers a powerful animation system that allows developers to create stunning custom animations.

In this step-by-step guide, we will explore how to build beautiful custom animations in Flutter to take your app's UI to the next level.

Prerequisites

Before we start, make sure you have Flutter installed on your system. It's also useful to have a basic understanding of the framework's fundamental concepts, such as widgets, state management, and gesture handling.

Finally, but most importantly, muster up a small spark of interest in learning animation! :) Because once you see the widgets come to life with animation magic, that spark's gonna grow into a blazing inferno of excitement.

In this guide, we are going to see how to implement animation in two kinds of tasks:

1. Animated List
2. Animated Loader

We are going to create a simple Todo app with Animated List and Animated Loader. So, saddle up, and let's ride into the world of animating lists and loaders in Flutter. 🤠🐴.

How to Build an Animated List in Flutter

First, we will create a simple Flutter list with animation. Animated List is a Flutter widget that allows developers to create dynamic and animated lists with smooth and visually appealing transitions. It is part of the Flutter animation framework and is an extension of the ListView widget.

The Animated List automatically animates changes to the list's content, such as inserting or removing items, providing an engaging and interactive user experience.

Key Features

Insertion and Removal Animations

When you add or remove items from the list, the Animated List animates these changes with predefined or custom animations, making the list's modifications visually seamless.

Built-in Animation Controllers

Animated List comes with built-in animation controllers that handle the timing and ease curves of the animations, simplifying the process of creating smooth and fluid transitions.

Customizable Animations

While Animated List provides default animations, developers can also customize the animations to fit the app's unique visual style and requirements.

Now, while theory is essential, practical examples bring concepts to life. So, let's dive into a practical example of using an Animated List in Flutter.

Project Setup and Dependencies

To create our Flutter app, we'll use Visual Studio Code as our development environment.

If you're not familiar with setting up a new Flutter project, don't worry – you can refer to my previous blogs for step-by-step instructions. If you're already comfortable creating Flutter projects, skip this part and proceed with the app development.

No need to install any external plugin to create an Animated List.

How to Create a Task Model

In this blog, we will focus more on animation so we can keep the functionalities simple. Define a Task class that represents a single task with a title and status.

I created a file called todo_list.dart in the lib folder that will contain the Animated List. First I created a simple class that represents a Task with title and status describing whether it's completed or not.

todo_list.dart

class Task {
  String title;
  bool isCompleted;
  Task(this.title, this.isCompleted);
}

How to Create a Simple List with Animation

Technically our goal is to create a scrolling container that animates items when inserted or removed. This widget's AnimatedListState can be used to dynamically insert or remove items.

To refer to the AnimatedListState either provide a GlobalKey or use the static of method from an item's input callback.

To do that, let's create a StatefulWidget to create an Animated List.

todo_list.dart

// todo_list.dart
import 'package:flutter/material.dart';
void main() {
  runApp(TodoListApp());
}
class Task {
  String title;
  bool isCompleted;
  Task(this.title, this.isCompleted);
}

class TodoListApp extends StatefulWidget {
  @override
  _TodoListAppState createState() => _TodoListAppState();
}

class _TodoListAppState extends State<TodoListApp> {
  List<Task> tasks = [];
  bool isLoading = false;

  final GlobalKey<AnimatedListState> _animatedListKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ToDo List')),
        body: AnimatedList(
          key: _animatedListKey,
          initialItemCount: tasks.length,
          itemBuilder: (context, index, animation) {
            return _buildTaskItem(tasks[index], animation, index);
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _addTask,
          child: const Icon(Icons.add),
        ),
        backgroundColor: Colors.white60,
      ),
    );
  }

  Widget _buildTaskItem(Task task, Animation<double> animation, int index) {
    return SizeTransition(
        sizeFactor: animation,
        child: Card(
          color: Colors.white,
          child: ListTile(
            title: Text(task.title),
            onLongPress: () => _removeTask(index),
          ),
        ));
  }

  void _addTask() async {
    Task newTask = Task('New Task ${tasks.length + 1}', false);
    tasks.add(newTask);
    _animatedListKey.currentState!.insertItem(tasks.length - 1);
  }

  void _removeTask(int index) async {
    _animatedListKey.currentState!.removeItem(index,
        (context, animation) => _buildTaskItem(tasks[index], animation, index));
    tasks.removeAt(index);
  }
}

Here, we used AnimatedList (a default Flutter package ). The AnimatedList class in Flutter is a powerful widget that allows us to create dynamic and animated lists with smooth transitions. It is an extension of the ListView widget, providing built-in animation support for adding, removing, and updating items in the list.

The primary goal of AnimatedList is to enhance the user experience by animating changes to the list's content, making the app feel more interactive and visually engaging.

AnimatedList has multiple properties or parameters that control various aspects of the widget's behavior, appearance, and animations. Understanding and using these props correctly is crucial to achieving the desired behavior and visual effects in an AnimatedList.

To know about the properties and behavior of AnimatedList please refer to the official documentation.

Simple Animated List in Flutter

In this tutorial, we will be focusing on Animated List and Animated Loader. If you are not familiar with Flutter basics (like widgets, states, and so on) I would recommend that you read my previous tutorial.

How to Build the Animated Loader

A loader is commonly used to provide visual feedback to users while waiting for data to load, processing content, or completing network requests. Loaders help improve the user experience by giving a sense of activity and preventing the app from appearing unresponsive during waiting periods.

There are various ways to implement loaders in Flutter, including using built-in widgets, third-party packages, or creating custom loaders. Additionally, "animated loaders" add an extra touch of dynamism to the loading process by incorporating smooth animations.

Let's add an animated loader in our TodoApp while creating and deleting a task.

How to Add the Flutter Loader Package

You'll need to install the package with the following command:

flutter pub add loading_animation_widget

Then you should see the following screen:

Installing loading animation package in Flutter

Now your package should be ready for use.

How to Implement AnimatedLoader

The loading_animation_widget package offers various loader animations that we can use to display loading indicators in our app. By importing the package, we gain access to these loader animations and can utilize them to enhance the user experience during loading operations or any other asynchronous tasks.

All loading animation APIs follow the same straightforward implementation. There is a static method for each animation inside the LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color.

loading_animation_widget offers multiple animated loaders with customized animation. Let's explore a few of those and integrate into our Todo App.

Now I created a file called animated_loader.dart, which has AnimatedLoader Widget.

// animated_loader.dart
import 'package:flutter/material.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';

void main() {
  runApp(AnimatedLoader());
}
class AnimatedLoader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyLoaderScreen(),
    );
  }
}
class MyLoaderScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LoadingAnimationWidget.staggeredDotsWave(
            size: 75, color: Colors.deepPurple),
      ),
      backgroundColor: Colors.transparent,
    );
  }
}

Let's show this animated loader in our animated list while adding or removing a task.

todo_list.dart

import 'package:flutter/material.dart';
import 'package:flutter_animation/animated_loader.dart';
import 'package:loader_overlay/loader_overlay.dart';

void main() {
  runApp(TodoListApp());
}

class Task {
  String title;
  bool isCompleted;
  Task(this.title, this.isCompleted);
}

class TodoListApp extends StatefulWidget {
  @override
  _TodoListAppState createState() => _TodoListAppState();
}

class _TodoListAppState extends State<TodoListApp> {
  List<Task> tasks = [];
  bool isLoading = false;

  final GlobalKey<AnimatedListState> _animatedListKey = GlobalKey();

  Future<void> loadData() async {
    setState(() {
      isLoading = true;
    });
    await Future.delayed(const Duration(seconds: 2));
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ToDo List')),
        body: Stack(
          children: [
            AnimatedList(
              key: _animatedListKey,
              initialItemCount: tasks.length,
              itemBuilder: (context, index, animation) {
                return _buildTaskItem(tasks[index], animation, index);
              },
            ),
            if (isLoading)
              const Opacity(
                opacity: 0,
                child: ModalBarrier(dismissible: false, color: Colors.black),
              ),
            if (isLoading)
              Center(
                child: Center(child: AnimatedLoader()),
              ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _addTask,
          child: const Icon(Icons.add),
        ),
        backgroundColor: Colors.white60,
      ),
    );
  }

  Widget _buildTaskItem(Task task, Animation<double> animation, int index) {
    return SizeTransition(
        sizeFactor: animation,
        child: Card(
          color: Colors.white,
          child: ListTile(
            title: Text(task.title),
            onLongPress: () => _removeTask(index),
          ),
        ));
  }

  void _addTask() async {
    Task newTask = Task('New Task ${tasks.length + 1}', false);
    await loadData();
    tasks.add(newTask);
    _animatedListKey.currentState!.insertItem(tasks.length - 1);
  }

  void _removeTask(int index) async {
    await loadData();
    _animatedListKey.currentState!.removeItem(index,
        (context, animation) => _buildTaskItem(tasks[index], animation, index));
    tasks.removeAt(index);
  }
}

To explore more about the Loader you can refer to the docs. It has multiple loaders with customization options.

Animated List with Animated Loader in Flutter

Hurray! We can see that the Animation Loader and Animation List are rendering very smoothly, and they look even better.

If you are implementing this from scratch, that's great and it'll really help you learn. But if you prefer, you can also clone the repo from GitHub. Either way, I'm excited to see the Animation Loader and Animation List in action from you.

Note: In the context of creating a task in real time, a loader might not be necessary since the creation of a task typically happens quickly and doesn't involve any lengthy processes like fetching data from an API or performing complex computations. But adding a loader during task creation can still be a useful visual cue to indicate that the task is being processed and provide immediate feedback to the user.

Conclusion

We explored the world of creating beautiful custom animations in Flutter, focusing on the implementation of Animated List and Animated Loader. By understanding the Animated List, we learned how to create dynamic and interactive lists with smooth item insertions and removals.

Through these examples, you saw Flutter's ability to make animation implementation enjoyable and straightforward. By incorporating custom animations into your apps, you can create engaging and visually appealing interfaces that captivate users and set your apps apart.

If you wish to learn more about Flutter, subscribe to my email newsletter (https://5minslearn.gogosoon.com/) and follow me on social media.

Happy Animating and Fluttering! 🚀

Firebase Cloud Messaging (FCM) is a powerful push notification service provided by Firebase. It offers a seamless way to connect with your app's users and keep them engaged.

In this tutorial, we will delve into the integration of FCM in Flutter. We'll explore its benefits and showcase real-world examples of how it can enhance user engagement and improve app performance.

What is Firebase Cloud Messaging?

Firebase Cloud Messaging (FCM) provides a reliable and battery-efficient connection between your server and devices. It allows you to deliver and receive messages and notifications on iOS, Android, and the web at no cost.

In this tutorial, we will explore the process of setting up and using Firebase Cloud Messaging (FCM) in Flutter using Firebase as the backend service. While the main focus will be on Android implementation, it's worth noting that the process is similar for iOS and Android (with a few configuration differences).

Here is what we'll cover:

1. How to create an app in Firebase
2. How to set up Firebase in Flutter
3. How to implement push notifications using FCM tokens

In this tutorial, you'll learn how to send a simple notification using Firebase to the app running in Flutter. Let's get started.

How to Create an App in Firebase

I'll create a new project in the Firebase console to get started. I'll walk through the necessary steps, including project setup, how to configure Firebase Cloud Messaging, and how to get the required credentials and configuration files for our Flutter app.

Before creating the app you need to signup for the Firebase console if you don't have an account. After sign up, try to create a project.

Create a Project in Firebase

It will take a little time to create a project.

Creating project in Firebase

After creating the project, it will redirect you to the project dashboard.

Project Overview in Firebase Console

Once you've created the project in Firebase console, it's time to get started with our Flutter app.

How to Set Up Firebase in Flutter

I have created a simple Flutter project using Visual Studio Code. If you are unfamiliar with building a Flutter project, you can refer to my previous tutorial. (If you are already familiar, you can skip this step.)

Simple Flutter Application running on Android Device

Let's integrate Firebase into our Flutter project. To do this, we need a Firebase CLI command line tool. I have already installed the Firebase CLI. If you haven't done this, you can refer to the official documentation.

Then we need to log in to Firebase using Firebase CLI.

firebase login

Login to Firebase using FirebaseCLI

This will navigate you to the browser to log in to Firebase. You'll be navigated back once the authentication is successfully completed.

After successful login, we need to install FlutterFire CLI. We can use the FlutterFire CLI to configure our Flutter apps to connect to Firebase. Run the following command to activate the FlutterFire CLI:

dart pub global activate flutterfire_cli

The FlutterFire CLI is a command-line interface tool that simplifies the integration of Firebase services into Flutter applications. It provides a convenient way to add, configure, and manage Firebase plugins in our Flutter project.

Installing FlutterFireCLI

The next step is to add firebase_core library to our Flutter project.

The following command will automatically add the firebase_core package as a dependency in your project's pubspec.yaml file and fetch the latest version of the package from pub.dev. After running this command, you can import the firebase_core package into the Dart files and use Firebase services in our Flutter app.

flutter pub add firebase_core

Installing Firebase Core package

The flutterfire configure command is used to configure Firebase services in our Flutter project using the FlutterFire CLI. This command helps us set up Firebase authentication, Firestore, Cloud Messaging, and other Firebase services easily and efficiently.

flutterfire configure

The first step is to choose the project,

Connect Flutter App with Firebase app

The next is to choose the platform. I am using it for Android here, so I choose Android.

Choosing platform

After the successful configuration, the Firebase App Id will be displayed.

Finally, we need to add some code changes to our main.dart file.

Import the following packages:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

Add the following configuration to initialize the Firebase config inside the main function of the main.dart file.

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

Alright, we have successfully completed the Firebase configuration in our Flutter app! Let's take a moment to celebrate this milestone. Configuring Firebase services is a crucial step in building powerful and feature-rich applications.

How to Implement Push Notification using FCM Tokens

We'll implement the process of registering devices for push notifications and retrieving the unique FCM tokens assigned to each device. This step is crucial for sending targeted notifications to specific devices.

We'll dive into the implementation of sending push notifications to devices using Firebase Cloud Messaging. We'll explore how to structure and send notification messages from the Firebase console and demonstrate how to handle these messages within our Flutter app.

flutter pub add firebase_messaging

Installing firebse messaging Package

Next, we need to trigger the setAutoInitEnabled function to enable automatic initialization of Firebase Cloud Messaging (FCM) in our Flutter app. This means that FCM will automatically initialize and retrieve a device token when the app starts.

Add the following function call in the main method:

import 'package:firebase_messaging/firebase_messaging.dart';
...
...
await FirebaseMessaging.instance.setAutoInitEnabled(true);

Let's run our Flutter app and verify if we receive the notification.

Navigate to the Firebase messaging console. As it is our first message, we need to select "Create your first campaign". Select "Firebase Notification messages" and click "Create".

Sample test messaging template

Now we need to enter the notification title, text, and name for the message.

Then we can get the FCM token manually for testing purposes using the code below. To retrieve the current registration token for an app instance, call getToken() in the main() method. This method will ask the user for notification permissions if notification permission has not been granted. Otherwise, it returns a token or rejects if there's any error.

final fcmToken = await FirebaseMessaging.instance.getToken();
log("FCMToken $fcmToken");

Copy the FCM token printed on the console and paste it into the "Add an FCM registration token" input box.

Sent test message using FCM Token

Click on the Test button. The targeted client device (with the app in the background) should receive the notification.

Received push notification in android device

Hurray! We got the notification on our Android device. If we click on the notification it will open the app by default.

When we tap a notification, the default behavior on both Android and iOS is to open the application. If the application is terminated, it will be started. If it is in the background, it will be brought to the foreground.

Here, we can see the basic configuration to initialize Firebase messaging.

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'firebase_options.dart';

void main() async {
  runApp(const MyApp());
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  final fcmToken = await FirebaseMessaging.instance.getToken();
  await FirebaseMessaging.instance.setAutoInitEnabled(true);
  log("FCMToken $fcmToken");
}

Conclusion

In this tutorial we have covered the essential steps for implementing push notifications in Flutter using Firebase Cloud Messaging (FCM).

By following the outlined steps, you can set up Firebase, integrate it into your Flutter project, and implement push notification functionality.

With the ability to send and receive notifications seamlessly, you can enhance the user experience and engage with your app's users effectively. Stay tuned for more advanced topics and features in future tutorials.

If you wish to learn more about Flutter, subscribe to my email newsletter (https://5minslearn.gogosoon.com/) and follow me on social media.

But building these applications is not always a simple process. You often have to refactor your code to maintain the app’s performance.

One such refactoring technique is extracting duplicated code and components and reusing them in multiple places.

In this tutorial, you'll learn how to replace a duplicated component by building a custom widget in Flutter.

What is a Custom Widget?

In Flutter, a custom widget refers to a user-defined widget that encapsulates a specific set of functionalities or visual representations.

Custom widgets are the building blocks of a Flutter application. They allow developers to create reusable UI components that can be used throughout the application.

If you're switching from React Native, you can think about custom widgets as custom React components. And what we call props in React are called parameters in Flutter.

Why Use Custom Widgets?

Custom widgets help you encapsulate complex UI elements. They also promote code re-usability and enhance the maintainability of your Flutter applications.

There are a number of reasons to build build custom widgets in Flutter. Let's look at some of them.

Code Reusability

Custom widgets allow developers to encapsulate complex functionality and appearance into reusable components.

Once created, custom widgets can be used multiple times throughout the application, reducing code duplication and promoting a modular development approach.

Maintainability

Custom widgets contribute to the maintainability of the codebase. By encapsulating specific functionality or visual representation, custom widgets create a separation of concerns. This separation makes it easier to locate, modify, and debug code related to a particular UI component.

Consistent UI

They also enable developers to define a consistent and unified UI design across their application.

Abstraction

And finally, custom widgets provide a level of abstraction that hides the implementation details and complexity of a particular UI element.

You can create high-level widgets that expose a simplified interface and handle the internal logic. This allows other developers to use the widget without worrying about its internal workings. This abstraction promotes modularity, making it easier to understand, test, and maintain the code.

How to Build a Custom Widget in Flutter

Let’s start building our custom widget.

Clone the Repo

Instead of starting from the scratch, I’ve created a Flutter app in GitHub and added duplicated code/components in that repo. Let’s begin from there.

Pull the code from GitHub by running the below command:

git clone https://github.com/5minslearn/Flutter-Custom-Widget.git

or

git clone git@github.com:5minslearn/Flutter-Custom-Widget.git

Clone the Flutter Custom Widget repo from GitHub

By default, it’ll be in the master branch. I’m switching to a refactor branch (you don’t need to) because I want you all to have a look at my initial and final code. The initial code will be in the master branch and the final code will be in the refactor branch.

Run the following command to install all the dependencies:

cd Flutter-Custom-Widget/
flutter pub get

Install Flutter dependencies

Run the App

Open the repo in Visual Studio Code and spin up your emulator (you may connect your mobile device, too). Once your emulator is up and running, press F5 to run the app in the emulator.

Here’s the view of your app on the first run.

Initial app run screen

If you’ve come this far, that’s great.

Analyze the Code

Let’s look at the code. Open the lib/main.dart file.

We have a MyApp class called at the beginning. This in-turn calls the MyHomePage class.

This is our code for the entire UI which is defined in _MyHomePageState class:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Welcome to Flutter Refactoring Tutorial',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            const SizedBox(height: 16),
            const Text('Press the below button to follow me on Twitter'),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text("Pressed Follow on Twitter button"),
                    duration: Duration(seconds: 1),
                  ),
                );
                // Open Twitter app
              },
              child: const Text("Follow on Twitter"),
            ),
            const SizedBox(height: 16),
            const Text('Press the below button to follow me on Instagram'),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text("Pressed Follow on Instagram button"),
                    duration: Duration(seconds: 1),
                  ),
                );
                // Open Instagram app
              },
              child: const Text("Follow on Instagram"),
            ),
          ],
        ),
      ),
    );
  }
}

And so you can reference the line numbers, here's a visual:

Code for the app UI

If you’re someone who loves writing clean code, you would definitely say that this is ugly code.

Here’s the reason for it. Look at the code carefully – lines 44 to 56 and lines 58 to 70 are completely duplicated except for a very few handpicked words. For example, the word “Twitter” has been replaced with the word “Instagram”.

The clean coder will definitely refactor this code before working on adding new features/functionalities. Let's follow those clean coding practices now, too.

Refactor the Code and Build a Custom Widget

We have to extract the text and button into a separate component. This component should accept the platform and onPressed as its parameters. We can template out the common text from them.

So, our code to build the custom widget looks like this:

class CustomButton extends StatelessWidget {
  final String platform;
  final VoidCallback onPressed;
  const CustomButton(
      {super.key, required this.platform, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      Text("Press the below button to follow me on $platform"),
      ElevatedButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text("Pressed Follow on $platform button"),
              duration: const Duration(seconds: 1),
            ),
          );
          onPressed();
        },
        child: Text("Follow on $platform"),
      )
    ]));
  }
}

As we discussed above, the template text and accept platform and onPressed parameters. We replaced platform wherever we need and call the onPressed method as the extension of showing a snack bar.

Add the above code at the very end of the main.dart file.

Integrate the Custom Widget

Let’s integrate our custom widget into our code.

Pick the first block of code from the line 44 to 56 as shown below

            const Text('Press the below button to follow me on Twitter'),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text("Pressed Follow on Twitter button"),
                    duration: Duration(seconds: 1),
                  ),
                );
                // Open Twitter app
              },
              child: const Text("Follow on Twitter"),
            ),

Replace it with the following code:

CustomButton(
  platform: 'Twitter',
  onPressed: () {
    // Open Twitter App
  },
),

Similarly, pick the next block of code from the line 58 to 70 as shown below

            const Text('Press the below button to follow me on Instagram'),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text("Pressed Follow on Instagram button"),
                    duration: Duration(seconds: 1),
                  ),
                );
                // Open Instagram app
              },
              child: const Text("Follow on Instagram"),
            ),

Replace it with the following code:

CustomButton(
  platform: 'Instagram',
  onPressed: () {
    // Open Instagram App
  },
),

Here's the final code of _MyHomePageState class after we complete our refactoring process.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Welcome to Flutter Refactoring Tutorial',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
            const SizedBox(height: 16),
            CustomButton(
              platform: 'Twitter',
              onPressed: () {
                // Open Twitter App
              },
            ),
            const SizedBox(height: 16),
            CustomButton(
              platform: 'Instagram',
              onPressed: () {
                // Open Instagram App
              },
            ),
          ],
        ),
      ),
    );
  }
}

And again, here's the screenshot for line number reference:

After refactoring your code

Run your app now.

Unfortunately, you’ll not notice any change in the UI. But your underlying code has changed. That’s exactly what refactoring is.

Quoting from Martin Fowler,

Refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior. – https://refactoring.com/

Final app

You may be wondering something after looking at the above code. Lines 43 and 50 also contain the same code (const SizedBox(height: 16),). So why don’t we include that into the component?

That’s great if you had this question.

There is no need for the custom widget component to include the SizedBox component. This is because the SizedBox component is added in the Home page to give some space between each component. But it's not necessary that whenever we use this button, we give a space at the top/bottom of the widget.

Still, if such cases arise, you can add the SizedBox widget inside your custom widget.

Why Build a Custom Widget?

You might not see a direct benefit right away. But you may experience it in the future. Here’s a quick example for you.

Let’s assume you’ve built this app for a client. It has become a complex app and you’ve used this custom widget around 20 places in your app. The app is released and people enjoy using it.

About 6 months later, your client come back to you with the next version of changes. One of the items in the huge list is, “We’re coming up with a slight change in theme. Replace all the social media referral buttons so that they're an outlined shape and change the color to green”.

It is one simple configuration change in the custom widget. But imagine if you hadn't built the custom widget and had to copy/pasted the same code in all the 20 places. Then you'd have to carefully look at each place and replace each instance with care without touching other pieces of code.

These are the only 2 lines we have to change in our custom widget in this example:

OutlinedButton(
        style: OutlinedButton.styleFrom(foregroundColor: Colors.green),

Changes in our custom widget

But if you hadn't refactored your code, you'd have to make this change in 20 places.

Small change reflects everywhere

I’ve pushed my code to the same GitHub repo. Refer to the master branch for the non-refactored code and the refactor branch for the refactored code.

Use Cases for Custom Widgets

Always use custom widgets for their specific use cases. For example, in our case, it is for Social media redirects. This widget should not be used in places which are unrelated to its context.

If you do, remember the above case where the client requirement was to change the design of only the social media referral buttons...but our change would be applied to all the other places where this widget was used. This would lead to unexpected bugs.

You should always write unit test cases for Custom Widgets which will help you mitigate any bugs earlier.

One more tip is to name your component in a more readable way. This helps other developers know what the widget does just by reading its name.

In our case, I've named it CustomButton which makes no sense. Instead, some good alternatives would be SocialMediaButton, SocialButton, and so on which fit into our use case.

Conclusion

In this tutorial, you learned about building a custom widget by removing duplicated code/components.

Building custom widgets in Flutter promotes code reusability, maintainability, consistency, abstraction, flexibility, and community collaboration.

Custom widgets are a powerful tool in the Flutter developer’s toolkit, enabling you to create beautiful and functional user interfaces while maximizing efficiency and maintainability.

If you wish to learn more about Flutter, subscribe to my email newsletter (https://5minslearn.gogosoon.com/) and follow me on social media.

The internet has become an integral part of our lives, as it solves one of the most critical problems we have to handle: data transfer. We're constantly either receiving or sending data to someone – whether it's a social media app, news app, or whatever type it may be, there's some form of data transfer.

Because of this, it's super important to learn networking if you're learning mobile app development. In this article I'll be explaining how to build a super simple mobile app that fetches data from internet and renders it on the app.

How to Create the Project

Navigate to the folder where you want to create your project in the terminal and run the following command:

git clone https://github.com/5minslearn/Flutter-Boilerplate.git

Navigate to the Flutter-Boilerplate folder and run the flutter pub get command to install the dependencies.

cd Flutter-Boilerplate/
flutter pub get

That's it. We've got our dependencies installed.

Open the project in Visual Studio Code by running the code ./ command in the terminal.

Create a Flutter app from boiler plate

Start your emulator/connect your device and press F5 in VS Code to run your app.

At the moment, the app will just contain an empty screen as shown in the below screenshot.

Flutter app with empty screen

Let's build our networking app.

Where to Get the Data

This is the most obvious question. If we were to fetch something from the internet and render, we need an API server exposing the data we need. But, most people cannot afford to do that for learning purposes. To overcome this, many people are offering free API services.

You can consume the data from their API services for learning purposes. But, we cannot validate the originality of the data, as most of them will be random.

In this tutorial, we'll be using the API exposed by https://sampleapis.com/. They expose an API endpoint that lists Coding Resources. The URL of the endpoint is https://api.sampleapis.com/codingresources/codingResources.

In our app, we'll fetch the data from this endpoint and list them in our app.

Install the Dependencies

Let's install the dependencies we need to build this app. They are:

1. The http package
2. The url_launcher package

We'll use the http package to make a call to the API endpoint. And we'll use the url_launcher package to open a URL in an external browser.

Open the pubspec.yml file and add the following two packages in the dependencies section:

  http: ^0.13.6
  url_launcher: ^6.1.11

Add dependencies

If you're using VS Code as your IDE, the dependencies will be installed automatically by saving this file. For the other IDEs, run flutter pub get on your project root folder to install the dependencies.

How to Fetch the Data from the API

We got our dependencies ready. Let's make a request to our API and get the data.

Import the http package in the lib/main.dart file.

import 'package:http/http.dart' as http;

Initialize a list object in the _MyHomePageState class by adding the following code:

List _resources = [];

Let’s write a method that makes a call to our API endpoint and decode them into a JSON object.

  void _fetchResources() async {
    final response = await http.get(Uri.parse(
        'https://api.sampleapis.com/codingresources/codingResources'));
    if (response.statusCode == 200) {
      final data = json.decode(response.body) as List;
      setState(() {
        _resources = data;
      });
    } else {
      throw Exception('Failed to load resources');
    }
  }

Paste the above code into the MyHomePageState class. In the above method, we’re making a call to the API endpoint (https://api.sampleapis.com/codingresources/codingResources). From the response, we’re validating if it's successful in receiving the data by checking if its status code is 200 (and throwing an error if it’s not). We then decode the received data and save it in our app’s state.

You may notice an error after pasting the above code at the json.decode part. In order to decode JSON, we need import a convert package in our file. Add the following code at the top of the file:

import 'dart:convert';

The error should be gone now.

We have a method that makes a call to the API endpoint and saves the data in the state. Our next step is to trigger this method when we open the app.

We can do that by overriding the initState method.

  @override
  void initState() {
    super.initState();
    _fetchResources();
  }

Quoting from the Flutter documentation,

"initState is called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates."

In the above code, we called our method _fetchResources() in the initState() method.

How to Build the UI

We got the list of items whenever we open the app. Our next step is to render them on the UI.

Copy the below code and replace it with the build method of the _MyHomePageState class.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: _resources.isEmpty
            ? const Center(
                child: CircularProgressIndicator(),
              )
            : ListView.builder(
                itemCount: _resources.length,
                itemBuilder: (context, index) {
                  final resource = _resources[index];
                  return InkWell(
                      onTap: () => {},
                      child: Card(
                          child: ListTile(
                        title: Text(resource['description']),
                        subtitle: Text(resource['url']),
                        leading: const CircleAvatar(
                            backgroundImage: NetworkImage(
                                "https://images.unsplash.com/photo-1547721064-da6cfb341d50")),
                        trailing: Text(resource['types'].join(', ')),
                      )));
                }));
  }

Let’s understand the above code.

We show a loader if our state has empty values. If it has some values in it, we’ll iterate through as a ListView builder and we render a card widget for each item, displaying the description, url, and types of the resource.

That’s it.

Run the app by pressing F5 and you should be able to see the following:

Loading the resources

Showing the resources

That’s awesome, isn’t it?

Let's Fix the Missing Part

But I feel there’s one small thing that’s missing at this point.

We’re able to see the list of the resources. But, we’re not able to view those resources. Some resources have a short link that we can easily remember and type. But, a few of them have a long URL which would be hard for a typical human being to remember. Let’s add a small enhancement that when we click on a resource, its link should be opened in our default browser.

This is very simple to implement in Flutter. This is the reason we added the url_launcher package at the beginning of this tutorial.

Import the url_launcher package in your app like this

import 'package:url_launcher/url_launcher.dart';

Add the following method in the _MyHomePageState class:

_launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

The above method accepts a URL, validates the link, and opens it in the browser.

We have to call this method on tapping the card. We can achieve that by calling this method in the onTap property of the InkWell widget.

Here’s the code for it:

onTap: () => {_launchURL(resource['url'])},

Let’s run our app and test this.

You were likely disappointed on tapping a card – I certainly was while working on this.

You should have seen this error:

Error on opening a url: Exception has occurred. "Could not launch https://www.youtube.com/bocajs"

Though the URL is right, why is our system not opening this in a browser?

What are Intent Actions?

Well, now we have to learn about intent actions.

Quoting it from Android Developers documentation,

"An Intent provides a facility for performing late runtime binding between the code in different applications. Its most significant use is in the launching of activities, where it can be thought of as the glue between activities. It is basically a passive data structure holding an abstract description of an action to be performed."

This basically means that when we hand over something to the external app, we have to declare that in our app. For Android, we have to define it in AndroidManifest.xml and for iOS most of these configurations go into the Info.plist file.

Add the queries block in the following code to your AndroidManifest.xml file.

<manifest>
    <application>
        ...
    </application>
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="https" />
        </intent>
    </queries>
</manifest>

Uninstall the app from your mobile and run the app again.

Hopefully you should be able to see the link opened in the browser.

Link opened on a browser

Conclusion

In this article, you’ve learned about networking in Flutter. We made a request to an API, rendered the list, and opened the URL in the browser.

This repo has my code. You can use it for your reference.

To learn more about Flutter, subscribe to my email newsletter on my site (https://5minslearn.gogosoon.com) and follow me on social media.

There are three types of navigation that are common to all apps – stack, tab, and drawer navigation.

Flutter supports all three types, and implementing them is similar to how you do it in other apps. But I found it super smooth to build navigation into my Flutter app.

In this article, we'll build a Flutter app that uses all three types of navigation in a single app so you can learn how they work.

Types of Navigation

As I mentioned above, there are three main types of navigation that you might use in your apps. Again, they are:

1. Stack Navigation
2. Tab Navigation
3. Drawer Navigation

Let's understand how each one works.

Stack Navigation

Picture a deck of cards, where you can add or remove cards from the top of the stack. Stack Navigation in Flutter works in a similar fashion. It helps you navigate between pages or screens by stacking new pages on top of existing ones.

When you move to a new screen, the current screen is pushed onto the navigation stack, and when you return, the top screen is popped off the stack.

This navigation type is commonly used for hierarchical and linear flows within an app.

Tab Navigation

Tabs are a staple of mobile app navigation, allowing users to quickly switch between different sections or views without losing their current context.

Flutter makes it easy to implement tabbed navigation with its built-in widgets, such as TabBar and TabBarView. By using these widgets, you can create a beautiful and functional tab navigation experience, perfect for organizing content into logical sections.

You also have the freedom to customize the appearance of your tabs, making it simple to create a unique look and feel for your app.

Drawer Navigation

The Drawer Navigation pattern, also known as the "hamburger menu" or "side menu," is a popular navigation style in mobile apps. It consists of a hidden panel that slides out from the side of the screen, revealing a menu with various navigation options.

This space-saving technique keeps your app's main content visible while providing easy access to additional features or sections.

Let's start building the app and see how to implement each of these navigation features.

How to Create the Project

Instead of creating a new project every time from scratch, I've created a boilerplate app and uploaded in GitHub. You can pull the code and run. I hope that makes creating this project a bit simpler.

Navigate to the folder where you want to create your project in the terminal and run the following command.

git clone https://github.com/5minslearn/Flutter-Boilerplate.git

Navigate to the Flutter-Boilerplate folder and run the flutter pub get command to install the dependencies.

cd Flutter-Boilerplate/
flutter pub get

That's it. We've got our dependencies installed.

Open the project in Visual Studio Code by running the code ./ command in the terminal.

Clone repo and install dependencies

Start your emulator/connect your device and press F5 in VS Code to run your app.

At the moment, the app will just contain an empty screen as shown in the below screenshot.

Flutter app with empty screen

Let's build all 3 types of navigation into our app.

But before that, let's see what our final app will look like:

Look of our final app

We'll have both drawer and tab navigators at the top. Pressing on the button in the first tab will take us to the next page via the stack navigator.

How to Build the Tab Navigation

Let's begin with building the tab navigator. Let's assume the tab will be on the home page (ideally that's where it would be).

Create a new file named tab.dart in the lib/ directory. Add the following code:

import 'package:flutter/material.dart';
import './tabs/tab1.dart';
import './tabs/tab2.dart';
import './tabs/tab3.dart';

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          appBar: AppBar(
            title: const Text("Home"),
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.phone_android)),
                Tab(icon: Icon(Icons.tablet_android)),
                Tab(icon: Icon(Icons.laptop_windows)),
              ],
            ),
          ),
          body: const TabBarView(
            children: <Widget>[
              Tab1(),
              Tab2(),
              Tab3(),
            ],
          )),
    );
  }
}

In the above code, we're creating a class named HomePage. In the build method, we return the DefaultTabController widget, which is basically a tab view. We define that we need 3 tabs in the length property.

At the bottom of the appBar property we have defined icons for each tab (Phone, Tablet, and Computer icons). Below that we define the body property with a TabBarView rendering all the tabs inside it.

Immediately when you paste in the above code, you'll notice lot of errors being highlighted in your VS Code editor.

This is because, if you look at the top four lines, the first line is the import of Flutter's Material UI package and the other three are imports from the user defined files. But we haven't created them yet. So, your code editor will throw an error in those lines and at the last three lines where we call Tab1(), Tab2(), and Tab3() (because, these classes are imported from those files). Let's resolve this issue now.

Create a new folder named tabs inside the lib/ directory and create three files named tab1.dart, tab2.dart, and tab3.dart.

Copy the below content into the tab1.dart file:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text("Mobiles"),
          Padding(
            padding: const EdgeInsets.only(top: 16.0),
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed("/secret");
              },
              child: const Text('Disclose Secret'),
            ),
          ),
        ],
      ),
    );
  }
}

Copy the below content into the tab2.dart file:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget>[
          Text("Tablets"),
        ],
      ),
    );
  }
}

Copy the below code into the tab3.dart file:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget>[
          Text("Laptops"),
        ],
      ),
    );
  }
}

If you look at the code for all three files, you'll notice everything is the same except that the first tab file (tab1.dart) has an additional button called "Disclose Secret". Pressing that will navigate the user to the /secret route. It won't throw any error as this route has not been defined yet. The other two files (tab2.dart and tab3.dart) will show only the text.

All the errors you saw in the tab.dart file will be resolved now. But if you run your app, you will not notice any changes in the output. This is because we have just created the tab layout and we haven't mapped it to our main.dart file.

Add the following line at the top of the main.dart file:

import './tab.dart';

Replace home: const MyHomePage(title: 'Home') with home: const HomePage(), in the build method of the MyApp class.

Save the file and run your app. You should be able to see the tab layout on your screen now.

Tab Layout in Flutter App

Don't press the "Disclose Secret" button. If you press it, it will throw an error. Because, as I mentioned earlier, we set up a route navigation in the onPress property of this button, but the route is not yet defined.

"Let's click that and see what happens"...

Hopefully, this thought will have entered your mind by now. It's not a mistake, it's human nature. We're curious to explore the things even if they're not recommended to do.

By the way, if you do that you'll see the following error (Exception in programming terminology):

Flutter Router Exception

In a nutshell, this error screenshot describes that the provided route does not exist.

How to Build the Drawer Navigation

Our next target is to add the drawer navigation. But before that, we have to create two files:

1. drawer.dart: to show the Navigation Drawer
2. about.dart: an option will be provided on the Drawer Navigator to navigate here

Create the drawer.dart file inside the lib/ directory and not inside the tab/ directory. The tab/ directory is only for tabs and we don't need to touch that further as we're done with the tabs. Copy the below code into the drawer.dart file:

import 'package:flutter/material.dart';

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

  navigateTo(String route, BuildContext context) {
    Navigator.of(context).pushReplacementNamed(route);
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: const EdgeInsets.all(16.0),
        children: <Widget>[
          ListTile(
            leading: const Icon(Icons.home),
            title: const Text('Home'),
            onTap: () {
              navigateTo("/home", context);
            },
          ),
          ListTile(
            leading: const Icon(Icons.info),
            title: const Text('About'),
            onTap: () {
              navigateTo("/about", context);
            },
          ),
        ],
      ),
    );
  }
}

In this file, we define the class named MyDrawer. In the build method we render the Drawer widget with Home and About options in the list. Clicking on those options will navigate us to the appropriate routes.

Create an about.dart file in the same directory and copy the below code:

import './drawer.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const MyDrawer(),
      appBar: AppBar(title: const Text("About")),
      body: const Center(child: Text("About")),
    );
  }
}

In this file, we create a class named About which returns a Scaffold widget containing the drawer which we defined right before this file. The appBar and the body will show the text "About".

Again, you'll not be able to see these changes immediately in the app. This is because we haven't linked it into the main.dart file.

Before we link them, we have one item in our backlog. Let's finish it and come back to linking them all together.

Create a file named secret.dart in the lib/ directory and copy the below code:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // backgroundColor: Colors.red,
          title: const Text("Secret"),
        ),
        body: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              Text("Nothing to show"),
            ],
          ),
        ));
  }
}

In this file, we have created a class named SecretPage and returned just a Text in the body. Nothing fancy here. It's a super simple Flutter widget.

Our backlog item is also done. This is what you've been waiting for: we're going to define our routes now.

Open the main.dart file and add the following imports at the top of the file:

import './about.dart';
import './secret.dart';

Replace the build method of the MyApp class with the below code:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: <String, WidgetBuilder>{
        "/about": (BuildContext context) => const About(),
        "/home": (BuildContext context) => const HomePage(),
        "/secret": (BuildContext context) => const SecretPage(),
      },
      initialRoute: "/home",
      title: 'Flutter Navigation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }

In the above code, you can see we're defining the MaterialApp to contain routes. They're defined as key-value pairs, mapping a route with a Widget. We have defined three routes:

• /about – the route for the drawer navigator
• /home – the route for the tab navigator
• /secret – the route for the stack navigator

We have set the initial route to be /home, which has the tab navigator.

Run the app and you should be able to see the following output on your device:

Merged Tab and Drawer View

On pressing the "Disclose Secret" button you'll be taken to the Secret page which we created (ideally it does not have a secret). You should also be able to scroll through the tabs smoothly.

By now, I hope you will have noticed an error here. If not, here's what it is: the back button is shown on the first screen of our app.

"Why would we need to show the back button on the first screen?"

That's an error and we have to resolve it. Press the back button and let's see what happens. Hopefully, you see what I saw. The back button was hidden and we see just the "Home" title in the appBar (similar to the below screenshot):

Back button issue

But there's an another issue on the same screen. Hopefully you saw that too. If not, don't worry, I'll reveal it right here.

"Can you access the drawer navigator by any means?"

No. Right?

But fortunately, the fix for the above two issues is the same. If we fix the second issue, the first issue will automatically be fixed.

That's great. But how do we fix the second issue?

You have to show the drawer navigator button (Hamburger icon) on the top left. This will eventually hide the back button.

Open the tab.dart file and import the drawer file at the top of this file.

import './drawer.dart';

Add the following line inside the Scaffold widget of the build method:

drawer: const MyDrawer(),

And that's it!

Here's the output you can see when you run your app:

App look after the issues are fixed

Conclusion

In this article, you've learned how to implement navigation in a Flutter app. We've included all three types of navigation in a single app in this tutorial for educational purposes. Ideally, you wouldn't do this with any real app you're building. Most apps will be built on either one or two types of navigation.

This repo has my code. You can use it for your reference.

To learn more about Flutter, subscribe to my email newsletter on my site (https://5minslearn.gogosoon.com) and follow me on social media.

When you're coding in Dart, you may come across these following situations:

1. A class/method is associated with a particular file of your codebase and you want to keep it private only to that one file.
2. You want to break your one big file in different parts but avoid accidentally using any private members of that file in other sections of your codebase.

Now to solve the first problem, you might say that it’s quite simple, right? You just make the class/method private in that file, so it’s accessible only within it. Like this:

// Private class which is accessible only in the file it's declared.

class _MyPrivateClassOne {    

}

Yes, that’s one way of doing it. But, it may not be the most suitable way in some cases.

If you keep on doing this, you’ll end up with the second problem we mentioned. You’ll soon have one very large file with multiple members inside it. And it will very quickly become a pain to manage and navigate different parts of that file.

How to use part in Dart

That’s where part comes in. It is an interesting feature of the Dart language that makes it easy to split a file into different parts to better manage and navigate file as it gets big.

We'll take a look at the following example:

// main_file.dart

part "private_class2.dart" 

void main() { 

final privateClassOne = _PrivateClassOne();
final privateClassTwo = _PrivateClassTwo();

}

// private_class1.dart

part of "main_file.dart"

class _PrivateClassOne{

}

// private_class2.dart

part of "main_file.dart"

class _PrivateClassTwo{

}

Let's break down the above example and understand what we are doing here:

// #1 Declaring private parts

part "private_class1.dart"

part "private_class2.dart" 

void main() { 

final privateClassOne = _PrivateClassOne();
final privateClassTwo = _PrivateClassTwo();

}

In the first step, we declared the files into which we want to split our main file.

Secondly, in the respective files private_class1.dart and private_class2.dart, we need to add the following line at the top of those files to associate them with the main file:

// #2 Associating the file with the main file for access.

part of "main_file.dart"

class _PrivateClassOne{

}

This way, you’re able to split ur one big file into multiple parts for better management and readability.

Other examples of using part

One popular package that makes use of part is Freezed. It’s a package for code generation for data-classes/unions/pattern-matching/cloning. You can, for example, use it to create helper methods on your model like fromJson/toJson which allows you to take in some JSON data and convert it to your model or vice-versa.

To learn more about Freezed, you can check it out on pub.dev.

Whenever you generate a Freezed model – for example, Screenshot and is in a file screenshot.dart – you’ll notice that it generates two other files, screenshot.freezed.dart and screenshot.g.dart. This includes the helper methods like fromJson/toJson/copyWith in them.

You’ll notice that, at the start of your actual Freezed model file, you need to add these two lines:

// #1 Declaring separate private files

part 'screenshot.freezed.dart';

part 'screenshot.g.dart';

As we discussed in our above example, here you're mentioning the parts of your main file screenshot.dart model.

And these two generated files have the following line added to them at the start:

// #2 Associating the respected private files with the main file

part of 'screenshot.dart';

Here, Freezed is generating these other helper methods that your model utilizes. But it splits them in these different files to keep parts of the generated code away from you which you don’t need to worry about.

Use Cases for part

Currently I’m working on my side project, AppShots where I needed to use part to solve an actual problem.

I’ve two database layers, PrimaryDatabaseLayer and _SecondaryDatabaseLayer in my flutter app. The _SecondaryDatabaseLayer would talk to the local database directly for adding/updating/deleting items.

Lets see how the PrimaryDatabaseLayer looks like,

// primary_database_layer.dart

part "secondary_database_layer.dart"

class PrimaryDatabaseLayer {

    Future<Screenshot1> addScreenshot(....){
      // convert the model from Screenshot1 to Screenshot2 and call       // addScreenshot method from _SecondaryDatabase with Screenshot2
        ....
        .......
    }

    Future<Screenshot1> updateScreenshot(....){
        // update screenshot to local db
        ....
        .......
    }

    Future<Screenshot1> deleteScreenshot(....){
        // delete screenshot from local db
        ....
        .......
    }

}

Then I had the second layer as follows:

// secondary_database_layer.dart

part of "primary_database_layer.dart"

class _SecondaryDatabaseLayer {

    Future<Screenshot2> addScreenshot(....){
        // add screenshot to local db
        ....
        .......
    }

    Future<Screenshot2> updateScreenshot(....){
        // update screenshot to local db
        ....
        .......
    }

    Future<Screenshot2> deleteScreenshot(....){
        // delete screenshot from local db
        ....
        .......
    }

}

The main reason to have two db layers here was, I had two different models, Screenshot1 and Screenshot2. The Screenshot2 is the model that's suitable for interacting with the actual local db and Screenshot1 is the model I used in the apps business logic and the ui views.

Now, as you can see the PrimaryDatabaseLayer is just a wrapper around the _SecondaryDatabaseLayer for convenient conversion of data models.

Adding the _SecondaryDatabaseLayer in the same file as PrimaryDatabaseLayer makes it difficult to mange and navigate as the layers grow in terms of their functionality. So, I used part here to make the _SecondaryDatabaseLayer a part of the PrimaryDatabaseLayer .

Conclusion

In this tutorial, we discussed how to use part in Dart to improve your codebase. And you learned about a few examples where using part is beneficial and makes your life a little bit easier managing your code.

☺️ I hope you enjoyed this article. I'm planning to release more content where I'll be sharing my experiences/challenges building personal/work projects in Dart and Flutter to help you become a better developer.💪

If you liked this article and have any questions or would like to get in touch, you can connect with me on Twitter @TakRutvik where I'm active and share all of my learnings and interesting projects I'm working on. ✨

Have a great day!☺️
Keep Fluttering 💙

If you master state management, you'll be able to build any kind of dynamic application. This is because the UI that's being rendered on the mobile device will be determined by the state of the data that your app holds at that time. This is why it's critical to master state management in front-end application development.

In this article, we'll learn state management by building a Todo app in Flutter.

First, let's look at some theory on state management before we dive into app development.

What is State in Flutter Apps?

State defines the user interface of your app. In other words, the user interface is built by the current state of the app.

When the state of a Flutter app changes, it'll trigger the re-draw of the user interface. This is called Declarative UI, which Flutter uses – whereas native mobile apps (Android & iOS) are built with Imperative UI, where the user interface is defined earlier.

Types of State

There are 2 types of state. They are:

1. Ephemeral State
2. App State

Ephemeral State

Ephemeral state is the state that is contained in a single widget or a screen/page of an app.

App State

App state is the state that is shared between user sessions and is used across many parts of the app.

How to Choose the State for Your App

There is no single rule as to which state to choose. It's depends on your use case. It's often a good idea to use Ephemeral state at first and then refactor your code in the future if you face any need to use App state.

What We'll Build

In this tutorial, we'll be building a Todo app. This app will have the functionality to create a todo item, list all the added items, update an item, and delete an item. Here's the sneak peak (screenshot) for you.

Todo App

App Development

Let's put on our development shoes and start building our app.

Create the Project

Here are the super simple steps to create your Flutter project. If you want a detailed explanation, please read the "How to Create the Project" section in the blog and come back here.

1. Open your VS Code
2. Hit "CTRL+SHIFT+P" (Mac users replace CTRL with CMD)
3. Type "Flutter"
4. Select the "Flutter: New Project" option
5. Select "Application" from the next list
6. Select the folder to create your project in the next prompt
7. On the final prompt, enter your app name and press "Enter"

That's it! Our boilerplate app is ready.

Select the preferred device to run your app on the bottom right and hit "F5". Your app will run on your selected device. You should see the following screen in a few seconds.

Flutter Boilerplate App

Time to Refactor the Code

We have a Flutter boilerplate app. By default, it'll have a lot of items, so let's refactor our code. We'll be working on the main.dart file in the lib/ folder to build this entire app.

Initialize Git

Initialize Git by running git init in the root folder of your repo.

Remove comments

I've removed all the comments in the main.dart file and added a commit.

Rename Classes

Rename MyApp to TodoApp in the main method by pressing F2 in VS Code.

Rename class name

On the first page, we'll be listing the created to-do items. Let's rename it from MyHomePage to TodoList.

Rename MyHomePage to TodoList class

In the above screenshot, the title of the MaterialApp is set to "Flutter Demo" and the title passed in TodoList is set to "Flutter Demo Home Page". Let's change both of those to "Todo Manager".

How to Build the Todo App

Let's build the core functionality of our app.

We need a Todo class. This class will define the properties of a todo. In our case, we'll have the following items:

1. Name of the todo
2. Status of the todo (Backlog / Completed)

Let's define a Todo class with the above properties:

class Todo {
  Todo({required this.name, required this.completed});
  String name;
  bool completed;
}

Add the above code at the bottom of the main.dart file.

How to Add a Todo

Look at your code for a class named _TodoListState. In the body of the build method, set the children property to an empty array. Refer to the below screenshot:

Before and After removing the Text widgets

Remove the two Text widgets inside that children property.

Now we'll replace the counter variable with a todo list.

int _counter = 0;

Replace the above line with the following code. The first line is the todo list and the second line defines the controller to get the name of the todo from the user:

final List<Todo> _todos = <Todo>[];
final TextEditingController _textFieldController = TextEditingController();

Remove the _incrementCounter method and add the method to add a todo:

void _addTodoItem(String name) {
    setState(() {
      _todos.add(Todo(name: name, completed: false));
    });
    _textFieldController.clear();
}

So far we have defined our todo list and an input controller. We've also created a method that accepts input text and adds that to the todo list with a completed status set to false and a clear input field.

The reason we have used the setState method is to refresh the UI after we update the todo list. As our component is a stateful widget, whenever a change in state is detected, the UI will render again with the updated state.

We have built the functionality code to add a todo. Let's build the UI code. Let's ask the user the name of the todo on pressing the Floating action button at the bottom right. When the user tries to save the todo, we'll call the _addTodoItem method defined above.

floatingActionButton: FloatingActionButton(
    onPressed: () => _displayDialog(),
    tooltip: 'Add a Todo',
    child: const Icon(Icons.add),
),

Before and After of Floating Action Button code

In the above method, we have changed the onPressed property to call the _displayDialog method. As it's not defined yet, it'll show an error. We'll define the method next. We have also changed the tooltip property to "Add a Todo".

Here's the code (_displayDialog method) to show a dialog box with an input field, add, and cancel button. Add this method inside the _TodoListState class:

Future<void> _displayDialog() async {
    return showDialog<void>(
      context: context,
      T: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Add a todo'),
          content: TextField(
            controller: _textFieldController,
            decoration: const InputDecoration(hintText: 'Type your todo'),
            autofocus: true,
          ),
          actions: <Widget>[
            OutlinedButton(
              style: OutlinedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Cancel'),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              onPressed: () {
                Navigator.of(context).pop();
                _addTodoItem(_textFieldController.text);
              },
              child: const Text('Add'),
            ),
          ],
        );
      },
    );
  }

Let's understand this huge piece of code.

The Future class is used for asynchronous computation.

Quoting from the documentation,

"An asynchronous computation may need to wait for something external to the program (reading a file, querying a database, fetching a web page) which takes time. Instead of blocking all computation until the result is available, the asynchronous computation immediately returns a Future which will eventually 'complete' with the result. "

In our case, it'll wait for the user to tap the Add or Cancel button.

The _displayDialog method will return the showDialog method by building the UI.

The barrierDismissible property is used to define if the pop up has to be closed if the user taps outside of the alert dialog. We have set that to false which means the alert dialog will not be closed on taping outside.

The builder of this showDialog method returns an AlertDialog consisting of title, content, and actions property. The title is set to display the text "Add a todo". The content property will render an text input field with automatic focus enabled and the hint "Type your todo".

The actions property will render 2 buttons, Cancel and Add. The Cancel button is an outlined button, and pressing it will close the dialog. The Add button adds the text to the todo list and closes the dialog.

Let's test our app. Click on the floating action button and you should see the UI similar to the one below:

Add Todo UI

If you try to add a todo, it'll be added to our todo list. But, you'll not be able to see any change on the UI.

How to List the Todos

We have added the code to add todos to the list. But wait – how can we verify that? We have to find if the todo has actually been added to the list.

Let's verify that by rendering the list of todo items in the UI. To do so, we have to design the UI for a single todo. Let's do that.

Add the following code at the end of main.dart file:

class TodoItem extends StatelessWidget {
  TodoItem({required this.todo}) : super(key: ObjectKey(todo));

  final Todo todo;

  TextStyle? _getTextStyle(bool checked) {
    if (!checked) return null;

    return const TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {},
      leading: Checkbox(
        checkColor: Colors.greenAccent,
        activeColor: Colors.red,
        value: todo.completed,
        onChanged: (value) {},
      ),
      title: Row(children: <Widget>[
        Expanded(
          child: Text(todo.name, style: _getTextStyle(todo.completed)),
        ),
        IconButton(
          iconSize: 30,
          icon: const Icon(
            Icons.delete,
            color: Colors.red,
          ),
          alignment: Alignment.centerRight,
          onPressed: () {},
        ),
      ]),
    );
  }
}

Here's the brief explanation of the above code.

First, we created a class with the TodoItem and we extended it from the StatelessWidget class as we don't need to maintain state for this class.

We accept a Todo, which is passed via constructor to our class. The code in the build method determines the UI. It renders the ListTile widget with the Checkbox widget passed to the leading property.

The title property renders a row of Text and IconButton widgets. The Text widget shows the name of the todo and the IconButton widget displays the delete icon.

Notice the _getTextStyle method passed to the style property of the Text widget. This method strikes out the text if the todo is marked as complete. Nothing changes on tapping any of these widgets, as the corresponding properties are left empty (onTap, onChanged, and onPressed).

Change the body property of the build method in _TodoListState with the following code:

ListView(
    padding: const EdgeInsets.symmetric(vertical: 8.0),
    children: _todos.map((Todo todo) {
      return TodoItem(
        todo: todo,
      );
    }).toList(),
),

Here's the highlighted screenshot showing the changes on the build method of the _TodoListState class:

Rendering the list of todo items

The above code defines a ListView widget iterating over the created todos and passing each todo to the TodoItem widget.

We're done with listing the todos. Let's verify if both creating and viewing a todo works fine.

List of created todos

Cool! There are our todos.

But tapping on either the Checkbox or Delete button will have no effect.

I hope you can guess what we'll be doing next. Yes, we'll be adding the code to mark the todo as completed and delete a todo item.

How to Update a Todo

Let's mark the todo as complete on pressing the checkbox near each todo.

We have 2 fields in our Todo class. They're name and completed status. Whenever a Todo is created, the default value of the completed field is set to false. This means the todo is in progress. We can change that to true whenever we complete the task.

Define a method called _handleTodoChange in the _TodoListState class. Add this method below the _addTodoItem method which we defined to add a todo to the list.

void _handleTodoChange(Todo todo) {
  setState(() {
    todo.completed = !todo.completed;
  });
}

In the above code, we accept a todo and change the completed status of the todo. So, whenever this method is called with a todo, it's completed status will change from true to false or vice versa. Remember that we have wrapped this inside a setState method to render the UI after making the change.

We have to trigger this method when a user taps on a todo or taps on a checkbox. We should pass this method to the TodoItem class. While calling the TodoItem in the build method of the _TodoListState class, pass the _handleTodoChange method as shown below:

return TodoItem(
    todo: todo,
    onTodoChanged: _handleTodoChange,
);

Before and After adding a method to change todo status

As we're passing the method to the TodoItem class, we should receive the same method in the TodoItem class. To do so, we have to define this method in the constructor of the TodoItem class. Go to TodoItem and change the constructor to include the onTodoChanged method.

TodoItem({required this.todo, required this.onTodoChanged})
      : super(key: ObjectKey(todo));

You may notice in the above code that we use **this**.onTodoChanged, which means we're binding the method passed to a method in this TodoItem class.

Let's define a method with the same name and set the return type to void (as we don't expect anything from that method).

final void Function(Todo todo) onTodoChanged;

So, wherever we call this method in our code, the status of our todo will be changed to the opposite. Let's call this method in the onTap property of the ListTile widget and onChanged property of the Checkbox widget.

onTap: () {
    onTodoChanged(todo);
},

Call onTodoChanged method on tapping the todo or checkbox

That's it. We're done. Let's run our app and verify if we're able to complete the todo.

Mark todo as complete

That's awesome right? We're able to mark the todo as complete and revert back.

How to Delete a Todo

We have only one item left to complete this app. We should be able to delete a todo, if we create one by mistake or if it's no longer applicable.

Steps to delete a todo are similar to updating a todo. We'll doing the exact 4 steps as we did for updating a todo.

1. Define the _deleteTodo method
2. Pass the method on TodoItem render
3. Receive the method on TodoItem constructor
4. Bind the method
5. Call the method on button tap

I would recommend that you try this by yourself as we'll be repeating the steps we did earlier. After you're done, you can verify your implementation by cross checking with my steps.

Here's the method to delete the todo. Add this in the _TodoListState class below the _handleTodoChange method:

void _deleteTodo(Todo todo) {
  setState(() {
    _todos.removeWhere((element) => element.name == todo.name);
  });
}

This method accepts a todo, compares it with the todo list, and identifies the todo which matches with this name. Then it deletes it from the list and finally updates the state.

Let's pass the method reference to TodoItem in the build method of the _TodoListState class.

return TodoItem(
  todo: todo,
  onTodoChanged: _handleTodoChange,
  removeTodo: _deleteTodo);

Change the constructor to accept the removeTodo method.

  TodoItem(
      {required this.todo,
      required this.onTodoChanged,
      required this.removeTodo})
      : super(key: ObjectKey(todo));

Define a method with the same name and set the return type to void (as we don't expect anything from this method).

Our final step is to call this method on pressing the delete button.

IconButton(
  iconSize: 30,
  icon: const Icon(
    Icons.delete,
    color: Colors.red,
  ),
  alignment: Alignment.centerRight,
  onPressed: () {
    removeTodo(todo);
  },
),

That's it. I hope it's super simple. Let's test our app.

Last todo is deleted

Wow! It works.

In the above screenshot, you can see I created a todo with the name "Call SC service men" which should be created as "Call AC service men". So, that was a mistake. I don't want that todo now as it'll confuse me. I would rather create a new todo with the right spelling. So, I pressed the delete button which almost instantly deleted my todo.

Cool! We have built our own todo app.

Conclusion

In this article, you've learnt about state management in Flutter. Along with that, we've built a simple todo app in Flutter implementing CRUD functionality.

CRUD stands for Create, Read, Update, and Delete. We created a todo, listed it on the UI, updated its status, and finally deleted it.

This repo has my code. You can use it for your reference.

Here are few exercise to challenge yourself. Try to extend this app by adding the following functionalities.

1. Show a message saying "No todo exists. Please create one and track your work", if no todo was created.
2. I know about a bug in this app. I hope you don't know – so I'm revealing it here. But you have to fix it. Create two todos with same name and try to delete one. You'll be amazed to see both of them deleted together. Here's a tip for you to fix. Assign a random id for each todo and while deleting, filter the todo by id.
3. Add functionality to edit the name of a todo
4. This app was completely built on Ephemeral state. So, if you close and open the app again, your old todo items will not be there. Add a functionality to store the todo in the device storage. Show the todos to the user when they reopen the app by reading them from your device storage.

To learn more about Flutter, subscribe to my email newsletter on my site (https://5minslearn.gogosoon.com) and follow me on social media.

This is in part because of its outstanding performance, having a benchmark of 60 Frames Per Second (FPS). This helps it outperform other cross-platform technologies, and it performs better even when compared with native languages.

I'm a React Native enthusiast. But after hearing all the advantages of Flutter, I decided to try it out. I would like to share my learning experience with you through this tutorial.

In this article, we'll learn how to create a Flutter app with a login layout and a few functionalities.

Prerequisites

In this article, I'll not cover the steps to install Flutter on your machine. I feel it's better explained on their official documentation site.

I would highly recommend that you try this exercise offered by the official Flutter community. It will give you a quick understanding of Flutter so you can get started.

Don't worry if you don't understand a few concepts mentioned there. I'll be writing about them in my upcoming tutorials. I used that exercise to start my own Flutter journey, and I felt more confident after completing it on my own.

Let's get started building our app!

I believe in the saying, "Setting a goal is half the work done". So, whenever I try to do something, I will set a goal to see where I want to be when I finish. So what's the goal for you reading this tutorial?

Required Tools

To build this app, you need the following items installed on your machine:

1. Visual Studio Code (One of Flutter's recommended IDEs)
2. Android Emulator / iOS Simulator / Original device
3. Flutter Installed (I would recommend following this guide to install it if you don't have it already)
4. Flutter plugin for VS Code (Recommended Guide)

How to Create the Project

Navigate to the folder where you want to create your app.

Navigate to the project directory

Open Visual Studio Code from that directory.

Open Visual Studio Code

Visual Studio Code IDE

Open the command palette by pressing CTRL + SHIFT + P and type Flutter. Choose Flutter: New Project from the listed options.

Use the command palette to create a Flutter project

Select Application from the next list.

Choose to build Flutter Application

It'll ask you to Select the target folder to create the project. By default, it'll be in the same folder where you opened VS Code. Type your app name in the text input and hit Enter. I'm naming mine loginapp, but you can type any name you wish.

Enter your project name

In the next few seconds, VS Code will create a new Flutter project and you'll see a screen like the one below:

Flutter project created

By default, main.dart file will be opened. This is where Flutter begins to run the app. At the bottom, you will see a notification saying "Your Flutter project is ready! Press F5 to start running ...".

How to Spin Up the Device

To run your app, you need to have either a virtual device or an actual device running and connected to your machine.

I'll be using an Android Emulator to run our app. You may either run a virtual device or connect your mobile phone to your machine. But remember to turn on "USB Debugging" if you're debugging via an Android phone.

Once you're connected or spin up a virtual device, look at the bottom right of VS Code and press the device option.

Devices option

Sometimes, VS Code will select the device by default, but for the first time, you have to select it on your own. Press the "No Device" text in the above screenshot or whatever the device name is shown to you there.

You'll be shown the list of virtual devices that are available and connected. Click on the device where you want to run your app.

List of available devices to run the app

Once you've selected your device, the bottom panel will show your selected device name similar to the below screenshot.

Selected my Android emulator

How to Run the App

Are you ready for the Rocket Launch?

Press F5 to run your app. This will take some time. It'll be compiling and building your project. Once it's ready, the app will be running on your device.

Running your app

You'll see a similar kind of interface. At the bottom, you can see the notification saying "Running Gradle task 'assembleDebug...'".

Excited for the output? Here you go:

Output of the default app

Don't make any changes to the code now. Your changes will not be tracked as Git is not initialized for this repo.

This is one part that I like about React Native. Whenever you create a React Native app, it'll make an initial commit. You can just go forward and make your changes and you'll be able to see all your changes being tracked.

This is not available in Flutter as of now (Mar 2023), but I hope the Flutter team may add this in the future.

Let's make the commit on our own.

Navigate to the project location in the Terminal:

cd <project_location>

Initialize Git by running git init command.

As it's our first commit, we'll do git add . to add all the changes to our commit.

Let's make the initial commit:

git commit -m "Initial commit"

Here's the screenshot of the above process:

Commit the changes to git

Let's verify if our changes are committed by running the git status command:

Verifying after commit

Looks Good. Our changes are committed. Let's proceed.

How to Remove Comments

I don't like comments in my code. I love writing readable code. Let's remove all the comments in the main.dart file. Don't touch the other files.

All the Flutter files will reside under the lib/ directory and they'll have the .dart file extension. For this entire tutorial, we'll be working only on the main.dart file.

You can read the comments and get some insights from them. They'll give you a clear understanding about how the default app works which can be really helpful for beginners.

But, it does not make any sense if you're building the app for 2nd or 3rd time. There is no point in reading the same comments again and again as you will have gained context on your 1st read.

You can ignore this step if you want to keep the comments as they are.

App Code

My code has become super simple now. I've made a commit here (after removing the comments). If you have come this far, after committing just ensure your app is running fine and there have been no changes on the UI.

How to Change the Name

Let's change the name of the title bar and the internal class names. On the MyApp class, inside the build method, change the title in the home field from "Flutter Demo Home Page" to "Login App".

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Login App'),
    );
  }
}

Let's change our class name from "MyHomePage" to "Login". Place the cursor on the "MyHomePage" text and press F2. F2 is the shortcut key to rename and refactor in VS Code. This means, it renames at the current place and replaces all its usages. Here's the screenshot of how it looks when you press F2 (on refactoring).

Rename class name from MyHomePage to Login

Let's commit our changes.

Commit the changes to the names

You should be able to see the title "Login App" in your app.

The title bar of the app changed to "Login App"

How to Build the App

Now let's build our app. Copy the below code and replace it with the _LoginState class in the main.dart file.

Immediately after you paste and save the file, your UI will change like magic.

UI Changed to ask for Login credentials

Let's dismantle the code you copied into parts and try to understand each block.

  final _formKey = GlobalKey<FormState>();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

The first line indicates that you're creating a key for a form. In our context, it is the login form. You're creating it to identify the form uniquely. It is set to final, so that it won't change.

The next 2 lines are definitions of controllers. A controller in our context is used to read the values from the input. Using a controller, you'll be able to control its associated component.

Let's dismantle the build method. You use the build method in Flutter to build the UI. It contains the design code. The content returned from this method will be rendered on the UI.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Form(
        key: _formKey,

The Scaffold is a widget in Flutter used to implement the basic material design visual layout structure. Assume the widget is a simple UI component.

We're setting the title passed as a parameter to this class. We can access the parameters using the widget object. So, it goes like widget.{key_name}.

If you want to access the title property, then it'll be widget.title. This is similar to passing props in React.

body: Form(
  key: _formKey,
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [

The next section is body. As we're building a simple login app, we need a form to be filled out by the user to authenticate. We're setting the unique key which we created above to this form. The Form accepts a child. It can accept only one component.

We are creating a layout with horizontal padding of 8px and vertical padding of 16px. This Padding widget also accepts only one child.

Column is a widget in Flutter that is used to display its children in a vertical array. We set crossAxisAlignment to horizontally center the contents of the Column widget.

As we saw, the Column widget displays its children in a vertical array. We can pass multiple widgets in its children property.

Padding(
  padding:
      const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
      child: TextFormField(
        controller: emailController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(), labelText: "Email"),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your email';
          }
          return null;
        },
     ),
  ),

The first item we want to display in the UI is an input box to get the email address of a user. So, we used the TextFormField widget and set the controller to emailController.

In order to get the floating text, we need to use the decoration option which asks for the type of border and the labelText of the input.

We can add any default validation to be applied when this form is submitted in the validator field. We're validating if it's either a null or empty value and we return an error if any of them match. If it has some value, then we're not throwing any errors and returning null.

Padding(
  padding:
  const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
    child: TextFormField(
      controller: passwordController,
      obscureText: true,
      decoration: const InputDecoration(
        border: OutlineInputBorder(), labelText: "Password"),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your password';
        }
        return null;
      },
   ),
),

The second item is the input box to get the Password from the user. This is similar to the email field except for one thing: we should hide the password in the input field and display a dot for each typed character.

To do that, we have to pass an obscureText property to the TextFormField widget and set it to true. The decoration, validation, and other items remain the same as that of Email.

Padding(
  padding:
    const EdgeInsets.symmetric(horizontal: 8, vertical: 16.0),
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              // Navigate the user to the Home page
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Please fill input')),
              );
            }
          },
        child: const Text('Submit'),
      ),
    ),
),

This is the final piece of our form, which is a submit button. We're using a ElevatedButton widget and passing the button text in the child property of the button. We define the action that should be followed when pressing this button in the onPressed property.

In our case, we're validating the input fields (remember the validator property we defined for the email and the password input box). If the validation passes, we should navigate the user to the next screen (which we'll be adding later). If not, we show a message asking the user to fill in the inputs ("Please fill input").

It's time to verify if our code is working properly. Check your app. Try to submit without entering any input and you should notice the Snackbar at the bottom with the text "Please fill input". Fill in the input boxes with some random values and try to submit and you should not be seeing the error now.

If you're facing any errors in viewing the UI, most of the time (almost 90%) it'll be with brackets. We'll be using a lot of brackets in Flutter which is often confusing for beginners. Make sure you have the proper opening and closing brackets. The Flutter app may terminate in the middle in case of any errors. In these cases, after applying the fix, press F5 to restart the app.

Navigate on Login

Let's navigate the user to the Home page on successful login and show the email address they entered on the Login page. Something similar to the below screenshot:

Home page

Go to the last line of the main.dart file and copy and paste the below content:

In this code, we are creating a new class called "HomePage" and extending it from "StatelessWidget". We receive an email from the previous page.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Home Page'),
        ),
        body: Column(
          children: [
            Text(email),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text("Go back!"),
              ),
            ),
          ],
        ));

On the build method, we define the title of the page to be "Home Page" and its body contains a Text and ElevatedButton widget. The Text widget will display the email address passed from the previous screen. The ElevatedButton widget will navigate the user to the previous screen whenever it's pressed. We use Navigator.pop(context); to navigate to the previous screen.

Let's understand how to navigate from the Login page to the Home page.

Code to navigate to the next page

Remove the comment we made on validation condition ("Navigate the user to the Home page") as shown in above screenshot and replace it with the below content.

if (emailController.text == "arun@gogosoon.com" && passwordController.text == "qazxswedcvfr") {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => HomePage(
        email: emailController.text,
    )),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Invalid Credentials')),
    );
}

Here's the final code for the Submit button.

Padding(
  padding:
    const EdgeInsets.symmetric(horizontal: 8, vertical: 16.0),
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              if (emailController.text == "arun@gogosoon.com" &&
                            passwordController.text == "qazxswedcvfr") {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => HomePage(
                      email: emailController.text,
                    )),
                );
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('Invalid Credentials')),
                  );
              }
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Please fill input')),
              );
            }
          },
        child: const Text('Submit'),
      ),
    ),
),

Let's try to understand this code.

In addition to form validation, we are adding another layer of validation which checks if the user has typed the email address as "arun@gogosoon.com", (which is my email address, you can replace it with whatever you want) and the password as "qazxswedcvfr". We navigate the user to the Home page if the entered credentials match, and show "Invalid Credentials" in the Snackbar otherwise.

That's it. We have covered a very basic login validation. Try to run the app and check if your app works as expected.

Login Page

Home Page

Conclusion

In this article, you have learned to build a basic version of a login app using Flutter. Hope you're clear on the flow of building the Flutter app.

If you're curious to learn Flutter further, try out the exercise I'm adding below. Searching, applying the code, and getting the result by yourself will make you more confident in Flutter app development.

1. Try to add an eye icon at the end of the "Password" input field. Clicking on it should toggle showing the password in plain text and hidden text
2. Clear the Email and Password input fields before navigating to the Home page
3. Add additional regex validation for email input
4. Add validation to the password field if the user has entered at least one number, letter, and a symbol
5. Add a "Signup" button below the "Submit" button which should navigate the user to a new "Signup" page

To learn more about Flutter, subscribe to my email newsletter on my site (https://5minslearn.gogosoon.com) and follow me on social media.

In this article, let’s look at what Flutter is and how to work with it.

What is Flutter?

Flutter is an open-source mobile application development framework created by Google. It helps you create high-quality, fast, and beautiful apps for iOS, Android, and the web – all from a single codebase.

Flutter has quickly become a popular choice among developers. Thanks to its ease of use and performance, you can build beautiful mobile applications using Flutter.

Benefits of Flutter

Flutter uses Google’s Dart programming language. Dart is similar to JavaScript or TypeScript and offers a reactive programming model for building user interfaces.

This means that instead of having to update the UI when you change your code, the framework will do it for you. This makes it easier and more efficient for building dynamic and responsive UIs.

Flutter hot-reloading. Image by the author.

Flutter also has a fast development cycle. Flutter has a hot reload feature that helps you see the changes you make to the code immediately. With Flutter, you don’t have to wait for the code to compile every time you change a piece of code.

The core strength of Flutter is widgets.

Flutter widgets

While building an app, you usually have to write functionality from scratch. For example, if you want to embed a Google map within your code, you have to write the code to import Google Maps into your app.

But Flutter provides ready-made widgets for almost all common app functions. Think of it like working with a lego set. Flutter provides a rich set of pre-designed widgets that you can customize to create beautiful interfaces.

These widgets are not simple UI elements like buttons and text boxes. They include complex widgets like scrolling lists, navigations, sliders, and many others. These widgets help save you time and let you focus on the business logic of your application.

Here is a full list of in-built Flutter widgets that you can peruse.

Another advantage of Flutter is its performance.

Flutter’s graphics engine, Skia, draws every pixel on the screen. This makes it possible to achieve smooth, 60 frames per second animations, even on lower-end devices.

Flutter also has a large and growing community of developers who contribute to the framework. It also comes with detailed documentation and a vast library of packages and plugins. You can easily integrate those plugins into your app to add features like maps, network communication, and local storage.

Now that you know what Flutter is and why it's useful, let's look at how it compares with another popular library, React-Native.

React Native vs. Flutter

Flutter vs React Native

React Native and Flutter are two of the most popular cross-platform mobile app development frameworks available today. Both offer the ability to build high-performance and visually appealing mobile apps for multiple platforms.

But there are some key differences between the two frameworks that you should consider when choosing the right one for your project.

React Native is JavaScript-based and is an extension of the React library. React-native uses native components for building the UI, which provides a native look and feel for the app.

React Native has a large and established community compared to Flutter and is a great choice if your existing products use JavaScript or React.

Flutter offers a unique approach to building user interfaces by using its own set of customizable widgets. This approach gives Flutter a unique look and feel compared to other mobile development frameworks.

Flutter’s fast development cycle and hot reload feature allow developers to build applications faster than other alternatives.

React Native has an easier learning curve compared to Flutter. Since most developers know JavaScript, they don't have to learn a new language like Dart to build apps with Flutter.

But React Native’s reliance on native components makes it difficult to achieve consistent performance across multiple platforms. It can also lead to inconsistencies in the UI between iOS and Android.

Flutter offers better performance, with its graphics engine drawing every pixel on the screen. With Flutter, you can get smooth and fluid animations even on lower-end hardware. Flutter also offers a unified and consistent look and feel for the app across all platforms, as developers use the same set of widgets for building the UI.

So React Native and Flutter both have their own strengths and weaknesses, and the right choice depends on your specific needs and requirements.

React Native is a good choice for businesses with existing investments in JavaScript and React. Flutter is a better choice for projects that need high-performance, unique, and responsive UIs along with a fast development cycle.

How to Install Flutter

The best way to install Flutter is to follow the official installation page. You can choose your operating system and follow the instructions.

Once you have installed Flutter, you can use its inbuilt tool called Flutter doctor to check the components. For example, on Mac, you should see a similar response on running flutter doctor .

Flutter doctor

Hello World in Flutter

Let’s create a simple hello world app using Flutter.

We can use the flutter create <app name> to create a new app.

Flutter create

Now we can cd into the directory and change the main file. It will be located under /lib/main.dart. Replace the code in the main.dart file with the following code.import 'package:flutter/material.dart':

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello, World!',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello, World!'),
        ),
        body: const Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

This code defines a Flutter app that will display “Hello, World!” in the center of the screen. The main() function will call the runApp() function with an instance of the MyApp class.

In the build() method of MyApp, a MaterialApp widget with the title “Hello, World!” is created. The Scaffold widget contains an AppBar with the title “Hello, World!” and the Center widget will place the text on the center of the screen.

This is how the output will look after you run the flutter run command.

Flutter hello world

What is Flutterflow?

Flutterflow. Credits: Flutterflow.io

Before we end, I want to share a tool that has massively improved my productivity when building apps with Flutter. This isn't an endorsement – I just really like the tool and want you to know about it, too.

Flutter Flow is a visual design tool that lets you create Flutter apps using a drag-and-drop interface. You can build complex and interactive user interfaces for your Flutter apps without writing any code.

Flutterflow works by providing a visual interface for designing your app’s UI, which is then translated into Flutter code. It makes it easy to create and iterate on your app’s design, as you can see the changes you make in real-time.

Flutterflow also offers collaborative development, so you can build your apps along with a team. Flutterflow comes with a lot of integrations like Firebase, Stripe, and even OpenAI’s API.

Once you have built your app, you can publish it to the app store or play store using built-in Codemagic integration.

Conclusion

Flutter is an awesome framework for building mobile apps. It offers fast development times, beautiful and responsive designs, and a single codebase for both iOS and Android. Its hot-reload feature allows developers to see changes in real time, reducing overall development time.

Additionally, Flutter’s widget library allows for the creation of custom and complex designs with ease. In terms of performance, Flutters races far ahead of alternatives like React-Native.

Hope this article helped you to understand Flutter in detail. You can learn more about me at manishmshiva.com.