Description:

tag

Introduction #
Tag is a widget that simplify the process of creating a tag for any given widget. Just pass the string of the tag and Tag widget will position the tag above the desired widget.
Basic Usage #
The most simple usage is just wrap the widget that you want to be tagged in a Tag widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Tag(
child: Container(
color: Colors.red,
height: 200,
width: 200,
),
text: 'A red container',
textStyle: TextStyle(
color: Colors.white,
),
color: Color(0xFFFF2D92),
labelDecoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(4),
bottomRight: Radius.circular(4),
topLeft: Radius.circular(4),
),
),
),
),
),
);
}
}
copied to clipboard
This simple step will already configure the Tag overlay for use.
The example will produce something like this:

You can use Tag widget with any widget of your choice. Here we have another example using a CircleAvatar.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Tag(
rightPadding: 12,
child: CircleAvatar(
backgroundImage: NetworkImage(
'https://t1.gstatic.com/images?q=tbn:ANd9GcSZqF3OGhXYqL8DSbLynQ-qA2EIniPAljZXhUTZ8Ay6f6g-um21wsmJsBkeLkjW'),
),
text: 'Lewis Hamilton',
textStyle: TextStyle(
color: Colors.white,
),
color: Colors.grey,
labelDecoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(4),
bottomRight: Radius.circular(4),
topLeft: Radius.circular(4),
),
),
),
),
),
);
}
}
copied to clipboard
And produces this:

Customisation #
There are many types of configurations that can be done to the Tag widget. You can configure spacing, tag decoration and much more. Just check the Tag constructor to see all possibilities. Missing any customisation? Please file a bug and i will be more than happy to work on it.
Todo #

❌ Tests
❌ Add more options to the tip of the Tag

Suggestions & Bugs #
For any suggestions or bug report please head to issue tracker.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter