DEV Community: Blazebrain

Mastering the Art of Debugging in Flutter(Part Three)

Blazebrain — Wed, 04 Mar 2026 05:35:21 +0000

Mastering the Widget World

Introduction

Welcome back to our journey through the art of debugging! In the previous parts, we explored general debugging principles and tackled network-related issues. Now, we're diving into the heart of Flutter development: widgets.

Widgets are the building blocks of any Flutter application. Understanding their behavior and knowing how to troubleshoot their peculiarities is essential for building polished and efficient apps. In this article, we'll delve into:

Debugging common widget errors
Optimizing build methods for performance
Managing state effectively
The importance of keys in Flutter
Handling widget nesting and layout issues
Utilizing Flutter's layout system and debugging tools

Ready to master the widget world? Let's get started!

Debugging Common Widget Errors

While widgets offer incredible flexibility and power, they can also be a source of errors that impact performance and user experience. Recognizing and addressing these issues is crucial.

Build Method Performance

The build() method is the heart of a widget—it's where the UI is defined. However, excessive rebuilds can significantly impact performance. Here's how to optimize it:

Profile the Build Method: Use the Flutter DevTools Performance overlay to identify widgets that rebuild frequently.
Minimize State Changes: Reduce the number of times setState() is called. Consider using immutable data structures to prevent unnecessary rebuilds.
Leverage const Constructors: Use const constructors for immutable widgets to improve performance.

State Management Inconsistencies

Understanding the nuances between StatefulWidget and StatelessWidget is crucial.

StatefulWidget

Holds a state that can change over time.
Creates a separate State object.
Uses setState() to trigger UI updates when the state changes.

StatelessWidget

Immutable and doesn't hold any state.
Suitable for widgets that don't require dynamic updates.

Common Issues

Overusing StatefulWidget: This can lead to unnecessary rebuilds and performance hits.
Incorrect Use of setState(): Calling it too frequently or from the wrong context can cause unexpected behavior.
State Leakage: Exposing internal state can lead to unpredictable UI updates.

The Importance of Keys

Keys are unique identifiers assigned to widgets to help Flutter efficiently manage the widget tree during rebuilds.

Understanding Keys

Purpose: They help Flutter distinguish between widgets, preserving state and avoiding unnecessary rebuilds.
Types:
- LocalKey: Unique within the widget tree.
- GlobalKey: Accessible from anywhere in the app, useful for complex scenarios.

Why Keys Matter

Preserving State: Maintains the state of widgets during rebuilds.
Optimizing Performance: Reduces unnecessary widget recreations.
Managing Animations: Essential for animating lists or reordering items smoothly.

Common Issues

Missing Keys: Can lead to performance issues and unexpected behavior.
Incorrect Key Usage: Using keys improperly can cause state preservation problems.

Widget Nesting

While Flutter promotes building UIs by composing widgets, excessive nesting can impact performance and readability.

Optimizing Widget Nesting

Break Down Complex Widgets: Divide large widgets into smaller, reusable components.
Use Layout Builders: Employ LayoutBuilder to create dynamic layouts based on available space.
Consider Custom Paint: For performance-critical scenarios, use CustomPaint to draw directly on the canvas.
Create Custom Widgets: Encapsulate complex logic to improve code reusability.

Understanding Flutter’s Layout System

Flutter's layout system determines how widgets are arranged, sized, and positioned on the screen.

Layout Phases

Constraints Flow Down: Parents set constraints for their children.
Sizes Flow Up: Children determine their own size within the constraints and pass it back up.
Parent Sets Position: Parent decides where to position the child.

Constraints and Box Constraints

Constraints: Represent the maximum and minimum sizes a widget can be.
Box Constraints: A range of permissible sizes for a widget.
Negotiation: Widgets negotiate with their parents to determine their final size.

Layout Algorithms

Flutter provides several layout widgets:

Row: Arranges children horizontally.
Column: Arranges children vertically.
Stack: Overlays children on top of each other.
Container: A versatile widget for styling, positioning, and sizing.
Expanded: Expands a child of a Row, Column, or Flex to fill the available space.
Flex: A flexible layout model with customizable alignment and distribution.

Handling Layout Issues and Overflows

Layout issues are common challenges. Understanding the root causes helps in creating responsive UIs.

Overflow Errors

You've probably seen the dreaded "A RenderFlex overflowed..." error. It occurs when a child widget exceeds the space allocated by its parent.

Common Causes

Missing constraints.
Children with fixed sizes in flexible parents.
Overlapping widgets.

Solutions

Use Expanded or Flexible: Wrap children in Expanded or Flexible to distribute space.
Adjust Constraints: Modify parent constraints or child sizes.
Scroll Widgets: Wrap content in SingleChildScrollView if necessary.

Alignment Issues

Proper alignment ensures that widgets appear where they should.

Common Issues

Incorrect use of alignment properties.
Misunderstanding how Row, Column, or Stack layouts work.
Overlapping widgets due to improper positioning.

Solutions

Experiment with Alignment: Use MainAxisAlignment and CrossAxisAlignment.
Positioned Widgets: In a Stack, use Positioned to place widgets precisely.
Layout Builders: Use LayoutBuilder for responsive designs.

Responsive Design

Building UIs that adapt to different screen sizes is essential.

Techniques

MediaQuery: Access device dimensions and orientation.
LayoutBuilder: Build layouts that adapt to size constraints.
AspectRatio: Maintain consistent aspect ratios across devices.

Utilizing Flutter's Debugging Tools

Flutter Widget Inspector

The Widget Inspector allows you to:

Visualize Widget Trees: See the hierarchy of widgets.
Inspect Properties: Examine widget properties and constraints.
Diagnose Layout Issues: Identify where overflows or misalignments occur.

Layout Explorer

Visualize Constraints: Understand how constraints affect layout.
Inspect Sizes: See exact dimensions of widgets.
Debug Alignment: Check how widgets are aligned within their parents.

Performance Profiling

Identify Bottlenecks: Use the Performance tab in DevTools.
Analyze Rebuilds: Check how often widgets rebuild.
Optimize Rendering: Ensure smooth animations and transitions.

Incorrect Widget Usage

Using widgets correctly is key to a smooth Flutter experience.

Incorrect Widget Properties

Providing incorrect values can cause unexpected rendering.

Example

Using negative values for padding or margin.
Setting flex properties improperly in Flex widgets.

Solution

Refer to Documentation: Ensure you're using properties as intended.
Validate Inputs: Check values before assigning them.

Mismatched Widget Types

Combining incompatible widgets can lead to errors.

Example

Placing a Text widget directly under a Row without wrapping it.

Solution

Use Appropriate Containers: Wrap widgets in Expanded, Flexible, or Container as needed.
Understand Parent Constraints: Know what each parent widget expects.

Ignoring Widget Lifecycle Methods

Lifecycle methods like initState(), didUpdateWidget(), and dispose() are crucial.

Common Mistakes

Failing to dispose of controllers or listeners.
Not updating state when dependencies change.

Solution

Implement Lifecycle Methods: Override methods as needed.
Clean Up Resources: Dispose of any resources to prevent memory leaks.

Conclusion

Widgets are at the core of Flutter development, and mastering them is essential for building high-quality apps. By understanding common widget errors, optimizing build methods, managing state effectively, and utilizing Flutter's debugging tools, you're well on your way to becoming a Flutter pro.

Remember:

Keep your widget tree optimized.
Use keys wisely.
Manage state thoughtfully.
Leverage Flutter's powerful tools to debug and optimize your app.

Stay tuned for the next part of this series, where we'll explore advanced debugging techniques and performance optimization!

If you have any questions or need further assistance, feel free to reach out. I'm always here to help!

Connect with me on Twitter or LinkedIn for more Flutter tips and tutorials.

Navigating the Network Maze(Part Two)

Blazebrain — Mon, 11 Aug 2025 05:59:33 +0000

Introduction

Welcome back to our series on the art of debugging! In the previous part, we laid the foundation by understanding what debugging is and you got to know powerful the Flutter DevTools is. This time, we're diving deeper into a specific type of error that many developers encounter: network-related issues.

Network calls are the lifeblood of many applications. When they malfunction, it can frustrate your users and be a real headache to troubleshoot. By equipping ourselves with the right tools and knowledge, you can effectively navigate this network maze.

In this article, we'll explore:

Common network-related errors
Leveraging the Dart DevTools Network page
Handling async/await and Dart zones
Debugging HTTP requests and responses

Ready to dive in? Let's get started!

Common Network-Related Errors

During development, you might run into various network issues that can be tricky to diagnose. Recognizing and understanding these errors is the first step toward effective debugging.

1. Connection Issues

Timeouts: Requests exceeding the specified time limit. This could be due to slow server response or poor network connectivity.
Network Outages or Instability: Temporary loss of network connection can disrupt your app's ability to communicate with the server.
Incorrect DNS Resolution: Misconfigured DNS settings can prevent your app from reaching the intended server.

