DEV Community: Mutwoki Dennis Mureti

Simplifying state management in flutter with Bloc.

Mutwoki Dennis Mureti — Sun, 14 Apr 2024 15:49:34 +0000

Mobile app development is a dynamic world with a lot of interesting tools, techniques and solutions, one of these is state management. How you manage the state of your application can effectively make or break your use experience. To simply understand state management will mean something like changing the widget state within your application once a certain action has been performed. Take for example when data has been posted and should be displayed within the screen of your flutter application without necessarily reloading the application itself, then the developer should understand how to manage this and thus comes in state management. Flutter over the years has emerged as a powerful platform to build attractive cross platform applications. State management is crucial especially placing in mind that any application will over time grow in its complexity.

Flutter offers various state management solutions, with each solution having its strengths and different use cases under which they can be used. Among these solutions is Bloc (Business Logic Component). Since the emergence of bloc as a state management tool, it has managed to gain significant popularity as a result of its simplicity, scalability and predictability. The beauty of Bloc is its ability to separate business logic from the UI itself thus making your codebase more testable, intuitive and maintainable. While selecting a state management solution to use, it is good to remember that there is no one perfect solution. Choose a solution that works best for your team and your project. Bloc patterns in flutter will evolve around three core concepts : events, states and streams. An event will be triggered by the UI i.e. button press.

We can create a Stream in Dart by writing an async* (async generator) function.

Stream<int> countStream(int max) async* { for (int i = 0; i < max; i++) { yield i; } }

Understanding Bloc state management

Events: These are inputs to the Bloc, representing user interactions or any other trigger that leads to a change in the application state.
States: A state will represent the different snapshots of your application’s UI based on the current state of the data. Each change of state triggers a UI update, thus ensuring that your application remains responsive and reactive.
Bloc: This is responsible for processing incoming events, updating the state accordingly, and emits the new state to update the UI. This is where the business logic of the application resides.

Advantages of Bloc state management
Separation of concerns
This will involve isolating business logic from UI components, Bloc promotes a clean and clear codebase. With this separation there is guaranteed code readability, facilitated testing and enables easier collaboration among the team members.

Predictable state management
With clear event-to-state mappings, you can easily reason about how state changes occur in response to user interactions or other triggers. For the developer this predictability simplifies debugging and troubleshooting, leading to faster development cycles.

Reusability and scalability
This is achieved by encapsulating business login in reusable components. As your application grows, you can compose multiple Blocs to handle different aspects of your app's state independently. This modular approach fosters maintainability and allows for easy integration of new features or updates without introducing unexpected side effects.

Implement Bloc State Management in Flutter
His easy simple step will help you implement Bloc state management in flutter:

Define Events: This will involve identifying the different user interactions or triggers that will lead to a change in your application state and define corresponding event classes.
Define state: This is dependent on the data that drives your UI where you now define the various states of your application. Each state should encapsulate the data required to render the corresponding UI representation.
Create Bloc: Implement a Bloc class that extends Fluter’s ‘Bloc’ class from the ‘flutter_bloc’ package. This class will now help you handle incoming events, update the state accordingly, and emit the new state to notify the UI.
Handle Events: To process incoming events and update the state accordingly, you now have to implement event handlers within your Bloc class. You may use methods like ‘mapEventToState’ to define the logic for Transitioning between states based on the events that are received.
Integration with UI: You will now integrate the Bloc with the Flutter UI using widgets provided by the ‘flutter_bloc’ package, such as ‘BlocBuilder’ or ‘BlocProvider’. These widgets subscribe to the Bloc’s state updates and automatically rebuild the UI in response to the state change.

Using a Bloc
I hope you now get the basic concepts in Bloc State Management. We will now create an instance of a CounterBloc and put it in use as our example.

