Select Tag In Flutter

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