2. Request Errors

Invalid URLs or Endpoints: Typos or incorrect paths in your API endpoints.
Incorrect HTTP Methods: Using the wrong HTTP method (e.g., using GET instead of POST).
Missing or Incorrect Headers: Essential headers like authentication tokens not being included.
Payload Issues: Malformed JSON or XML payloads causing the server to reject the request.
Authentication Failures: Incorrect or expired authentication tokens leading to unauthorized errors.

3. Response Errors

Unexpected Status Codes: Receiving 4xx (client errors) or 5xx (server errors) status codes.
Parsing Errors: Invalid JSON or XML responses that can't be parsed by your app.
Data Inconsistencies: The data received doesn't match the expected format or contains unexpected values.

Leveraging the Dart DevTools Network Page

The Dart DevTools Network page is a powerful friend in debugging network issues. It provides a comprehensive overview of network requests and responses, allowing you to inspect details such as:

Request and response headers
Request and response bodies
Timing information (request duration, latency)
Status codes
Error messages

Key Features and Usage

Filtering Requests

Filter by URL: Focus on specific endpoints by filtering requests containing certain strings.
Filter by Method: Separate GET, POST, PUT, DELETE requests to narrow down your search.
Filter by Status Code: Quickly identify failed requests by filtering status codes (e.g., 4xx, 5xx).

Inspecting Requests and Responses

Request Details: Examine the full request, including headers and payload.
Response Details: View the server's response, headers, and body content.
Headers Inspection: Verify if essential headers like Content-Type or Authorization are correctly set.

Timing Analysis

Request Duration: Identify slow network calls by looking at the duration of each request.
Latency Insights: Understand network latency issues that might be affecting performance.

Error Handling

Status Codes: Quickly spot errors through HTTP status codes.
Error Messages: Read detailed error messages returned by the server to understand the root cause.

Example Scenario

Imagine a situation where an API call is consistently returning a 404 Not Found Error. Using the Dart DevTools Network page, you can:

Filter Requests: Isolate the problematic API call by filtering requests to that specific endpoint.
Inspect the Request: Check the request headers and body to ensure everything is correctly formatted.
Examine the Response: Look at the response body for any error messages or stack traces provided by the server.
Analyze Timing: See if the request is taking unusually long, which might indicate server-side performance issues.
Adjust and Retry: Based on your findings, make necessary changes and test the request again.

Handling async/await and Dart Zones

Asynchronous operations are at the heart of network calls in Flutter. While async and await make handling asynchronous code more manageable, they can introduce complexities when debugging.

Async/Await Challenges

Error Handling

Unhandled Exceptions: Always wrap your async code with try-catch blocks to handle exceptions.
Future Error Handling: When using Future.then(), make sure to include error handling in the onErrorcallback.

State Management

Race Conditions: Be cautious of multiple network calls modifying the same state simultaneously.
State Updates: Ensure that state changes resulting from network calls are properly synchronized with the UI.

Debugging Techniques

Breakpoints: Set breakpoints inside async functions to step through code execution.
Logging: Use print statements or logging packages to output variable values and execution flow.
Debugger Tools: Utilize Flutter DevTools to inspect variables and call stacks during asynchronous operations.

Dart Zones and Network

Dart Zones provide a way to track asynchronous operations and handle errors globally.

Understanding Zones

What Are Zones? Zones allow you to intercept and manage code execution in a specific context.
Error Handling: You can use runZonedGuarded to catch uncaught asynchronous errors.

Debugging Considerations

Global Error Handling: Implement a global error handler to catch errors not caught in try-catch blocks.
Zone Context: Be aware that variables inside a Zone are accessible throughout its scope, which can help with passing data.

Debugging HTTP Requests and Responses

Beyond using DevTools, there are several techniques you can employ to debug network calls.

Logging

Print Statements: Output request and response data to the console for quick inspection.
Logging Packages: Use packages like logger to manage logging levels and output formats.

HTTP Libraries Features

Interceptors: If you're using packages like Dio, you can use interceptors to monitor and modify requests and responses.
Error Handling: Leverage built-in error handling mechanisms to catch and process errors.

Testing

Unit Tests: Write tests for your network layers to ensure they handle various scenarios correctly.
Mocking: Use mocking frameworks to simulate network responses for different test cases.

Third-Party Tools

Network Profilers: Tools like Charles Proxy or Wireshark can monitor network traffic outside of your app.
Debugging Proxies: Use proxies to intercept and modify network traffic for testing purposes.

Conclusion

Mastering the art of debugging network calls is essential for building robust and reliable Flutter applications. By effectively using the Dart DevTools Network page, understanding async/await and Dart Zones, and employing additional debugging techniques, you can efficiently identify and resolve network-related issues.

In this article, we've covered:

Common network-related errors and how to recognize them
Leveraging the Dart DevTools Network page to inspect network traffic
Handling asynchronous code and Dart Zones in network operations
Debugging techniques for HTTP requests and responses

By incorporating these strategies into your development workflow, you'll be better equipped to tackle any network challenges that come your way.

Stay tuned for the next part of this series, where we'll delve into debugging UI performance issues in Flutter!

If you have any questions or need further assistance, feel free to reach out. I'm always here to help!

Connect with me on X(formerly Twitter) or LinkedIn for more Flutter tips and tutorials.

Introduction to the World of Debugging(Part One)

Blazebrain — Sun, 27 Jul 2025 04:23:40 +0000

Introduction

"If debugging is the process of removing bugs, then programming must be the process of putting them in." — Edsger W. Dijkstra

Oh boy, Edsger definitely knew what he was saying, because what?!

We've all been there, or better still, I've been there... a lot. You're building a piece of software etc, everything is going smoothly, and then ...bam! Your software crashes unexpectedly or starts behaving in ways you never intended. Red lines flood your console, and after multiple attempts to understand, you start feeling a wide range of emotions, from frustration to exhaustion, sometimes hunger :). I mean, why won't this thing just work?! What do I have to do?!

Frustrating yeah? That's exactly why debugging is an essential skill for any developer, and it's no different in the world of Flutter and Dart. It's not just about fixing errors; it's about ensuring that your application runs smoothly and maintains high quality.

In this article, the first in our series on the art of debugging, we'll explore:

What debugging is
The importance of debugging in programming
Common types of errors developers face
An introduction to a powerful Flutter debugging tool: Flutter DevTools

Ready to dive in? Let's get started!

What Is Debugging?

Debugging is the process of identifying, isolating, and fixing errors (or "bugs") in your codebase. It's a critical part of software development that ensures your application behaves as expected and delivers a great user experience.

Importance of Debugging in Programming

Debugging is vital for several reasons:

Improved Code Quality: By finding and fixing errors, we create more robust and reliable applications.
Enhanced Performance: Resolving performance bottlenecks during debugging ensures our apps run efficiently.
Deeper Understanding of Code: Debugging helps us gain insights into how our code works, leading to better programming practices.
Better User Experience: An application free from bugs provides users with a smooth and satisfying experience.
Reduced Development Time: Catching and fixing errors early can save time and resources in the long run.

Common Errors in Programming

As Engineers, we might encounter different kinds of errors during development. Recognizing and understanding these errors is the first step toward effective debugging.

1. Syntax Errors

These occur when we violate the syntax rules of the programming language. For example, missing quotes in strings or forgetting a semicolon. In Dart, these errors are usually caught by the analyzer before the code runs.

Examples:

Missing quotes in strings - String name = John; instead of String name = "John";
Forgetting semicolons - int x = 5 instead of int x = 5;
Missing parentheses - if x == 5 instead of if (x == 5)
Unmatched braces - { without corresponding }
Invalid keywords - funtion instead of function

Syntax Error Example

2. Runtime Errors

Runtime errors happen during the execution of the code. They can also be called exceptions in Dart.

Examples:

FormatException - when trying to parse invalid data formats
Null pointer/null reference errors - when accessing properties on null objects
Array index out of bounds - when accessing invalid array indices,. like trying to fetch item 8 in an array with length 5.
File not found - when trying to access non-existent files

Runtime Error Example

3. Compilation Errors

Compilation errors prevent the high-level language code from being converted into machine code. These are caught before the program runs and often result from type mismatches or missing imports.

Examples:

