Create efficient Flutter-specific buttons

I’m here again with a more effective solution after a long time. Our topic today is “How can I do a special component of a business that is similar to mine?”

Photo by Ravi Palwe on Unsplash

There are three main ideas behind this article:

• How is the use of adapter patterns similar to the use of social logic features?
• Exception management: how to make the first code?
• A pattern-based Atomic widget design is the last step.

So let’s carry out these steps. We must first understand what our clients want from us before we can begin.

Made from my hand :)

The client wants to use Apple, Google, Apple and other social button implementations. This token will be sent to my backend whenever a user completes it successfully. When all operations have been completed, we will reroute the user to the login screen.

The business is ready, and we know what we do. We need to implement the coding side of this request.

I am aware that each provider requires that we perform the identical protocol. The provider will perform basic authentication and return a token response. The button model is also necessary, and I may only define my button properties once for this project.

We first require an adapter in order to use our buttons:

abstract class SocialAdapter {
  Future<String?> make();
  SocialAdapterModel get model;
}

The method is understandable. Its only mission is to bridge to another provider. When the operation is finished, a response will be returned. We have given a model so that we can use it for design.

class SocialAdapterModel {
  SocialAdapterModel({
    required this.title,
    required this.color,
    required this.icon,
  });

  final String title;
  final Color color;
  final IconData icon;
}

And our architecture is ready. First, I’m going to create an adapter for providers.

Because I didn’t want to waste my time on authentication implementation, I didn’t do it on purpose. If you want to learn this auth. processes, you can look flutter the Flutter Fire website.

My adapters are ready. Now it’s time to define the features. I prefer to use the factory method for my buttons, and I can manage it all in one place.

Finally, the structure is complete. The next step is to create a generic button widget for this page.

As you can see, it’s a really simple widget. Only generic “T” types created from SocialAdapters are used by this. I called the make function to return a response after drawing the widget as it appeared in the class.

from my channel video

As a final step, you call SocialButton with the adapter, and it will do everything automatically for you. Your token will be generated by the provider. Consider this article as an example.

**Exception Management

Let’s consider what happens when a user reports a problem to the provider. Probably you are thinking, “I can add a try-catch scope for handling this." Yes, it’s true, but if you add try/catch for every operation, this will create more complexity for exception management.

For a functionality like this, you could create a simple yet universal exception management.

It will look like this if you wish to add this handler to our logic:

final response2 = await GlobalException.make<String>(adapter.make);
if (response2 == null || response2.isEmpty) {
  // push to login view
  return;
}

onCompleted.call(response2);

It seems like a reasonable place to begin with exception management.

Thanks for reading!

I’d like to tell you my great news. I launched a new HWA World channel. I made an effort to use English when making videos for the world.

(You may see the Turkish version on YouTube)

Full source code (lib/usecase/social):

GitHub - VB10/use_case_flutter