DEV Community: Stanislav Ilin

Say Goodbye to Error Chaos in Flutter with Talker 3.0

Stanislav Ilin — Mon, 05 Jun 2023 13:07:34 +0000

Today I want to tell you about the major v3.0 update of Talker and why this is the best solution to logging and error handling for your Flutter / dart project.

- Wait, you're developing it yourself, is it right? It sounds somehow too narcissistic.

- I agree, but first read the article to understand the full power of Talker 😄

What is Talker?

But firstly I want to tell you about what is Talker?
Therefore, I suggest you watch a series of articles that I wrote while creating this package

More users

This project has a lot of functionality, but I thought its problem was excessive complexity.

I saw the feedback from the community, a lot of engineers liked the package, but it seemed to me that the project could have many more users!

And I should start simplifying the project and cleaning it from the overhead logic.

Huge update

I needed around three weeks for make changes in this release pull-request

It's really a lot of time, but all this time I kept releasing versions in the dev branch

Important point for those who create their own open source library:

Always create separate releases in -dev versions to make ability for users to upgrade to the stable version and don't block the main version.

Finally result

After reviewing all issues in the project, communicating with the community and a long development, we released version 3.0.0 of the package

And now I want to share the results. But I don't want to go into deep details so as not to make you bored.

✅ Lightweight

The library code was reduced more than by 700 lines!

This is a really good result, because I was thinking of creating a lightweight solution that does not affect the performance and weight of the application build.

And it is also important that the functionality of the project has not suffered at all from this

✅ New TalkerFlutter UI/UX

After talking to the community, I realized that a separate page with filters is inconvenient within this package and that you can take the filter and search to the main page with all the logs

✅ Remove overhead logic

In the previous version, I experimented a lot. For instance, with a bridge between packages. I wanted to provide packages with the ability to communicate, without dependencies. However, I did it in not the best way.

Now, for library logs in Talker, there is an enum called WellKnownTitles. It contains all the familiar types of Talker's log system. This allowed me to get rid of a lot of code.

List of all deleted and deprecated code:

Remove deprecated in constructor and configure() method:
- LoggerFormatter? loggerFormater
- LoggerFilter? loggerFilter
- TalkerLoggerSettings? loggerSettings Now you can setup this fields only in TalkerLogger constructor
Remove deprecated methods:
- handleError Now handle() method used
- handleException Now handle() method used
- fine() log method Now you can use the handle() method to achieve the same functionality in both methods.
Add observer field instead of removed observers

✅ Fixes

Also, with the release of 3.0.0, the errors that library users wrote about in issues were fixed.

Like null error string in TalkerWrapper Snackbar's, new share_plus plugin version support, etc.

The future of the package

I really hope that the package will continue to evolve and become even more convenient in the future. I also want to finally sort out the documentation and create a website with a convenient package description.

So, if you also want to take part in the development of this package, you are more than welcome 🙌

And thank you for reading my articles, even though I began to appear here much less often 😌

GitHub: https://github.com/Frezyx/talker
Preview: https://frezyx.github.io/talker/
Pub: https://pub.dev/packages/talker

Link headers pagination in Flutter

Stanislav Ilin — Thu, 20 Apr 2023 22:17:35 +0000

Pagination is a common technique used in web development to improve the performance of APIs and user experience when dealing with large amounts of data.

What is link headers pagination ?

Link headers pagination is one of the popular pagination methods used in APIs. In this article, we will discuss link headers pagination in Dart when building an app that works with APIs.

Link headers pagination is a pagination method that is used to split a large amount of data into smaller portions that can be easily retrieved. This method uses HTTP link headers to provide information about the next and previous pages of data. In this way, clients can retrieve only the data they need, reducing the load on the server and improving performance.

How to make it in Flutter app ?

When building an app that works with APIs, link headers pagination can be implemented in Dart using the http_pagination package.

This package provides a easy headers parsing from the box.

Make an initial HTTP request to the API to retrieve the first page of data. The response should contain a Link header that includes information about the next page of data.

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

final response = await http.get('https://example.com/api/data');
final headers = response.headers;

Parse the Link header to extract the URL of the next page of data. The Link header can contain a URLs with a rel attribute set to "first", "next", "prev", "last".

This URLs can be used as links for getting next page.
But what we should do if we work with API froms our service or repository with writted method like in example bellow ?

final listData = await somethingRepository.getData(page: 2, perPage: 10);

Using http_pagination package

Install http_pagination in your pubspec.yaml file

dependencies:
  http_pagination: ^0.2.0

And add this simple code line after your api call

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

final response = await http.get('https://example.com/api/data');
final pagination = PagesPagination.fromHeaders(response.headers);

PagesPagination contains int fields [first, next, prev. last]
And you can use any of this fileds to send as current loading page in your api call.

Working with GitHub api example

import 'package:http_pagination/http_pagination.dart';

final headers = {
  'link': [
    '<https://api.github.com/user/9287/repos?page=3&per_page=100>; rel="next", ' +
    '<https://api.github.com/user/9287/repos?page=1&per_page=100>; rel="prev", ' +
    '<https://api.github.com/user/9287/repos?page=5&per_page=100>; rel="last"'
  ],
};
final pagination = PagesPagination.fromHeaders(headers);
print(pagination); // PagesPagination(first: null, next: 3, prev: 1, last: 5)

Make a new HTTP request to the URL of the next page of data. Repeat steps 2 and 3 until there are no more pages of data to retrieve.

Cursor and Pages(offset) pagination

CursorPagination is another pagination style with same logic.
Link types is only one difference for cliend side code.

Cursor typed pagination client recive links with String id of next or last content when Pages(offset) pagination recive int index of next or last pages

Cursor pagination example

import 'package:http_pagination/http_pagination.dart';

final headers = {
  'link': [
    '<http://example.com/items?cursor=a>; rel="first", ' +
    '<http://example.com/items?cursor=b>; rel="next", ' +
    '<http://example.com/items?cursor=c>; rel="prev", ' +
    '<http://example.com/items?cursor=d>; rel="last"',
  ],
};

final pagination = CursorPagination.fromHeaders(headers);
print(pagination); // CursorPagination(first: a, next: b, prev: c, last: d)

Link headers pagination is a powerful technique that can help improve the performance of your app when working with APIs that return large amounts of data. By splitting the data into smaller portions and providing information about the next and previous pages of data, clients can retrieve only the data they need, reducing the load on the server and improving performance.

Error Handling in Dart and Flutter

Stanislav Ilin — Sat, 18 Feb 2023 13:33:10 +0000

Hi everyone! I won't even tell you how important to handle all errors and exceptions in your Flutter application.
Let's start right now with the facts!

Error types in Dart

We have two basic error types in Flutter.
Error and Exception. But what's the difference?

In dart, an "error" is a runtime problem that can't be handled by the program, while an "exception" is a runtime problem that can be handled by the program.

Errors

Errors are typically caused by conditions outside the control of the program, such as hardware failure or operating system issues, and they are not expected to be handled by the program. Examples of errors in Dart include OutOfMemoryError or StackOverflowError. When an error occurs, the program will usually terminate.

Exceptions

On the other hand, exceptions are caused by conditions within the program's control, such as invalid user input or network errors. Exceptions can be caught and handled by the program using a try-catch block, allowing the program to recover from the error and continue execution. Examples of exceptions in Dart include FormatException or SocketException.

In summary, errors are problems that can't be handled by the program, while exceptions are problems that can be handled by the program. It's important to differentiate between the two when developing your Dart applications and handling runtime problems.

How to escape them?

1. Use Try-Catch Blocks

Try-catch blocks are a fundamental aspect of handling errors in any programming language, including Flutter. They allow you to handle exceptions that may occur during the execution of your code. When you use a try-catch block in your application, you can catch exceptions and handle them appropriately. For example, you may want to display an error message to the user or log the error for debugging purposes.

Here's an example of how you can use try-catch blocks in your Flutter application:

try {
  // your code here
} catch (e) {
  // handle the error here
}

2. Use assert

Assert is a tool that can be used to validate assumptions about the state of your application during development. If an assertion fails, an exception is thrown, which can help you catch and debug errors early on. You can use assert statements to check whether your code is behaving as expected and to identify errors before they become problematic.

Here's an example of how you can use assert in your Flutter application:

assert(myValue != null, 'myValue cannot be null');

3. Handle Platform-Specific Errors

If your Flutter application targets multiple platforms, handling platform-specific errors. For example, on iOS, you may need to handle errors related to permissions, while on Android, you may need to handle errors related to device compatibility. You can ensure that your application behaves consistently across different platforms by handling platform-specific errors.

Here's an example of how you can handle platform-specific errors in your Flutter application:

if (Platform.isIOS) {
  // handle iOS-specific errors here
} else if (Platform.isAndroid) {
  // handle Android-specific errors here
}

4. Use Third-Party Libraries
There are several third-party libraries available for Flutter that can help you handle errors in your application.