int x = "hello"; (type mismatch)
if (x == 5 { (missing closing parenthesis)
y = x + 1; where x is not declared (undefined variable)

Compilation Error Example

4. Logic Errors

Logic errors are tricky, they don't prevent your program from running, but they cause it to produce incorrect results. This happens when there's a flaw in your algorithm or incorrect implementation due to a misunderstanding of the problem.

Examples:

Using a multiplication operator * instead of addition + when calculating a sum.
Infinite loops due to incorrect loop conditions
Incorrect sorting algorithms
Wrong mathematical formulas
Misunderstanding of data relationships
Incorrect boolean logic (using AND instead of OR, etc.)

Logic Error Example

5. Semantic Errors

Semantic errors occur when the code doesn't do what it's supposed to, even though it's syntactically correct. It's about meaning rather than syntax.

Examples:

Using - instead of + when you intended to add two numbers.
Using = (assignment) instead of == (equality comparison)
Using the wrong variable name
Calling a function with parameters in the wrong order
Using integer division when you need floating-point division

Semantic Error Example

Introduction to Flutter & Dart DevTools

What Are DevTools?

Flutter DevTools is a suite of performance and debugging tools for Flutter and Dart applications. They help you visualize your widget tree, debug layouts, analyze performance, and much more.

Launching DevTools in Visual Studio Code

To access DevTools in VS Code:

Press F1 to open the command palette.
Ensure your debug session is active.
Type "Open DevTools" and select any of the available commands.

Exploring the Features of Flutter DevTools

Flutter DevTools offers a range of powerful tools to help you debug and optimize your applications. Let's explore some of them:

1. Flutter Inspector

The Flutter Inspector allows you to visualize and explore your widget tree in real-time. It's invaluable for understanding existing layouts and diagnosing layout issues.

Flutter Inspector View

2. Performance View

The Performance view helps you diagnose performance problems and UI jank (lagging animations or interactions) in your application. It includes tools like the Flutter frames chart, which shows frame rendering times.

Flutter Frames Chart

3. CPU Profiler

The CPU Profiler allows you to record and analyze CPU activity in your app. It's useful for identifying performance bottlenecks and optimizing CPU usage.

4. Memory View

The Memory view provides insights into your app's memory allocation. You can detect memory leaks, analyze memory usage, and optimize accordingly.

5. Debug Console

The Debug Console lets you watch your app's standard output, evaluate expressions, and analyze object references while your app is running or paused in debug mode.

Debug Console View

6. Network View

The Network view allows you to inspect HTTP, HTTPS, and WebSocket traffic from your app. It's helpful for debugging network requests and responses.

Network View

Note: Network traffic recording starts automatically when the Network page is opened. If it's not recording, click the Resume button in the upper left corner.

7. Debugger

The Debugger is a full source-level debugger that supports breakpoints, stepping (into, over, out), and variable inspection.

Debugger View

8. Logging View

The Logging view displays events from the Dart runtime, Flutter framework, and application-level logging events. It's useful for tracking the flow of your app and identifying issues.

Logging View

9. App Size Tool

The App Size tool allows you to analyze the total size of your app, helping you optimize for download size and storage space.

To access the App Size tool:

Ensure DevTools is connected to a running application.
Navigate to the "App Size" tab.

Conclusion

Phewww, that was a lot yeah? Let's do a quick recap. We did an introduction to debugging, touched on how understanding and effectively using debugging tools is crucial for any Flutter Engineer. Always remember, debugging isn't just about fixing errors—it's about improving code quality, enhancing performance, and providing a better user experience.

In this first part of our series on the art of debugging, we've covered:

The definition and importance of debugging
Common types of errors in programming
An introduction to Flutter DevTools and its powerful features

In the upcoming articles, we'll dive deeper into specific debugging techniques, explore more features of Flutter DevTools, and learn how to tackle complex bugs in your Flutter applications.

Stay tuned, and happy coding!

Feel free to reach out if you have any questions or need further assistance. I'm always here to help!

Follow me on Twitter or connect with me on LinkedIn for more Flutter tips and tutorials.

Design Patterns - Flutter

Blazebrain — Thu, 23 Jun 2022 08:41:12 +0000

Introduction

Across diverse languages and frameworks, some tested and trusted sets of steps/procedures have solved problems in the software world. These processes form the core of many solutions to specific issues. On their own, they are not the solutions to these particular problems, but they form the core upon which various solutions lies upon. These set of steps/patterns are what we refer to as Design Patterns.

What are Design Patterns?

Design patterns are a series of patterns that provides a template or description of how you can solve a common problem. On their own, they are not complete solutions to problems but instead offer an explanation or way to solve a general re-occurring problem in the world of software design.

As a result of the similarities between issues raised, there was a need for a unified way of solving these common problems. That was what brought up the initial set of design patterns. You might have applied many of these solutions while developing a product(well yeah!). They are solutions that go deep into software development and tend to solve core problems without restricting them to a language or framework.

Importance of Design Patterns

Design patterns provide you with lots of benefits, some of which include:

Providing a general standard for communication among developers.
Reducing development time and speeding up the development process.
Providing proven solutions to common re-occurring problems.
Provides best practices to get a clean reusable, and bug-free codebase.
Providing a core/foundation upon which you can build solutions to re-occurring issues in software design ## Gang Of Four Design Patterns

These are a set of design patterns proposed by four authors: Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. They are most often referred to as the Gang of Four. They wrote a book titled Design Patterns: Elements of Reusable Object-Oriented Software, which introduces the design patterns and gives more information on each. This book was a significant aid for the Software Development world as it tackles many of these problems and how these patterns intend to solve them. There are 23 design patterns proposed in the book, which is divided into three categories

Structural
Behavioural and
Creational.

We will discuss more on each of these categories in the next section. Note that the "Design" here does not refer to UiUx Designs but is more about the design and development of software. One significant benefit of Design Patterns is that it's not specific to a particular language/framework but can be developed and implemented/used across various programming languages.

Categories of Design Patterns

We would look into each design pattern and why they are grouped into these categories. Each of these categories deals with a particular use case, and the patterns under them revolve around the solutions to similar situations in development. Since we can't go deep into each of the 23 design patterns, I have included links to study further each of these patterns and how they can be applied in Flutter. In future articles also, we would go deep into specific design patterns and walk through their implementations using Flutter.

Creational Design Patterns

These are the design patterns that deal with the way Classes and Objects are created/instantiated. There are five design patterns in the Creational Design Pattern category. They are:

Structural Design Patterns

These are design patterns that deals with the way Classes and Objects get composed. It deals with the way objects combine to achieve the desired result. There are seven design patterns under this category, and they include:

Behavioural Design Patterns

These are design patterns that deal with how Objects communicate with one another. There are 11 design patterns in this category. They include:

Some of these terms may/may not be familiar; you probably might have noticed a few that you have used while developing before; these guides would give you a better understanding of why they are used and what they solve.

Conclusion

In conclusion, these patterns offer solutions to typical and re-occurring software design and development problems. They do not depend on a particular language/framework. However, they do not present immediate solutions to those problems; they serve as a basis/ground upon which you can build solutions to these problems. A deep understanding of these patterns would impact the quality of your codes and enhance communication between you and other developers.

If you have any questions about any of them or questions on Flutter, you can
reach me through on any of the platforms listed here. I would be glad to answer. Cheers!

Building a Reminder App with Local Notifications using WorkManager API

Blazebrain — Sat, 26 Feb 2022 20:52:40 +0000

Introduction

Pause, tap your feet, scratch your hair a few times, squeeze your face a bit, then after a few choice seconds, voila, you remember, you finally yanked it off its hiding place. That piece of information, you eventually remember it! Sounds familiar? That’s what happens to many people daily across the entire continent. With the number of things we engage in, we tend to forget one or two pieces of information and then go through the scenario above, over and over. Well, mobile apps and technologies like Kotlin to the rescue. With the use of reminder applications, we can remind ourselves of essential/crucial events we must attend to; through notifications that pop up and draw our attention, we can adequately plan the day and be more productive.

In this article, we would build a Reminder app from scratch, cool yeah? You would learn to build a Reminder Application that uses Local Notifications to display reminders of events you have previously set. You would be able to set a message to display and select a Date and Time for the reminder.

Technologies to be used

As this tutorial will be hands-on, there are a few technologies that you must have and be familiar with.

Kotlin Programming Language
Android Studio
Basic Layout in Android Development
WorkManager API( we will discuss more of this in the next section).

What is WorkManager API?

WorkManager API is an API used to create scheduled notifications, i.e. pop-up messages that have been planned on the background process and delivered at a particular time. WorkManager makes it easy to schedule tasks to run even if the application exits or restarts. This means that our notifications would be delivered even if we closed the app. We would go through the step by step process of integrating the API into our app and using it to create a Reminder Application.

Let’s get practical

Project Setup

We’ll start by creating a new project in Android Studio. Select the Empty Activity Option, give the project a name of your choosing and then click ‘Finish’. Android Studio would create the basic structure, which we would build on as we proceed.

Now we are set to begin the actual coding; we would start from bottom to top, i.e., logic before layout or user interface.

The first thing we’ll do is create a folder named utils; this folder would contain all the helper classes we would be making use of in the application.

Right-click on the package-name folder for your app and select New to create a new file. Select Kotlin Class/File and name it NotificationHelper.

Building the NotificationHelper

The NotificationHelper class is the class that would handle all functionalities relating to notifications with the application.

We would pass in the context also as we would need it later on.

In this class, we’ll create two private variables

A channelId to identify our notifications channel and
The notificationId to identify the notifications could be a random integer

We’ll be implementing the BigPicture NotificationStyle in our notifications, which means that our notifications would contain images and the reminder text. For this we would need two images. Grab two images from the internet or your local device. Drag and drop it into the drawable folder of the res package. Import normally and also for v24. I have two images, checklist.png and reminder_char.png.

Next, we will create a private function responsible for creating a notifications channel through which the NotificationManager would deliver our reminders. For that, we would need to check if the user's phone is Android version Oreo and above; this is because we don’t need to create a notification channel for older versions.

private fun createNotificationChannel(){
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
           val channel = NotificationChannel(CHANNEL_ID, CHANNEL_ID, NotificationManager.IMPORTANCE_DEFAULT ).apply {
               description = "Reminder Channel Description"
 }
            val notificationManager =  context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
            notificationManager.createNotificationChannel(channel)
       }
    }

After checking, we create a notification channel using the channelID we declared earlier. We also set the Notification Priority to default and set the description of our Notification channel. After this, we call context and access the NotificationService of the device and use it to create a Notifications Channel. With this, we’ve set up the function to create notification Channels.

Next, we create a function to createNotifications. This makes it easy to reuse in other parts of our code.

fun createNotification(title: String, message: String){
    // 1      
    createNotificationChannel()
        // 2
    val intent = Intent(context, MainActivity:: class.java).apply{
            flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
        }
    // 3
        val pendingIntent = PendingIntent.getActivity(context, 0, intent, 0)
        // 4
    val icon = BitmapFactory.decodeResource(context.resources, R.drawable.reminder_char)
        // 5
    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
            .setSmallIcon(R.drawable.checklist)
            .setLargeIcon(icon)
            .setContentTitle(title)
            .setContentText(message)
            .setStyle(
                NotificationCompat.BigPictureStyle().bigPicture(icon).bigLargeIcon(null)
            )
            .setContentIntent(pendingIntent)
            .setPriority(NotificationCompat.PRIORITY_DEFAULT)
            .build()
        // 6
    NotificationManagerCompat.from(context).notify(NOTIFICATION_ID, notification)

    }

1 - Call the createNotificationChannel function created above.

2 - Create an Intent that calls the MainActivity when it runs. Adding an intent is to start up the app when the user clicks on the notification in the menu tray.

We also add flags to the intent:

Intent.FLAG_ACTIVITY_NEW_TASK will ensure the MainActivity opens up as a new Task on the history stack. It comes up as the root and appears as new in the history stack.
Intent.FLAG_ACTIVITY_CLEAR_TASK will cause any existing task associated with the activity to clear out before the activity starts.

3 - Since we are not launching the intent immediately, create a pending intent and pass the intent created to it. PendingIntent in itself is a description of an Intent and what action it’s to perform. It gives an external application(like NotificationManager in our case)access to launch tasks for us as if we were launching them now, with the same set of permissions we would use. We call getActivity, which means the PendingIntent is to start a newActivity when it launches.

4 - We go-ahead to create an icon for the notification using a BitmapFactory. We have already imported the images we want to use earlier, so we call decodeResource on BitmapFactory and then pass the image we want to use. We would use the icon in the notification.

5 - Next, we create the notification object by using NotificationCompat.Builder and pass in the channelID. We go-ahead to set other configurations for our notifications like smallIcon, largeIcon, message(which will come from the message parameter goes into this function), the notificationStyle(we’ll be using the BigPictureStyle), we also pass in the icon we created in step 4. We also set the contentIntent(the pendingIntent we created in step 3) and then the notificationPriority(pass it as default). Lastly, we call build to add all these configurations as part of the object.

6 - We create the notification using the NotifcationManagerCompat, passing in the NotificationID and the notification Object we created in Step 5.

With this, our NotificationHelper class is good to go, and we can start triggering “instant” notifications by simply calling the createNotifcation function, passing in the title and description, and getting a notification.

However, this does not fulfill our aim as we want the notifications to pop up at a time we set, not instantly, i.e. we want a delayed notification. This is where WorkManager API comes in; using this API; we would be able to create a notification that would come up when we want.

Integrating the WorkManager API

To access the WorkManager API, we need to add it as a dependency. Open your build.gradle file in the GradleScripts section and add the work manager API there.

dependencies {
    // other dependencies here
    implementation "androidx.work:work-runtime-ktx:2.5.0"
}

Don’t forget to sync after adding this.

Next, we create a Worker class named ReminderWorker in the utils package. This class would inherit from the Worker class coming from the WorkManager API and give us access to a function doWork(). This async function, which we will override in our class, would be responsible for calling the createNotification function, defined in NotificationHelper. and creating the Notification. The ReminderWorker class takes in two parameters, the context and the WorkerParameters, which it would pass over to its Superclass.

Ok, let’s pause there and see how it looks in the code.

class ReminderWorker(val context: Context, val params: WorkerParameters) : Worker(context, params){
    override fun doWork(): Result {
        NotificationHelper(context).createNotification(
        inputData.getString("title").toString(),
            inputData.getString("message").toString())

        return Result.success()
    }
}

Since we want to be able to pass in our title and message for each Notification, we use the inputData object, which is a key-value object that contains information that needs to be processed, in our case here, the title and object information that needs to be processed in the doWork function. Finally, we return the result as a success.

Creating a WorkRequest

A WorkRequest is an object which contains all the information the WorkManager needs to schedule and run your work. It takes in a WorkerClass that has defined the work to be done. There are two of WorkRequests:

OneTimeWorkRequest: A WorkRequest which triggers only once.
PeriodicWorkRequest: A WorkRequest which runs periodically based on set configuration.

Since we want our notifications to display only once, i.e. it should only remind us at the time and date we set, we would use the OneTimeWorkRequest.

To start with this, open up your MainActivity.kt file; it contains an empty activity class with the contentView set to the activity_main.xml file.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Create a private function in theMainActivity called createWorkRequest. This function takes in a message, the note we want to add to the notifications. In this function, we create a WorkRequest object by calling the OneTimeRequestBuilder and passing the ReminderWorker class.
We set configurations like initialDelay. The OneTimeWorkRequest allows us to delay the time before the task(our notification) displays. We can set the delay to milliseconds, seconds, minutes, hours etc. For our reminder app, we want to hold our notification until the actual time and day we selected. To do that, we calculate the difference between the DateTime the user selected and the currentDateTime. We would then pass this delay when setting the intialDelay for the workRequest. We would go through each step while setting up the rest of the MainActivity class.
We also set the InputData through the workDataOf object, passing a map of the values we want to use in our notifications. We would pass in the message through the message parameter for this function.

private fun createWorkRequest(message: String,timeDelayInSeconds: Long  ) {
        val myWorkRequest = OneTimeWorkRequestBuilder<ReminderWorker>()
            .setInitialDelay(timeDelayInSeconds, TimeUnit.SECONDS)
            .setInputData(workDataOf(
                "title" to "Reminder",
                "message" to message,
            )
            )
            .build()

        WorkManager.getInstance(this).enqueue(myWorkRequest)
    }

Lastly, we call the WorkManager, get an instance and enqueue the request. With this, we are set! You’ve done well getting to this point. Now let’s go over and create a layout to link it up and see our Reminder App in its full beauty.

Laying out the View

We would set up a simple interface that would include:

An EditText: to input the message you want to show in the notification
A TimePicker: to select the time of the day you wish to show your notification
A DatePicker: to choose the day you want the reminder to come up
A Button: to set the notification with all the parameters specified.

Open up your res > layout > activity_main.xml file. We would use the Linear Layout and add each of those components listed above, giving them unique ids that would be used to reference them in the MainActivity file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<ScrollView android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="10dp">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Message"/>

        <DatePicker
            android:id="@+id/datePicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:datePickerMode="spinner"
            android:calendarViewShown="false"/>

        <TimePicker
            android:id="@+id/timePicker"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="19dp"
            android:timePickerMode="spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

            <Button
                android:id="@+id/setBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="SET"/>

    </LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Next, we head over to the MainActivity.kt file and start making use of each of these components to set up our notifications.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
// 1
        var chosenYear = 0
        var chosenMonth = 0
        var chosenDay = 0
        var chosenHour = 0
        var chosenMin = 0
// 2
        val descriptionText = findViewById<EditText>(R.id.editText)
        val button = findViewById<Button>(R.id.setBtn)
        val datePicker = findViewById<DatePicker>(R.id.datePicker)
        val timePicker = findViewById<TimePicker>(R.id.timePicker)
    val today = Calendar.getInstance()
// 3
        datePicker.init(today.get(Calendar.YEAR), today.get(Calendar.MONTH),
            today.get(Calendar.DAY_OF_MONTH)
        ) { _, year, month, day ->
            chosenYear = year
            chosenMonth = month
            chosenDay = day
        }
// 4
        timePicker.setOnTimeChangedListener { _, hour, minute ->
            chosenHour = hour
            chosenMin  = minute
        }
// 5
        button.setOnClickListener {
            // 6 Get the DateTime the user selected
            val userSelectedDateTime =Calendar.getInstance()
            userSelectedDateTime.set(chosenYear, chosenMonth, chosenDay, chosenHour , chosenMin)

            // 7 Next get DateTime for today
            val todayDateTime = Calendar.getInstance()

       // 8
            val delayInSeconds = (userSelectedDateTime.timeInMillis/1000L) - (todayDateTime.timeInMillis/1000L)

       // 9
            createWorkRequest(descriptionText.text.toString(), delayInSeconds)

       // 10     
        Toast.makeText(this, "Reminder set", Toast.LENGTH_SHORT).show()
        }
    }

