Select Tag In Flutter :
Screenshot 1 :
Screenshot 2 :
btn_colored.dart
import 'package:flutter/material.dart';
class BtnColored extends StatelessWidget {
final String text;
final VoidCallback onPressed;
const BtnColored({Key key, @required this.text, this.onPressed})
: super(key: key);
@override
Widget build(BuildContext context) {
return RaisedButton(
color: Theme.of(context).accentColor,
child: Text(text, style: const TextStyle(color: Colors.white)),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
onPressed: onPressed,
);
}
}
custom_alert_dialog.dart
import 'package:flutter/material.dart';
import 'btn_colored.dart';
import 'custom_dialog.dart';
import 'flat_btn_rounded.dart';
class CustomAlertDialog extends StatelessWidget {
final String title;
final Widget content;
final String positiveBtn;
final VoidCallback onPositive;
final String negativeBtn;
final VoidCallback onNegative;
final bool contentPadding;
final bool isNegative;
const CustomAlertDialog({
Key key,
@required this.title,
@required this.content,
this.positiveBtn,
this.negativeBtn,
@required this.onPositive,
this.onNegative,
this.contentPadding = true,
this.isNegative = true,
}) : assert((isNegative != null && onNegative != null) || !isNegative,
"If button negative, you must provide onNegative callback"),
super(key: key);
@override
Widget build(BuildContext context) {
List<Widget> buttons = [
BtnColored(
text: positiveBtn,
onPressed: onPositive,
)
];
if (isNegative) {
buttons.insertAll(0, [
FlatBtnRounded(
text: negativeBtn,
onPressed: onNegative,
),
const SizedBox(width: 12.0),
]);
}
return CustomDialog(
child: Column(mainAxisSize: MainAxisSize.min, children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(title, style: Theme.of(context).textTheme.title),
),
contentPadding
? Padding(padding: const EdgeInsets.all(16), child: content)
: content,
Padding(
padding: const EdgeInsets.fromLTRB(0, 8, 20, 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: buttons,
))
]));
}
}
custom_card.dart
import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
final double elevation;
final double radius;
final EdgeInsets margin;
final EdgeInsets padding;
final Widget child;
const CustomCard({
Key key,
this.elevation = 3,
this.radius = 8.0,
this.margin = EdgeInsets.zero,
this.padding = const EdgeInsets.all(16.0),
@required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
elevation: elevation,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius),
),
margin: margin,
child: ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: Padding(
padding: padding,
child: child,
)));
}
}
custom_dialog.dart
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
final Widget child;
const CustomDialog({Key key, @required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
final dialogRadius = BorderRadius.circular(8.0);
return Dialog(
shape: RoundedRectangleBorder(borderRadius: dialogRadius),
child: ClipRRect(
borderRadius: dialogRadius,
child: child,
));
}
}
flat_btn_rounded.dart
import 'package:flutter/material.dart';
class FlatBtnRounded extends StatelessWidget {
final String text;
final VoidCallback onPressed;
const FlatBtnRounded({Key key, @required this.text, this.onPressed})
: super(key: key);
@override
Widget build(BuildContext context) {
return FlatButton(
child: Text(text),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
onPressed: onPressed,
);
}
}
tag.dart
class Tag {
int id;
String name;
Tag({this.id, this.name});
}
tags_dialog.dart
import 'package:flutter/material.dart';
import 'custom_alert_dialog.dart';
import 'tag.dart';
class TagsDialog extends StatefulWidget {
final List<Tag> tags;
final List<Tag> selectedTags;
TagsDialog({
Key key,
@required this.selectedTags,
@required this.tags,
}) : super(key: key);
_TagsDialogState createState() => _TagsDialogState();
}
class _TagsDialogState extends State<TagsDialog> {
List<Tag> _selectedTags;
@override
void initState() {
super.initState();
_selectedTags = widget.selectedTags;
}
@override
Widget build(BuildContext context) {
return CustomAlertDialog(
title: 'Select Subject',
contentPadding: false,
content: Expanded(
child: ListView.builder(
physics: BouncingScrollPhysics(),
padding: const EdgeInsets.only(bottom: 10),
itemCount: widget.tags.length,
itemBuilder: (_, i) {
final tag = widget.tags[i];
return CheckboxListTile(
onChanged: (checked) {
setState(() {
if (checked)
_selectedTags.add(tag);
else
_selectedTags.remove(tag);
});
},
value: _selectedTags.contains(tag),
title: Text(tag.name),
);
}
)
),
positiveBtn: 'Save',
onPositive: () => Navigator.of(context).pop(_selectedTags),
negativeBtn: 'Cancel',
onNegative: Navigator.of(context).pop,
);
}
}
tags_selector.dart
import 'package:flutter/material.dart';
import 'btn_colored.dart';
import 'tag.dart';
import 'tags_dialog.dart';
class TagsSelector extends StatefulWidget {
final ValueChanged<List<Tag>> onTagsChanged;
final List<Tag> selectedTags;
TagsSelector({
Key key,
@required this.onTagsChanged,
@required this.selectedTags,
}) : super(key: key);
_TagsSelectorState createState() => _TagsSelectorState();
}
class _TagsSelectorState extends State<TagsSelector> {
List<Tag> _allTags = [];
@override
void initState() {
super.initState();
_fetchTags();
}
void _fetchTags() async {
try {
_allTags.add(Tag(id: 1, name: 'Flutter'));
_allTags.add(Tag(id: 1, name: 'Android'));
_allTags.add(Tag(id: 1, name: 'PHP'));
_allTags.add(Tag(id: 1, name: 'Java'));
} catch (e) {}
}
Future _openTagDialog() async {
List<Tag> newTags = await showDialog<List<Tag>>(
context: context,
builder: (_) =>
TagsDialog(tags: _allTags, selectedTags: widget.selectedTags),
);
if (newTags != null) widget.onTagsChanged(newTags);
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Selected Subject',
style: Theme.of(context).textTheme.caption,
),
const SizedBox(height: 12),
Wrap(
spacing: 8.0,
runSpacing: -6.0,
children: List.generate(
widget.selectedTags.length,
(i) {
return Chip(
label: Text(
widget.selectedTags[i].name,
style: const TextStyle(color: Colors.white),
),
elevation: 3,
labelPadding: const EdgeInsets.only(left: 10),
onDeleted: () {
setState(
() => widget.selectedTags.remove(widget.selectedTags[i]));
},
deleteIcon: const Icon(
Icons.close,
color: Colors.white,
size: 16,
),
backgroundColor: Colors.grey[600],
);
},
),
),
Align(
alignment: Alignment.bottomLeft,
child: BtnColored(
text: 'Select Tag',
onPressed: _openTagDialog,
),
),
],
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'custom_card.dart';
import 'tag.dart';
import 'tags_selector.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Tag> _selectedTags = [];
@override
void initState() {
super.initState();
_selectedTags.add(Tag(id: 1, name: 'Flutter'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tag List'),
),
body: Center(
child: CustomCard(
elevation: 7,
padding: const EdgeInsets.fromLTRB(16, 16, 16, 10),
child: TagsSelector(
selectedTags: _selectedTags,
onTagsChanged: (tags) {
setState(() => _selectedTags = tags);
},
))));
}
}
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