One popular library is Talker, which provides error tracking and monitoring for your application.

The talker library was designed for saving your time with error-handling process. The main concept of talker is to collect errors and redirect them to the right pipeline.

For example, something errors must be shown to user while others don't. You can configure this logic very simply using talker. Some errors should be reported to your tracking system, while others should not.

For such cases, in the latest update of the package, there are settings available even from the application itself

In order to spend even less your time - we have developed add-ons for some popular libraries, such as dio and BLoC. And we continue to develop this idea.

Connect with me on GitHub and pls put ✨star✨ for the talker package.
It will be very pleasant for our team ❤️

UI Framework for Flutter. What should be included in?

Stanislav Ilin — Wed, 30 Nov 2022 11:56:14 +0000

Hello everyone!
I'm tired of doing the same type of things for each of my pet projects.

And I thought about creating a UI microframework for Flutter with common and base widgets / theming and flows which are most often found in all applications.

Flutter packages infrastructure already have solutions for this issue

1) GetWidget

"GetWidget has 1000+ pre-build widgets that you can reuse to develop both Flutter mobile app and web app. Our motto is to provide the best Flutter UI library to the Flutter community to speed up their development process and build awesome apps with pre-build Flutter Library Components."

This solution is cool!
But for me, this package has overloaded functionality.

When I talk about standard functions, I don't mean creating a million types of buttons on top of the standard Flutter buttons

2) FLUI

"A powerful UI framework for Google Flutter"

For me it is an similar library to the previous one.
The components look very ordinary. And it won't speed up development time for me.

3) flutter_neumorphic

"A complete, ready to use, Neumorphic ui kit for Flutter"

A wonderful package that I have used a few times. But that's not what I need either. This package is useful when you need to make a neumorphic UI.

Result

As a result, I can either:

Make up the functionality I need from scratch.
⚠️ For a very long time for a pet project
Or take it from different packages.
⚠️ What does it mean to expand the list of dependencies of your application to exorbitant sizes

What do I want?

I will definitely create such a framework for my own purposes.
But before that I want to hear your opinion

What do you expect from such a solution in general and what would be a reason to use it?
What kind of flows would you like to see in this framework?
(Authorization, Menu, Products Cart, ...)
What widgets would you like to see in this framework ?
(Buttons, TextForms, Modals, ...)

I am waiting for your opinion to discuss in the comments !
Thanks a lot for your reactions ❤️

Filtering application logs

Stanislav Ilin — Mon, 14 Nov 2022 15:01:16 +0000

🚀 New talker feature in 2.1.0 release is filtering logs, exceptions and errors. Now I want to tell you how it works.

There can be a lot of logs in a large application. Working with network via http, local storage, controllers, exceptions, errors, verbose info, etc.

👀 Sometimes it becomes difficult to track something very important. And at this moment, the talker update is rushing to your aid.

⚙️ Filtering data with Talker

Let's imagine that there are a lot of logs in your application

But our interest is to see only navigation logs.
How we can make it?

Add filter to your Talker constructor, or set it by configure() method

  final talker = Talker(
    filter: BaseTalkerFilter(
      types: [TalkerRouteLog],
    ),
  );

  final talker = Talker();
  talker.configure(
    filter: BaseTalkerFilter(
      types: [TalkerRouteLog],
    ),
  );

types: - log types driven by Talker package or your custom logs that you create. How I can make custom log?

Result:

But, how can I make it if I do not know what type of log is it?
Talker can do it 🙂 Use titles: filed of filter

  final talker = Talker(
    filter: BaseTalkerFilter(
      titles: ['ROUTE'],
    ),
  );

Result will be same as of types: [TalkerRouteLog]

Thank you for reading post!
💻 Article example source code here

Show some ❤️ and put a star on the GitHub to support the project! We are trying to make the best logs and errors manager for Flutter applications.

I create LinkedIn account 😄

Stanislav Ilin — Mon, 31 Oct 2022 11:35:53 +0000

For the past 5 years I have been ignoring the existence of Linkedin. And so I realized that it was time to register there and study it.

❤️I will be glad to welcome you into the friends on
https://www.linkedin.com/in/frezyx/

Http logs in Flutter app with talker is easy as possible

Stanislav Ilin — Thu, 13 Oct 2022 20:08:17 +0000

A major update of the talker package has recently been released.
New release contains updated TalkerScreen with more actions and logs file sharing, fixed logs generation and etc.