1 - We create variables to hold the year, month, day, hour and minute that the user selects for the notification.

2 - We reference View components using their IDs, using the findViewById function. We do this for each component, the EditText, the Button, the DatePicker and the TimePicker. We also get the current DateTime by getting an Instance of Calendar.

3 - We initialize the datePicker and assign the current year, month and day to it, so when the Calendar comes up, it starts from the current day and not well, from Feb 24, 1927. After initializing, we pass the values selected by the user to the variables we created in Step 1 for a year, month and day.

4 - We call setOnTimeChangeListener on the TimePicker and then set the hour and minute the user selected to the variables we declared in Step 1 whenever the user interacts with the TimePicker.

5 - We call setOnClickListener on the Button to run our logic when the user clicks the “Set” button in the View.

6 - Using the year, month, day, hour and minute that the user selected, we set an instance of Calendar. we save this instance to a variable

7 - We get an instance of Calendar to give us the current day DateTime.

8 - We convert the userSelectedDateTime and todayDateTime to milliseconds. After this, we divide them by 1000L, converting them to seconds. Finally, we subtract todayDateTime from the userSelectedDateTime to get the number of seconds the notification would delay before it displays to the user. We save the result to a variable, delayInSeconds.

9 - We call the createWorkRequest function and pass in the message from the descriptionText View component and the delayInSeconds to it, creating the workRequest for the notification.