Basic Usage
Future<void> main() async { final bloc = CounterBloc(); print(bloc.state); // 0 bloc.add(CounterIncrementPressed()); await Future.delayed(Duration.zero); print(bloc.state); // 1 await bloc.close(); }

From above, you ca see that we created a CounterBloc object. Next, since no additional states have yet to be emitted, we print the Bloc's initial state, which is its present state. The CounterIncrementPressed event is then added to cause a state change. Lastly, we call close on the Bloc to end the internal state stream and publish the Bloc's state once more, which changed from 0 to 1. Finally, we call close on the Bloc to close the internal state stream.

Stream Usage
Remember that a Bloc is a special type of steam, which means we can also subscribe to a Bloc for real-time updates to its state.

Future<void> main() async { final bloc = CounterBloc(); final subscription = bloc.stream.listen(print); // 1 bloc.add(CounterIncrementPressed()); await Future.delayed(Duration.zero); await subscription.cancel(); await bloc.close(); }

We are calling print on each state change and subscribing to the CounterBloc in the sample above. Next, we add the CounterIncrementPressed event, which causes a new state to be emitted and activates the on EventHandler. Finally, when we decide we no longer wish to get updates, we will close the Bloc and phone to cancel the subscription.

Conclusion
Bloc state management provides a strong way to handle state in Flutter apps, encouraging predictability, scalability, and concern separation. Flutter developers may create reactive, scalable, and maintainable apps that offer a consistent user experience on all platforms by implementing the Bloc pattern.

It does not matter whether you are building a small-scale application or a large-scale enterprise solution, mastering Bloc state management can greatly simplify your development process and empower you to build high-quality Flutter apps with confidence. So why not give Bloc a try in your next Flutter project and experience the benefits firsthand?

Enjoy your coding, and may your Flutter journey be as smooth as a well-crafted Bloc.

Exploring the Power of Shared Preferences in Flutter Development.

Mutwoki Dennis Mureti — Wed, 15 Nov 2023 20:12:55 +0000

In this growing technology space of mobile application development, the aim of a developer while developing for mobile applications is efficiency and improved user experience and this can be achieved through a tool known as shared preferences. Shared preferences allow for storage and retrieval of data as key value pairs. We will walk through shared preferences and how it has helped change the game in mobile application development.

What is shared preferences
One of the most interesting data storage options for Android users is shared preferences. Shared preferences is a way developers can store and retrieve date as key/value pairs to a file within the device used to store these data such as String, int, float, Boolean which makes up your preferences in an XML file inside the app on the device storage. Think of shared preferences as a dictionary or key/value pairs. Take an instance where you have a key as “username” and for its value you store the user’s username.

In flutter to get started with shared preferences we use the “shared preferences” package.

**Getting Started

Adding Dependency** To use shared preferences in any of your flutter project you need to add the “shared preferences”package in your “pubspec.yaml” file.

dependencies: shared_preferences: ^2.0.0

Then run "flutter pub get" for your application to fetch the package.

2. Initialization
This is done by obtaining a instance of “SharedPreferences” using the “getInstance()” method.

import 'package:shared_preferences/shared_preferences.dart'; SharedPrefereences preferences = await SharedPreferences.getInstance();

**Storing and Retrieving data:

Storing Data** To store data in flutter with shared preferences, we get to use the “set” methods. The example below gives an instance of how to Store a string, integer, Boolean and a list of String to item keys.

// String await preferences.setString(‘username’, ‘flutterFan’); // integer await preferences.setInt(‘username’, 20); // Boolean await preferences.setBool(‘username’, false); // list of String to item keys await preferences.setString(‘username, <String>[‘john’, ‘doe’]);

2. Retrieving Data
You guessed it right. To retrieve data we use the "get" methods. In a case where the requested keys are not found then we provide default values.

String username = preferences.getString(‘username’) ?? ‘DefaultUser’;

**Use Cases in flutter

User Preferences** Shared preferences is exceptional in managing user preferences. Shared preferences provides a convenient solution in managing user preferences, whether it’s for storing theme preferences or language settings.

2. Authentication State
We can effortlessly use shared preferences with persisting authentication state, such as tokens and user credentials.

**Best Practices

Asynchronous operations** Remember that shared preferences are asynchronous so one should always remember to use “await” when fetching or modifying data.

2. Limitations
Shared preferences is suitable for using with small amounts of data. In the case of large data datasets one may consider using other storage solutions such as SQLite databases.

Conclusion
As flutter continues to gain popularity for its expressive User Interface and reactive framework, harnessing and exploring the power of tools like shared preferences becomes an invaluable skill to any developer that puts it into practice. State management in flutter in now easy for you as a developer and to also improve or enhance user experiences.

Happy Coding!!

Navigating Your Flutter Project’s Health with ‘Flutter Doctor’

Mutwoki Dennis Mureti — Sun, 15 Oct 2023 16:39:17 +0000

Flutter development environment can often at times be difficult to set up. As a mobile application developer, making sure that your development environment is optimal and ready is very crucial. Moving along alone will at times be scary and tiresome. Flutter introduced a tool that can help developers setup their environment. Flutter doctor is used as a computer diagnosis tool to ensure that the developer has installed flutter in the right way.

What is flutter doctor?
Flutter Doctor is a command line tool used for many purposes and scenarios; system and dependency configuration, development environment examination and provision of comprehensive health report. With flutter doctor, one is able to check and assess issues in flutter before they escalate. Flutter doctor will provide you with a comprehensive health report.

Why use flutter doctor?
1.Dependency management – Every flutter project you get to work on relies on a huge number of dependencies. This means that making sure that these dependencies are up to date, properly installed, and compatible with existing project is very crucial especially with flutter updates that happens more than often. With ‘flutter doctor’, one is able to identify mitigate discrepancies and conflict that may occur for smooth commencement with the project.

2.Missing Dependencies – while running a flutter project you may at times forget to install certain dependencies or libraries required to run the project. On running ‘flutter doctor’ on your IDE you are able to identify, handle and resolve the issue. It explains the steps that you may need to take in order to solve the ongoing issue.

3.Platform Setups– being a cross platform development language, flutter supports different platforms including IOS and Android. Setting up these platforms may prove difficult especially for new developers getting into flutter. ‘flutter doctor’ does not only highlight the issues with the setup but also offers clear guidance on how to resolve them for smooth cross platform development. As flutter keeps on updating it is also very crucial to always keep checking on the state of the project as often as possible.

4.Version Control – This is crucial for management of flutter SDK versions. Different flutter project may work on different flutter versions. Version control assists in making sure that the project runs on the most stable version. A mismatch between flutter files and flutter SDK may lead to issues during collaboration and deployment. On running ‘flutter doctor’ it alerts you as a developer of any inconsistencies within your project and guides you accordingly on how to align the project.

5.Environmental checks – on running ‘flutter doctor’ for this functionality, a developer is able to view a detailed report of the flutter installation in the device, address issues raised and upgrade flutter installation when need arises. It also assists in checking whether android studio has installed and ensuring that the emulator is operational. This helps minimize disruptions during development.

Running flutter doctor on Mac Terminal
In mac, run ‘flutter doctor’ within the inbuilt terminal application. You can access the terminal by:
• Opening Spotlight Search by pressing command and space buttons.
• You can the search the Terminal and press the Return key.

Once the Terminal is open, you may now type the following command and hit enter:
Flutter doctor -v

The output should now be visible in the Terminal.

Running flutter doctor in windows command prompt.
You can open the command prompt by:
• Clicking the windows and ‘R’ button at the same time.
• Typing CMD and pressing Enter.
One the command prompt is open, we can type the following and hit enter:
flutter doctor -v

Flutter doctor will then display its output in the prompt window.

Running ‘flutter doctor’
Running flutter command to diagnose your project is simple and simple done by running the command in your terminal:
Flutter doctor

This will perform a series of checks like checking your flutter installation, verifying required components and examining dependencies required for your projects.

It is clear that tech is always evolving ad will always have something different each and every day. As a developer one should always be in touch with existing technologies and trends that may also assist in making your work easier. It is also important to make yourself and your work more efficient and paramount. Flutter doctor will empower you as a developer and increase your productivity making you more proactive. By incorporating “flutter doctor” in your development journey and projects, it will not only help in detecting bugs, but will also help create and robust and highly productive environment while fostering innovation. Next time you embark on your flutter project remember to diagnose first with “flutter doctor” to monitor your projects health and state.

Happy Coding!!

Flutter Kickstart: Embarking on Your Epic Journey into Mobile App Development

Mutwoki Dennis Mureti — Sun, 15 Oct 2023 16:11:47 +0000

Developed and backed by Google, Flutter is an open source framework used in building attractive native applications. Flutter mobile APK is easier to learn and understand. In this world of fast paced individuals, many developers are always looking for ways to deliver appealing and functional applications. Flutter was developed by google and was introduced in may 2017.
This article answers how one looking to learn flutter can get started. It covers on what. could be the basics for any developer learning flutter.
In this ever-evolving landscape of mobile application development, staying ahead of the curve is very essentials for success within the tech industry. This article will help set journey of cross platform application development with flutter.

Install Flutter

The initial step towards learning flutter is by installing the flutter SDK. Flitter is easily compatible with existing operating systems, that is Windows, MacOS and Linux operating systems. You can get to download the flutter APK from here depending on your operating system guide which can also be accessed from here. Flutter also comes with a command line tool known as “flutter” that helps a developer create and manage projects.

Setting up your integrated Development Environment
Integrated Development Environment (IDE) are crucial for any developer that wants. To enhance their development experience. We are going to cover the two most popular. IDEs for mobile application development.
-Android studio – This is the most. Commonly used IDE for android development. For Flutter android studio offers comprehensive flutter support through plugins. It provides a customizable user-friendly interface, live rendering and streamlined development workflows. You can download android studio from here.

-Visual studio code – (VSCode) This is a lightweight cross platform code editor used by many. If not all developers. Starting off in visual studio will involve installation of the flutter and dart extensions for flutter development with ease. You can down Visual Studio Code from here.

Making sure your environment is set for Development
This can be assessed by running the following command

flutter doctor

This is a flutter command used to check your device to analyze whether you have met all requirements necessary to start development in flutter. Later on we shall explore more about flutter doctor. On running this command, you should get the following response.

This shows that. All requirements have been met and you are now ready to start development. In the case you have skipped a step, you will see it in the response as well.

Creating your first flutter project
On installing and setting up your development environment, it is now time to start creating your first flutter project. Using the command line tool/terminal, run the following. Command in your preferred directory.

flutter Create my_fisrt_flutter_app

You replace “my_fisrt_flutter_app” with your preferred project name. Using this command creates your flutter project with the default structure also depending on the flutter version installed in your device.

Understanding Flutter Project Structure
Before proceeding directly into development, it is crucial to understand the structure of a flutter project.
-Lib: This is the directory that contains the main dart code. As a flutter developer most of your code will be contained in this directory.

-Assets: Your application will most certainly contain images, fonts e.t.c. You will use the Assets Directory to place your images, fonts e.t.c to make them accessible through your application.

-Pubspec.yaml: You will use this to declare all your third-party packages. It is also used to hold all metadata/dependencies for your project.

Explore the flutter Code
In your IDE navigate to the “main.dart” located inside the lib directory. This file will always be used as the main entry point to any of your flutter projects. It contains the “myApp” widget which serves as the road to your application.
Widgets are building blocks to any flutter application. They represent various parts of the user interface and are reusable. To start with, you can experiment with the code and observe changes on the app’s UI by changing the widget tree.

Running your Flutter Application
First, you need to connect your android or IOS device to your computer. You can also start your emulator and run the following command.

flutter run

Flutter then compiles your code and installs the application into your connected device or launches it to your emulator depending on the one you are using.

Learning Resources
-Flutter Documentation – You can access this from the official flutter website that offers comprehensive documentation. You can access this from https://docs.flutter.dev/.
-Flutter YouTube Chanel – Here you get. Access to tutorials, updates and live coding sessions.
-Flutter Community – Engage and be active in flutter forums, communities and social media pages to learn more.

Well done on now starting your journey with flutter. This will be filled with endless possibilities as you discover the joy of building beautiful, attractive and performant cross platform applications. Always have your best foot forward and practice, curiosity and community engagement as the keys to mastering flutter.
Happy Coding!