Overview:
I'll discuss how to use Flutter Tags and Improve your App's User Experience. This Library is very popular among all Flutter Developers. And newly released Flutter applications are using this Feature. Because this Tag function is a very amazing library which gives an attractive look to your Flutter Applications. This Library is designed by Rodrigobastos.dev. So credit goes to this Owner.
How to Install Tag Widget Library For Flutter Apps:
Open your project in your Awesome IDE. Than Open the Pub Spec File Pub Spec file is located in Project Files section. In pub spec file find the dependency section and add this Library current version of this Library is 2.0.0+2 may be it will change in future. So I'll recommend you to use the latest version.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
tag: ^2.0.0+2 #Tag Dependency
Write a Code to Use this Tag Widget:
Dependency is now setup successfully now time to write code in our project and check this is is it working or not? First of all you need to import the tag dependency. So import this dependency using these lines of code.
import 'package:tag/tag.dart';
This line will import the Tag Dependency functionalities in your current file. After importing this make a State full widget and do some basics setting to provide good look. I write this basic code first.
import 'package:flutter/material.dart';
import 'package:tag/tag.dart';
class TagsRoom extends StatefulWidget {
const TagsRoom({super.key});
@override
State<TagsRoom> createState()
=> _TagsRoomState();
}
class _TagsRoomState extends State<TagsRoom> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: // Write
),
);
}
}
Now inside Center Child Add the Tag Widget Code. Once you write the Tag widget code than your Flutter Application will start showing Tag in your Applications. Here is the Code of the Tag Widget Code. This code is provided by Rodrigobastos.dev. If you want to know more about this library than visit the Profile of Rodriabastos on pub.dev site.
Tag(
rightPadding: 12,
child: CircleAvatar(
backgroundImage: NetworkImage(
'Img/url'),
),
text: 'Lewis Hamilton',
textStyle: TextStyle(
color: Colors.white,
),
color: Colors.red,
labelDecoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(4),
bottomRight: Radius.circular(4),
topLeft: Radius.circular(4),
),
),
),
Explanation about this Code:
First of all you have to write Widget name Tag and child is required by this widget child will shown before tag. And than provide the text So this text will be shown inside the Tag view. Customize the text using Text-Style. Now give the color to your created Tag. In the image section add the URL of image that you want to show before this Flutter Tag Widget. Now save the App and Check the Results.
If you want to customize the Tag border's than use the label Decoration. and Inside this use Box Decoration and than Box Decoration will allow you to customize this Widget Border's. So Call the left, right, borders and set the radius.
Use of Tag Widget in Flutter Applications:
You can use Widget in your Application for different purposes. By the way it totally depends on you. But I'll mentioned some great ideas about usage of this Widget than if you adore these ideas than definitely use this Tag Widget Accordingly.
- Use Flutter Tag Widget in Chatting Applications.
- Chat Bot Applications.
- Use this Flutter Tag Widget to Create Comment Section.
- Organize the Information using this Tag Widget.
- Use in News Applications.
- Use in Shopping Applications.
- Best Use of this Widget is in Ecommerce Apps.
- Provide Different colors to Tag and use it in Alarm App.
Conclusion:
This widget is very useful for every flutter developer. You have a great chance to improve your App user experience with this Widget. Build Effective UI designs by using this Tag Widget. There a lot of ways in flutter to create Tag but as per my knowledge this one is the easiest way to make Tags in Flutter.
0 Comments