10 - We display a toast message informing the user that the Reminder is set.

With this done, let’s run our code and test it out.

And there you go, we have a full-fledged Reminder Application with Local Notification, built using the WorkManager API in Kotlin. You can checkout the source code for the app here.

Conclusion

Hurray! You got here; give yourself a round of applause; you deserve it! You’ve mastered displaying Local Notifications in An Android App using the WorkManager API. You’ve also built a simple app you can use personally to set reminders, cool yeah? Definitely! If you encounter any issue or want further clarifications, drop a comment below, reach out to me on Twitter or LinkedIn, I would be glad to assist. Do have a pleasant day.

Integrating FaunaDB with Flutter

Blazebrain — Sat, 04 Dec 2021 09:41:17 +0000

Introduction

In building mobile apps, especially with an emphasis on scalability, many factors are considered before the development process starts. One of these factors is the way data is stored. We would at a unique solution to managing data in our application, it's called Fauna. Fauna offers a free, ready to use database that can be setup and ready to go in few minutes(yes, it’s that easy to use). With Fauna, yoiu never need to worry about complex setups or difficult to use queries. They are very relatable and easily understandable. This article will teach you how to integrate and use the Fauna in our Flutter app through a step-by-step procedure.

Integrating with Flutter.

We would be building a Todo list app with Flutter and Fauna. The app would have functionalities including getting all todos, creating new todos, and deleting todos.

First, head over to create the Fauna website and create an account.

After successful signup and login, on the dashboard screen. Click the Create Database button to create a new database. We would name our database “todo”.

After creating the database, click on Security → New Key.

This is to generate a key that the app would use to access the database. It's the link between our app and Fauna. Make sure you copy the link to a secure place as it is only displayed once.

Next, create the collection by clicking the Collections tab at the left. Click the New Collection button and enter the name of the collection. We can call ours “todos”, just like the database it’s in, because we’re only using one collection here.

Next on the list is to create an index. This is a more straightforward and speedy way of sorting through the data in the database without extra stress (yeah! Fauna is sweet). Click the Indexes tab, then the New Index button. For this particular index, we would name it “all_todos” because we want it to do just that: return the complete list of todos we have stored.

With that, we've set up things on the Fauna side, so now it’s on to our codebase.

Create a new flutter project using the “flutter” command

`flutter create faunadb_sample_project`

Once done, go to the pubspec.yaml file and start by adding the dependencies. In the dependencies block, add the following:

faunadb_data : This will be the link between our application and the FaunaDB. Using this package, we will be able to perform CRUD operations on our database.
stacked: The architectural solution we’ll use in the application.
stacked services: A set of ready-made services offered by stacked, which can be customized.
intl: For internationalization, number formatting, and some other things.
optional : This ensures that our functions don’t return null.

Under dev_dependencies, add

build_runner : This give us access to run commands to generate files needed in the app.
stacked generator: This enables auto generating files marked with the Stacked Annotations.

    dependencies:
     cupertino_icons: ^1.0.2
     faunadb_data: ^0.0.6
     flutter:
      sdk: flutter
     intl: ^0.17.0
     optional: ^6.1.0+1
     stacked: ^2.2.7
     stacked_services: ^0.8.15
    dev_dependencies:
     build_runner: ^2.1.5
     flutter_lints: ^1.0.0
     flutter_test:
      sdk: flutter
     stacked_generator: ^0.5.6
    flutter:
     uses-material-design: true

We would be using the faunadb_data package to link the client's setup and perform queries on our database.

Next, create a new file named todo.dart. Inside the class, create a class and name the class TodoModel. It has five parameters that make up each Todo. That's the id, todoName, todoContent, completed(status), date.

    class TodoModel extends Entity<TodoModel> {
     final String id;
     final String todoName;
     final String todoContent;
     final bool completed;
     final String date;
     TodoModel(
      this.id,
      this.todoName,
      this.todoContent,
      this.completed,
      this.date,
     );
    }

The class extends the Entity class, which comes from faunadb_data. The fromJson, getId, and model methods act as overrides on the Entity class.

    class TodoModel extends Entity<TodoModel> {
    //The fromJson() method returns a TodoModel object with the key parameters in the map passed in. 
     @override
     TodoModel fromJson(Map<String, dynamic> model) {
      // TODO: implement fromJson
      throw UnimplementedError();
     }
     // The getId() method returns the id making it easier to fetch the id of a particular Todo Object. 
     @override
     String getId() {
      // TODO: implement getId
      throw UnimplementedError();
     }
     // The model() method returns a map with key-value pairs of the parameters for the TodoModel.
     @override
     Map<String, dynamic> model() {
      // TODO: implement model
      throw UnimplementedError();
     }
    }



    class TodoModel extends Entity<TodoModel> {
     final String id;
     final String todoName;
     final String todoContent;
     final bool completed;
     final String date;
     TodoModel(
      this.id,
      this.todoName,
      this.todoContent,
      this.completed,
      this.date,
     );
     @override
     TodoModel fromJson(Map<String, dynamic> model) {
      return TodoModel(
       model['id'] as String,
       model['todoName'] as String,
       model['todoContent'] as String,
       model['status'] as bool,
       model['date'] as String,
      );
     }
     @override
     String getId() {
      return id;
     }
     @override
     Map<String, dynamic> model() {
      Map<String, dynamic> model = {
       'id': id,
       'todoName': todoName,
       'todoContent': todoContent,
       'status': completed,
       'date': date,
      };
      return model;
     }

    // In addition to this, we create two static variables which point to the collection name and the index we created earlier. 
     static String collection() => "todos";
     static String allTodosIndex() => "all_todos";
    }

With that, we have our TodoModel and its overriding methods all set up.

We still need to set up the deserializer, which takes in a map and uses it to construct a TodoModel Object.

    TodoModel getTodoFromJson(Map<String, dynamic> json) {
      return TodoModel(
        json['id'] as String,
        json['todoName'] as String,
        json['todoContent'] as String,
        json['status'] as bool,
        json['date'] as String,
      );
    }

Next thing to set up is the repository class. This call which would be named TodoRepository would extends the FaunaRepository class which comes from the fauna_data class we are using. This class would link us to the database we created in FaunaDB and also the specific index we want to use. We would pass both in the super constructor.

    class TodoRepository extends FaunaRepository<TodoModel> {
     TodoRepository() : super("todos", "all_todos");
    }

Using the super constructor, we pass the name of the collection and the index, the two things needed for the Repository setup.