😳 But another one big thing in update is talker_dio_logger package that can integrate http logs as simple as it can ever be done.

Let's take it in turns.

How it will works

talker_dio_logger is a separate package that works on the basis of talker error handler and logger package and dio most popular and powerful dart http client.

When you connect it, all information about your work on the network gets into talker's history and the console of the running application.

Get Started

Follow these steps to run talker_dio_logger in your project and see all http logs

Add dependency

dependencies:
  talker_dio_logger: ^0.1.3

Usage

Just add TalkerDioLogger to your dio instance and it will work

final dio = Dio();
dio.interceptors.add(
    TalkerDioLogger(
        settings: const TalkerDioLoggerSettings(
          printRequestHeaders: true,
          printResponseHeaders: true,
        ),
    ),
);

Using with Talker

You can add your talker instance for TalkerDioLogger if your app already uses Talker.

In this case, all logs and errors will fall into your unified talker tracking system

final talker = Talker();
final dio = Dio();
dio.interceptors.add(
    TalkerDioLogger(
        talker: talker,
        settings: const TalkerDioLoggerSettings(
          printRequestHeaders: true,
          printResponseHeaders: true,
        ),
    ),
);

😎 Go to the GitHub repository page!
🥵 Here you can see beautiful examples of usage and code snippets.

Show some ❤️ and star the repo to support the project!

Flutter database inspector storage_view

Stanislav Ilin — Mon, 12 Sep 2022 18:57:49 +0000

About package

Flutter inspector tool for any database, storage and shared_preferences.
Check and modify database values from UI of application.

It's fast introduction of storage_view package.

Motivation

Create one tool to inspect and interact with any database is the main thing of package.

Getting started

Add dependency

dependencies:
  storage_view: ^0.1.0-dev.1

Add import package

import 'package:storage_view/storage_view.dart';

Implement driver

The package uses a driver StorageDriver to interact with the database.

In order to connect your database you should use one of available drivers:

shared_preferences_storage_view_driver that works with shared_preferences See example for more information
flutter_secure_storage_view_driver that works with flutter_secure_storage See example for more information

Or create your own StorageDriver implementation like there:

class MockStorageDriver implements StorageDriver {
  final _data = <String, dynamic>{
    'test_id' : 'test',
  };

  @override
  FutureOr<Set<String>> getKeys<String>() {
    return _data.keys.toSet() as Set<String>;
  }

  @override
  FutureOr<T?> read<T>(String key) {
    return _data[key] as T;
  }

  @override
  FutureOr<void> write<T>({required String key, required T value}) {
    _data[key] = value;
  }

  @override
  FutureOr<void> delete(String key) {
    _data.remove(key);
  }
}

Additional information

The project is under development and ready for your pull-requests and issues.
Thank you for support!

⛔️ It is very important to get feedback about the project. Therefore, write your opinion in the comments. Will you use this in the future ?

😎 Go to the GitHub repository page!
Show some ❤️ and star the repo to support the project!

Colourful logs in Flutter application with Talker

Stanislav Ilin — Mon, 05 Sep 2022 20:23:25 +0000

Hello everyone 👋
This is a long-awaited continuation of the series of articles about the Talker library 😅

In this post I will tell you how to customize colors and text of your logs using this library.

Let's do this 🚀

Base logs

1) Create application or open an existed
You can create dart console or flutter application.
Talker is based only on dart without flutter sdk dependency therefore you can use this package everywhere 🙂

For example I create default dart console application

2) Add talker dependency in pubspec.yaml

dependencies:
  talker: ^1.3.0

3) Init talker in main file of application and make simple logs in main method

import 'package:talker/talker.dart';

final talker = Talker();

void main() {
  talker.error('It looks like this button is not working');
  talker.info('The food for lunch has already arrived');
  talker.warning('Something bad has happened, but the app is still working');
}

With this code, the output will be as shown below

It already looks good.
Talker can display 8 types of logs by default.

But that may not be enough 🧐
Good, talker have solution for this cases too 🥳

Custom logs

For example our application can work with server side backend code via http-requests. And we need to show http logs with different color to highlight them in the total list of messages.

1) For make custom http logs talker have TalkerLog class that you can extends with your realization.

class HttpLog extends TalkerLog {
  HttpLog(super.message);
}

2) OK, but how to highlight this log with a specific color?
You can override pen field of your TalkerLog heir class.

class HttpLog extends TalkerLog {
  HttpLog(super.message);

  @override
  AnsiPen? get pen => AnsiPen()..cyan();
}

3) And in main function call talker.logTyped() method

