Generic Type Widget in Flutter

In this Article, we are going to create a Generic Type widget In Flutter. We will use the Toggle Button widget to create a Widget in Flutter.

Let’s talk about First of all What is Generic Type in Flutter/Dart?. Then we’ll gonna use the generic type to create a Generic Type Widget in Flutter.

Before we start the blog If you’re looking for a Flutter app development company, we are the perfect choice.

Flutter code uses Dart generics all over the place to ensure object types are what we expect them to be. Simply put, generics are a way to code a class or function so that it works with a range of data types instead of just one while remaining type-safe. The type the code will work with is specified by the caller, and in this way, type safety is maintained. You could write code to explicitly work with Dart’s dynamic type and that would be generic, but not safe

Generics are utilized to apply more grounded type checks at the compile time. They implement type-safety in code. For instance, in collections, the type-safety is authorized by holding a similar kind of information. Generics help composes reusable classes, methods/functions for various information types.

Generics with Collections:

You can declare collection variables without generics like this:

That code is equivalent to the following:

This should only be done when you really need a collection containing many different types. If you know the intended type of a list’s elements, you should specify that type within the angle brackets, which will allow the Dart analyzer to help you avoid errors. Similarly, if you intend for a map to contain keys and values of a particular type, include them in the declaration:

Generics In Flutter

The most common places you’ll make direct use of generics in Flutter are in collections and stateful widgets. This example shows both:

Stateful widgets have both a StatefulWidget class and an accompanying State class. The State class uses generics to make sure it deals only with the StatefulWidget it belongs to, using the syntax State<MyWidget>. A State instance is generic, written to work with any StatefulWidget, and in this case we’re creating a state specifically for our MyWidget class. If you were to leave off the angle brackets and the MyWidget symbol, the analyzer wouldn’t complain, but you would have created a State tied to the default dynamic type. Not only is this not type safe, but it could create problems for the framework as it tries to match state instances to the correct widgets.

The List literal passed to children for the Row widget is similarly typed, this time as a list of Widget objects: <Widget>[]. This designation helps Dart catch problems at design time. If you try to place a non-widget into that collection, you will get warnings. A Row doesn’t know what to do with objects that aren’t widgets, so catching this kind of problem before your code runs is very useful. The generics also serve to create code that is more self-documenting, making it clear what’s expected within the collection.

Now, we’ll work on how to use Generic Type Widget in Flutter.

Create a Widget with the name of SingleOptionPicker.dart:

Let’s understand how things will work in this SingleOptionPicker Widget.

T represents Typedef in Flutter/Dart and SelectableOption is an abstract class that is containing color properties for color use. It means T should have to be only SelectableOption Class.

OptionsPicker is also uses the T for typedef and options is used for containg data and setSingleOptions Function to chnage the button selection.

Now look into the Type Class uses for Color and Sizes.

Product Sizes class extends the SelectableOption class, As you can see for sizes we’ve provided the one transparent color and only passes the name key in constructer. Because we only need to use the text for sizes.

ProductColor Class is also extended to the SelectableOption. But in this case, we required both color and name. So we passed the name and color in constructer with the required keyword.

Now Focus on the HomePageWidget were we’ve used the Our generic type widget.

We’ve created the Map type sizes object to use diffrent sizes. For color selection widget we’ve passed the key and color value in ProductColor class which uses as a Key in Options and int value 5,9,10 are values. Keep it simple in mind as:

SetSizes and SetColor function are also uses the typedef becuase we’ve created the function to be as typedef.

Now, lets move on to the main function.

we had only removed the unnecessary comment and code.

Now run the app and you’ll see the magic.

Now, Lets come to the point.

Why do we need to use the generic type widget while we can create two different widgets.

If you noticed we’ve used the minimal line of code to create widgets for two different things. As flutter developers, we should always try to code minimal and efficient.

That’s all for this Article 🎊 .

Conclusion

Generic Type Widget in Flutter in this blog we’ve learned how we can create a widget as generic type in a flutter.

If you want to learn more about the generic type widget in flutter then visit this video: https://www.youtube.com/watch?v=Ikg7vHJoZjA

You can read more blogs from Mobikul on this website: https://mobikul.com/blog/