Moving forward, create a new folder named services; inside this folder, create a file named todo_service.dart with a class named TodoService. This class will be the intermediary between our app and the package we’re using. All the calls we’re making to the database would flow through this class. Methods to read, save, update, delete data from the database would go in here.

    import 'package:faunadb_data/faunadb_data.dart';
    import 'package:optional/optional.dart';
    import 'package:pilots/todo.dart';
    class TodoService {
     TodoRepository todoRepository = TodoRepository();

     //CRUD Operations in Fauna
     /// Create Operation
     saveTodo(TodoModel todo) async {
      await todoRepository.save(todo, getTodoFromJson);
     }
     /// Read Operation 1
     Future<List> getAllTodos() async {
    //The number of results per page would go into the size parameter, we are starting with 20 results per page here
      PaginationOptions po = PaginationOptions(size: Optional.of(20));
      final result = await todoRepository.findAll(po, getTodoFromJson);
      return result.data;
     }
     /// Read Operation 2
     Future<TodoModel> getSingleTodo(String id) async {
      final result = await todoRepository.find(id, getTodoFromJson);
      return result.value;
     }
     /// Update Operation
     updateTodo(TodoModel todo) async {
      await todoRepository.save(todo, getTodoFromJson);
     }
     /// Delete Operation
     deleteTodo(String id) async {
      final result = await todoRepository.remove(id, getTodoFromJson);
      return result.value;
     }
    }

Now that we are done setting up our services and other things needed to interact with our database smooth, let's create a new folder called UI. We’ll have two screens in the app:

homeView, which displays the list of todos, and
add_todos, which is where we’ll add the details for creating a new todo object.

Inside the UI folder, create two folders named homeView and add_todos respectively.

In the homeView folder, create two new files titled home_view.dart and home_viewmodel.dart. The business logic and functionalities would be in the viewmodel while the UI code would be in the view file.

Also, in the add_todos folder, create two new files also titled add_todos_view.dart and add_todos_viewmodel.dart.

In the add_todo_viewmodel.dart and home_viewmodel.dart files, create a class to extend the BaseViewModel.

    class AddTodoModel extends BaseViewModel {}


    class HomeViewModel extends BaseViewModel{}

In the add_todos_view.dart file, create a Stateless widget and return the ViewModelBuilder.reactive() function from the Stacked package. Remembering I mentioned the viewmodel files would hold the logic for the view files. The ViewModelBuilder.reactive() constructor would serve as a binding between a view file and it’s corresponding viewmodel. That way, a view can access and make use of logic declared in the viewmodel in its view file.

Here is the homeView now:

    class HomeView extends StatelessWidget {
     const HomeView({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<HomeViewModel>.reactive(
       viewModelBuilder: () => HomeViewModel(),
       onModelReady: (viewModel) => viewModel.setUp(),
       builder: (context, viewModel, child) {
        return Scaffold();
       },
      );
     }
    }

Here’s the addTodoView too:

    class AddTodoView extends StatelessWidget {
     AddTodoView({
      Key? key,
     }) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<AddTodoModel>.reactive(
       viewModelBuilder: () => AddTodoModel(),
       builder: (context, viewModel, child) {
        return Scaffold();
       },
      );
     }
    }

The next thing is to set up our routes and register the services, making it easier to use them across the entire codebase using the locator. Create a new folder named app. In this folder, create a new file and call it app.dart. To register the services, we’ll make use of the @StackedApp annotation. This gives us access to two parameters, routes and dependencies. In the dependencies block, we’ll register the TodoService and NavigationService. Also, we’ll declare the routes for the pages we’ll use, i.e. the HomeView and the AddTodoView.

    @StackedApp(
     routes: [
      MaterialRoute(page: AddTodoView),
      MaterialRoute(page: HomeView),
     ],
     dependencies: [
      LazySingleton(classType: NavigationService),
      LazySingleton(classType: TodoService),
     ],
    )
    class AppSetup {}

Run the flutter command below to generate the files needed.

`flutter pub run build_runner build --delete-conflicting-outputs`

This command generates the app.locator.dart and app.router.dart file into which our dependencies and routes are registered.

Go to your main.dart file; in the main block, above the runApp(), we need to set up the locator and the DB key that the app would use to access the DB. Recall the key we created earlier while setting up our DB on the Fauna account.

    void main() {
     WidgetsFlutterBinding.ensureInitialized();
     setCurrentUserDbKey("//YOUR-KEY-GOES-HERE");
     setupLocator();
     runApp(MyApp());
    }

Now we are done with all the setups and configurations we need to do. We can start building the UIs and writing the business logic in the ViewModel.

In HomeViewModel, we define methods to get all the todos currently in the database anytime we start the app (read operation on the DB). Another function is to delete a particular Todo. Using the locator, we inject the services and use them to access the methods we've set up in the TodoService class earlier. The list of todos is what the UI screen will use in building the screen. Also, since we want the current list of todos in our DB to show once we start the application, we create a function called runBusyFuture, which tells the ViewModel*, "Hey, I'm currently fetching essential data,* so hold on and display a loading indicator". This function is safer to adjust our UI based on the state, the list of todos.

    class HomeViewModel extends BaseViewModel {
     final _todoService = locator<TodoService>();
     final _navigationService = locator<NavigationService>();
     List<dynamic> todosList = [];

     Future<void> setUp() async {
      await runBusyFuture(getTodos());
     }

     Future<void> getTodos() async {
      todosList = await _todoService.getAllTodos();
     }

     Future<void> deleteTodo(String id) async {
      await _todoService.deleteTodo(id);
      todosList = await _todoService.getAllTodos();
      notifyListeners();
     }

     navigateToAddTodoPage() {
      _navigationService.navigateTo(Routes.addTodoView);
     }
    }

In the addNewTodo ViewModel, we declare the method to save the details of the new Todo and create the Todo; after the Todo gets completed, we route the user to the HomeView, which displays the list of all the Todos.

    class AddTodoModel extends BaseViewModel {
     final service = locator<TodoService>();
     TodoRepository repo = TodoRepository();
     bool status = false;
     NavigationService navigationService = NavigationService();

     Future<void> createTodo(String name, String content) async {
      Optional<String> uniqueId = await repo.nextId();
      String id = uniqueId.value;
      TodoModel newTodo = TodoModel(id, name, content, status, formatDate());
      final result = await service.saveTodo(newTodo);
      navigateToHome();
     }

     String formatDate() {
      DateTime now = DateTime.now();
      String formattedDate = DateFormat('MMMM d' + ', ' + 'y').format(now);
      return formattedDate;
     }

     void navigateToHome() {
      navigationService.navigateTo(Routes.homeView);
     }
    }

Next, to fill the UI screen, we would use a ListViewBuilder to display the elements of the list we get from the database. You can check the gist for the complete code here.

For the addNewTodo, we would be using a Form. At the top of the file, use the @FormView annotation; this gives access to the fields. In the field block, add the fields in the form using the FormTextField and attach the generated mixin to the class.

    class AddTodoView extends StatelessWidget with $AddTodoView {


    @FormView(fields: [
     FormTextField(name: 'todoName'),
     FormTextField(name: 'todoContent'),
    ])

Then run the flutter command to generate the file.

`flutter pub run build_runner build --delete-conflicting-outputs`

It would contain the mixin for managing the controllers, which you would assign to the fields in the Form.

For the todoName FormField:

    TextFormField(
     controller: todoNameController,
     focusNode: todoNameFocusNode,
     decoration: const InputDecoration(
      label: Text('Title'),
      border: OutlineInputBorder(
       borderSide: BorderSide(),
       borderRadius: BorderRadius.all(
        Radius.circular(16.0),
       ),
      ),
     ),
    ),

and for the todoContent FormField:

    TextFormField(
         controller: todoContentController,
         focusNode: todoContentFocusNode,
         decoration: const InputDecoration(
          label: Text('Content'),
          border: OutlineInputBorder(
           borderSide: BorderSide(),
           borderRadius: BorderRadius.all(
            Radius.circular(16.0),
           ),
          ),
         ),
        ),

You can check out the complete code for the UI screen in this gist here.

Save and run the application, and you should see something like this:

You can check out the complete code for the sample app here.

Conclusion

And that's a wrap! We've officially integrated the Fauna into our Flutter app and built a fully functional Todo List Application along the way. Fauna is fast, smooth and easy to use and takes just a few steps to set up and integrate. Check out the official documentation for further study. Keep learning, keep building and definitely, keep using Fauna.

If you have any questions, don't hesitate to reach out to me on Twitter: @Blazebrain or LinkedIn: @Blazebrain.

Cheers!

Written in connection with the Write with Fauna Program.

Using Services in Flutter

Blazebrain — Mon, 01 Nov 2021 14:14:19 +0000

One primary criterion for building a fully scalable and maintainable application is the reusability of code. Complex numbers of code repetitions would result in many potential bugs. When there needs to be a change in the package offering a particular service to the app, a painfully long process would be required to completely swap out implementations in the app. That itself is a nightmare for developers and can be the launching pad to failure for a product/company.

This article will introduce you to Services in Flutter, along with their key benefits, and show example code. This article assumes you have a Flutter development environment setup and have been building apps with Flutter. If not, you can check out this guide from Flutter on getting started building Flutter apps.

Introduction

Services are classes that offer a specific functionality. A Service is a class that uses methods that enable it to provide a specialized feature, emphasizing specialized. A Service class offers just one distinct input to the app. Examples include:

ApiService
LocalStorageService
ConnectivityService
ThemeService
MediaService etc.

Notice how each of the services listed out there offers one distinct feature. They keep the codebase as clean as possible and reduce the number of repeated codes on the codebase.

Services abstract functionalities got from a third-party source and reduced the dependence of the entire app on the goodwill of the package maintainer. For an app that depends directly on the packages, if the package maintainers abandon the package and there are no updates, it would break the app. When a decision is made later on to swap the package for another, there would be a lot involved in the process as developers would have to search through the codebase for places the package is used and then manually swap them. This process is painfully long and would cost development time and resources that the app could have better used.

The app does not depend on the 3rd party package but depends on the Service class. Hence, when there is a need for a swap, the only thing that would need to be changed would be functions from the packages the Service depends on.

Getting started

Let's use the MediaService to fetch an image from the user's phone and displays it on the screen. The first thing is to create a new project.

    flutter create intro_to_service

Next, import stacked and image_picker packages, which Flutter would use in the project in the dependencies section of the pubspec YAML.

    dependencies: 
     image_picker: ^0.8.4+3
     stacked: ^2.2.7

In the dev dependencies section, import the build_runner and stacked generator, which would be responsible for generating files from the annotations used in the app.

    dev_dependencies:
     build_runner: ^2.1.4
     stacked_generator: ^0.5.5

Next, head over to your main.dart file. Clear out the default counter app code, create a new material app, and pass an HomeView to the home parameter (The HomeView will be created later).

    import 'package:flutter/material.dart';
    import 'package:intro_to_services/app/app.locator.dart';
    import 'views/home_view/home_view.dart';
    void main() {
     runApp(MyApp());
    }
    class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
      return const MaterialApp(
       title: 'Material App',
       home: HomeView(),
      );
     }
    }