void main() {
  talker.logTyped(HttpLog('Http response 200'));
}

class HttpLog extends TalkerLog {
  HttpLog(super.message);

  @override
  AnsiPen? get pen => AnsiPen()..cyan();
}

This code will show message like example bellow

4) More customization! ⚙️
Like simple example we can override title field and generateTextMessage method

title - Default message title. That used for console output and messages filtering.
generateTextMessage() - this method creates log messages before you see it in output console. With this method you can format your messages as you want.

Let's see in example

void main() {
  talker.logTyped(
    HttpLog(
      'User id is loaded',
      data: {'userId': 1234},
    ),
  );
}

class HttpLog extends TalkerLog {
  HttpLog(
    String message, {
    this.data,
  }) : super(message);

  final dynamic data;

  @override
  AnsiPen get pen => AnsiPen()..cyan();

  @override
  String get title => 'HTTP';

  @override
  String generateTextMessage() {
    var msg = '[$displayTitle] $message';

    if (data != null) {
      final prettyData = encoder.convert(data);
      msg += '\nDATA:$prettyData';
    }
    return msg;
  }
}

This code will show message like example bellow

With talker you can customize a lot of other things. The article format is not enough for the entire description. If you are interested, you can look at the detailed examples in the project repository.

❤️ Thank you for reading post
💻 Article example source code here

Show some ❤️ and put a star on the GitHub to support the project!

How to handle dart application exceptions ?

Stanislav Ilin — Tue, 30 Aug 2022 13:59:39 +0000

Talker - package to handle dart application exceptions.

🚀 The main goal of the project provide ability to understand where the error occurs in a short time
✅ Can work with different state managements
✅ Can work with any crash reporting tool (Firebase Crashlytics, Sentry, Your own, etc)
✅ Flutter app logs UI output at screen
✅ Integrated logs and exceptions history
✅ Showing UI exception alerts

Easy to use

You can use Talker instance everywhere in your app
Simple and concise syntax will help you with this

final talker = Talker();
// Handle exceptions and errors
try {
  // your code...
} on Exception catch (e, st) {
    talker.handle(e, st, 'Exception with');
}

// Log your app info
talker.info('App is started');
talker.critical('❌ Houston, we have a problem!');
talker.error('🚨 The service is not available');

More examples you can get here

Customization

Talker package has a lot of customizations like:
✅ Custom logs with any color and message
✅ Logs history (contains all application info)
✅ Custom Filters, Formatters, outputs
✅ Observers for making custom logic
✅ Data stream to handle logs in any point of code

I am launching a series of articles about this technology.
In each new article I will talk about a certain feature of this approach to error handling in the Flutter/dart application

😎 Go to the GitHub repository page!
🥵 Here you can see beautiful examples of usage and code snippets.

Show some ❤️ and star the repo to support the project!

Flutter multiplatform navigation sidebar / drawer widget

Stanislav Ilin — Wed, 10 Aug 2022 11:37:00 +0000

SidebarX - package to create beautiful and convenient sidebar navigation widgets easy 🔥

Mobile	Desktop	Web

The package is designed with maximum adaptation to large screens.
Therefore, adding a widget to your screen will be very simple.

Scaffold(
  body: Row(
    children: [
      SidebarX(
        controller: SidebarXController(selectedIndex: 0),
        items: const [
          SidebarXItem(icon: Icons.home, label: 'Home'),
          SidebarXItem(icon: Icons.search, label: 'Search'),
        ],
      ),
      // Your app screen body
    ],
  ),
)

Customization

Package have huge customization fields list and by default can adjust to the theme of your application.

For example - you can change colors, textStyles, add your custom builders for sidebar items and all what you need.

😎 Go to the GitHub repository page!
🥵 Here you can see beautiful examples of usage and code snippets.

Show some ❤️ and star the repo to support the project!

Non-standard Flutter custom bottom navigation bar

Stanislav Ilin — Mon, 08 Aug 2022 12:09:11 +0000

Are you tired of the usual navigation solutions in Flutter apps?
I have something to show you 😎

Bottom bar with sheet

💥Non-standard way to use more space of screens in your application💥
😳Custom bottom Sheet under Bottom Navigation Bar😳
😩Sounds sucks? 😉 First of all look at screens!

In the near past, a new version of the package 2.4.0 was released.

😳Custom bottom Sheet under Bottom Navigation Bar😳
😩Sounds sucks? 😉First of all look at screens in repository!

Show some ❤️ and star the repo to support the project!