We would be making use of the image_picker package and picking the image from the gallery.

Create a folder named services; inside this folder, create a new file titled media_service.dart. This is where the code for setting up the Service would be stored.

Next, create the method to get the image; we provide it with a parameter fromGallery to indicate if we would be using the Camera or taking the image from the gallery. The image_picker package gives us access to both.

This method would call the pickImage function the package gives us access to and use the fromGallery parameter to determine if we would get the image from the gallery or use the Camera.

    import 'dart:io';
    import 'package:image_picker/image_picker.dart';
    class MediaService {
     final ImagePicker _picker = ImagePicker();
     Future<File?> getImage({required bool fromGallery}) async {

      final XFile? image = await _picker.pickImage(
       source: fromGallery ? ImageSource.gallery : ImageSource.camera,
      );
      final File? file = File(image!.path);
      return file;
     }
    }

The getImage method then returns the file that was selected to be used inside the application. That wraps up the MediaService we would be using.

Next, set up the locator file and register this Service that any class can use within the codebase. Create a new folder and name it app. In this folder, create a file named app.dart. This file would hold the setup for registering our services and other dependencies across the app.

Inside the app.dart file, create a class named AppSetup and annotate it with the @StackedApp annotation. This annotation takes in a few parameters, among which are the routes and dependencies. The various services to be used within the app would be registered within the dependencies block of the StackedApp annotation.

    import 'package:intro_to_services/services/media_service.dart';
    import 'package:stacked/stacked_annotations.dart';
    @StackedApp(
     dependencies: [
      LazySingleton(classType: MediaService),
     ],
    )
    class AppSetup {}

Inside the block, we register the Service as a LazySingleton, meaning it won't be initialized until it is used in the application. The classtype is the name of the class, which is MediaService.

Next, run the command to generate the locator file from the StackedApp annotation using the stacked generator.

    flutter pub run build_runner build --delete-conflicting-outputs

There is a function in this generated file, the setupLocator() function, which sets up the environment and registers the Service. We call this function in the main block in the main.dart file.

    void main() {
     WidgetsFlutterBinding.ensureInitialized();
     setupLocator();
     runApp(MyApp());
    }

With this, we have successfully created the Service and registered it in the locator file, making the Service available for use in any part of the codebase.

Next, set up the homeView and its ViewModel. Create a new folder in the lib directory titled views. Inside this folder, create the folder which would hold the homeView and homeViewModel files. Name this folder home_view. Create the two files and name them home_view.dart and home_viewmodel.dart.

In the homeViewModel file, create a class named HomeViewModel which extends the BaseViewModel from the stacked package. In this class, we first declare a variable that would access the MediaService through the locator. The locator gives us access to the entire Service and its methods. Next, we declare a private nullable image of File type. We then link it to a getter for access by outside classes.

    import 'dart:io';
    import 'package:intro_to_services/app/app.locator.dart';
    import 'package:intro_to_services/services/media_service.dart';
    import 'package:stacked/stacked.dart';
    class HomeViewModel extends BaseViewModel {
     final mediaService = locator<MediaService>();
     File? _image;
     File? get imageFromGallery => _image;
    }

Next, set up the method to make the call to the Service and fetch the image. The call to the getImage function of the Service returns a file that we pass to the _image variable we created earlier. We then call notifyListeners provided by the BaseViewModel class from the stacked package. The notifyListerners() call would inform the views bound to this ViewModel that there has been a state change and that the views should perform a rebuild.

    Future<void> getImageFromGallery() async {
      _image = await mediaService.getImage(fromGallery: true);
      notifyListeners();
     }

Lastly, setting up the view itself. Create a stateless widget named HomeView in the home_view.dart file. This widget returns the viewModelBuilder widget from stacked, which binds the view to the ViewModel. We pass in the ViewModel to the viewModelBuilder function parameter and a Scaffold to the builder parameter.

    import 'package:flutter/material.dart';
    import 'package:stacked/stacked.dart';
    import 'home_viewmodel.dart';
    class HomeView extends StatelessWidget {
     const HomeView({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<HomeViewModel>.reactive(
       viewModelBuilder: () => HomeViewModel(),
       builder: (context, viewModel, child) {
        return Scaffold();
       },
      );
     }
    }

For the UI itself, we create a TextButton and pass the function to get the image from the ViewModel in its onPressed Function; this would get the image from the gallery and makes it available for use in the view through the getter we declared in the ViewModel class.

     TextButton(
       onPressed: () {
        viewModel.getImageFromGallery();
       },
       child: const Text('Fetch Image'),
     )

Lastly, if the image is not null, we want to display the image in the view if the user has selected an image. Using the image.file from Flutter, we display the selected image from the gallery to the user in the UI.

     if (viewModel.imageFromGallery != null)
       Image.file(
        viewModel.imageFromGallery!,
         height: 30,
         width: 30,
       ),

Here is the complete code for the home_view.dart view.

    import 'package:flutter/material.dart';
    import 'package:stacked/stacked.dart';
    import 'home_viewmodel.dart';
    class HomeView extends StatelessWidget {
     const HomeView({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<HomeViewModel>.reactive(
        viewModelBuilder: () => HomeViewModel(),
        builder: (context, viewModel, child) {
         return Scaffold(
          body: Center(
           child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
             if (viewModel.imageFromGallery != null)
              Image.file(
               viewModel.imageFromGallery!,
               height: 100,
               width: 100,
              ),
             TextButton(
              onPressed: () {
               viewModel.getImageFromGallery();
              },
              child: const Text('Fetch Image'),
             )
            ],
           ),
          ),
         );
        });
     }
    }

Check out the complete code for the sample app here. Don't forget to drop a star on the repo.

Conclusion

Hurray, you have successfully learned how to create a service, declare it and use it anywhere within your application.

Services reduce the number of codes that would be reused within the application making the codebase cleaner and better organized. Services also protect us from the pain of manually swapping out implementations when there is a change in the third-party package being used within the codebase.

Services offer benefits that speed up the development time and effectively use available resources. Not using them yet? Try them out, and you will see the impact it would make on your codebase.

If you have any questions, don't hesitate to reach out to me on Twitter: @Blazebrain or LinkedIn: @Blazebrain.

Cheers!

Using Stacked Architecture in Flutter App

Blazebrain — Mon, 01 Nov 2021 14:13:37 +0000

The concept of Architecture is one of the most diverse topics in the world of programming today. A lot of solutions have been developed, all aimed at fixing one flaw or the other. App Architecture is one of the topics where personal choice has been advised to come in. If one meets your needs efficiently and enables you to release good, quality code, then go for it.

This article aims to introduce you to Stacked Architecture, an architecture that offers clean, efficient solutions to architecture your next Flutter app. From dependency Injection to the right out of the box services to layered structures that follow the principles of Clean Architecture and a whole lot. To get started on development with Flutter, check out this article from the Flutter team.

Stacked Architecture, developed by Dane Mackier from FilledStacks, is an MVVM Architecture solution that offers a lot of components for building a highly scalable, testable, maintainable, and usable Flutter application. From

State Management,
Dependency Injection (Dependency Inversion),
Navigation Abstraction,
Services (Out-of-the-box),

And a whole lot more. All of these are offered by the Stacked Architecture.

State Management

Handling State in Flutter application using Stacked couldn’t be much better. It provides widgets and constructors which control how the state is being passed and managed in the application. Let’s dive into it using a sample app.

The first thing is to create a new Flutter project,

     flutter create intro_to_stacked

This command generates all the files and folders, which lays the foundation of the flutter app.
Next is to add stacked as a dependency in the pubspec.yaml file

    stacked: ^2.2.7

Next is to set up the basic folder structure for the sample app. Go to the lib folder and create a new folder titled home. Inside this, create two files named home_view.dart and home_viewmodel.dart. The homeViewModel file would be responsible for managing the state of the homeView, which is shown to the user. Clean Architecture, which says the view should contain zero logic, is strictly adhered to; the logic resides in the ViewModel.

The view is bound to the ViewModel using the ViewModelBuilder widget, which Stacked offers. This widget takes in 2 parameters which are

builder, which builds the UI that has its state in the ViewModel
viewModelBuilder, which is the function that would return the ViewModel for this widget.

    import 'package:flutter/material.dart';
    import 'package:stacked/stacked.dart';
    import 'package:intro_to_stacked/ui/views/home/home_viewmodel.dart';

    class HomeView extends StatelessWidget {
     const HomeView({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<HomeViewModel>.reactive(
       viewModelBuilder:()=> HomeViewModel(),
       builder: (context, model, child) {
        return Scaffold();
       },
      );
     }
    }

The ViewModelBuilder offers two constructors that deal with how the state is managed and subsequently update the UI for the application. They are the .reactive() and the .nonReactive() constructors. The .reactive() rebuilds the UI every time notifyListeners is called in the ViewModel. However, the .nonReactive() constructor rebuilds the UI once, after which it doesn’t rebuild on subsequent calls in the ViewModel.

With that, we’ve set up the view file, moving to the ViewModel, we create a class that extends the BaseViewModel class that stacked provides. The BaseViewModel class provides functionalities used for maintaining the state in the application. In the ViewModel, we have a String that says Stacked is cool (definitely true). This String is the state currently offered by the ViewModel and which would need to be displayed on the screen.

    import 'package:stacked/stacked.dart';

    class HomeViewModel extends BaseViewModel {
     final String _declaration = 'Stacked is soo cool';
     String get myDeclaration => _declaration;

    }

Back to the view, to use this state in our builder, we use the model offered by the builder connecting the state in the ViewModel to the UI screen which uses it.

    Scaffold(
         body: Center(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
           children: [
            const Text('Stacked Introduction'),
            Text(model.myDeclaration),
           ],
          ),
         ),
        );

On updating the state in the application, let’s have a function that updates the text and calls notifyListeners after. We would link this function to the onPressed of a TextButton.

    //In View(home_view.dart)
     TextButton(
      onPressed: () => model.updateDeclaration(),
      child: const Text('Update Text'),
     )

    //In ViewModel (home_viewmodel.dart)
     void updateDeclaration() {
      _declaration = 'I say Stacked is sooo cool';
      notifyListeners();
     }

The notifyListeners call informs the view to rebuild as there has been a state change in the ViewModel.

For a deep dive into the state management solution offered, check out this article provided by the FilledStacks team.

How about Navigation and Dependency Injection?

Stacked provides a direct out the box to navigation without context. Using the NavigationService it gives, we can smoothly declare our navigation in our ViewModel and use them in the view. This NavigationService allows for a clean UI without the interference of logic or complex routing codes. With the aid of the build runner and stacked generator, we can auto-generate routes and smoothly perform navigation.

Let’s get to it.

The first is to add build_runner and stacked_generator to the dev_dependencies section in your pubspec.yaml file. Also, add the stacked_services to the dependency section.

    dependencies:
     stacked: ^2.2.7
     stacked_services: ^0.8.15

    dev_dependencies:
     build_runner: ^2.1.4
     stacked_generator: ^0.5.5

Run the flutter pub get command to get the files locally for use.

Next is to create the new view that we would be routing to. Create a folder inside views and name it profile. Inside this folder, create two files, the profile_view.dart and profile_viewmodel.dart.

In profile_viewmodel.dart, create a class named ProfileViewModel which extends BaseViewModel. In the ViewModel, we declare a String that the app would display on the view.

    import 'package:stacked/stacked.dart';

    class ProfileViewModel extends BaseViewModel {
     String _pageName = 'This is the Profile Page';
     String get pageName => _pageName;
    }

In profile_view.dart, create the stateless widget which returns the ViewModelBuilder and bind it to the ProfileViewModel. This view would contain a similar setup to the HomeView; it would display a Profile View text.

    import 'package:flutter/material.dart';
    import 'package:intro_to_stacked/ui/views/profile/profile_viewmodel.dart';
    import 'package:stacked/stacked.dart';
    class ProfileView extends StatelessWidget {
     const ProfileView({Key? key}) : super(key: key);
     @override
     Widget build(BuildContext context) {
      return ViewModelBuilder<ProfileViewModel>.reactive(
       viewModelBuilder: () => ProfileViewModel(),
       builder: (context, viewModel, child) {
        return Scaffold(
         body: Center(
          child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
            Text(viewModel.pageName),
           ],
          ),
         ),
        );
       },
      );
     }
    }

The next thing is to create a folder in lib named app. Inside this folder, create a new file titled app.dart. In this file would all the code needed for routing along with the dependencies.

Create a class named AppSetup and annotate it with the StackedApp; this class houses the annotation; it does nothing else asides that. The main focus is the annotation as it takes in two parameters, routes, and dependencies.

    @StackedApp()
    class AppSetup {
     /** This class has no puporse besides housing the annotation that generates the required functionality **/
    }

Stacked offers three different types of routes which determines the mode of transition

MaterialRoute
CupertinoRoute
CustomRoute

Using the MaterialRoute, we register the Views present in the app that would use the NavigationService.

In addition to the routes, we would declare the dependencies we would be using in the app, enabling Stacked to create the locator file that would handle the injection of the declared types. We would register the NavigationService as a LazySingleton, which means it won’t be initialized until used for the first time in the app.

    import '../ui/views/home/home_view.dart';
    import '../ui/views/profile/profile_view.dart';
    import 'package:stacked/stacked_annotations.dart';
    @StackedApp(
     routes: [
      MaterialRoute(page: HomeView, initial: true),
      MaterialRoute(page: ProfileView)
     ],
     dependencies: [
      LazySingleton(classType: NavigationService),
     ],
    )
    class AppSetUp {}

As the HomeView is the first page we contact, we set the initial parameter to true.

After setting this up, run the flutter command to auto-generate the needed files for routing.

    flutter pub run build_runner build --delete-conflicting-outputs

This command would generate the files needed for navigation and dependency injection setup.

The last step in this process is to convert the main top-level function of the app into a Future and await the setupLocator function in the app.locator.dart file generated by the command used earlier.

    Future main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await setupLocator();
     runApp(MyApp());
    }

How do we use it?

To make use of the navigation in the HomeView, we create a function in the HomeViewModel that would perform the navigation. First, we declare the locator which would give us access to the Navigation Service we registered earlier.

    import 'package:intro_to_stacked/app/app.router.dart';
    import '../../../app/app.locator.dart';
    import 'package:stacked/stacked.dart';
    import 'package:stacked_services/stacked_services.dart';

    class HomeViewModel extends BaseViewModel {
     String _declaration = 'Stacked is soo cool';
     String get myDeclaration => _declaration;
     final _navigationService = locator<NavigationService>();

     void navigateToProfileView() {
      _navigationService.navigateTo(Routes.profileView);
     }
    }

The next thing is to create a button in the view and pass the function to its onPressed parameter.

     TextButton(
       onPressed: () => model.navigateToProfileView(),
       child: const Text('Go To Profile View'),
     )

Save the files and run the app; you would see the button there, click the button and see the seamless transition that we achieve using the NavigationService Stacked provides.

Services

Stacked offers several services which can be set up and used within the app. These services include

NavigationService
BottomSheetService
DialogService
SnackbarService

These services can be set up and customized to fit various use cases, and similar to the NavigationService, they can be registered and used within the app on the fly. For further information, check out the package on pub.dev and also the articles on FilledStacks.

Conclusion

Stacked Architecture is a super pack ready to be discharged and used to build clean, scalable applications on the fly. This article has explained some of the concepts and components of Stacked Architecture, and with it, we have created a sample app that uses these components. Check out FilledStack for further information on the various features that make up the Stacked Architecture.

You can find the code for the sample app here. If you have any questions, don't hesitate to reach out to me on Twitter: @Blazebrain or LinkedIn: @Blazebrain.

Cheers!