CustomTag Creator - tageditor flutter | tagediting not package

 







how to call it :

 TagCreator(
            onTagsChanged: (tags) {
              setState(() {
                tagsFromTagCreator = tags;
              });
            },
          ),


tagCretor widget

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:status_with_friends/screens/register%20screen/widgets/custom_textfield.dart';

import 'custom-chip.dart';

class TagCreator extends StatefulWidget {
  final Function(List<String>) onTagsChanged;

  TagCreator({required this.onTagsChanged});

  @override
  _TagCreatorState createState() => _TagCreatorState();
}

class _TagCreatorState extends State<TagCreator> {
  TextEditingController _tagController = TextEditingController();
  List<String> tags = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Wrap(
          spacing: 8.0,
          runSpacing: 6,
          children: tags.map((tag) {
            return CustomChip(
              tag: tag,
              onTagDeleted: (p0) => removeTag(p0),
            );
          }).toList(),
        ),
        Gap(10),
        Row(
          children: [
            Expanded(
                child: CustomRegisterTextField(
                    hintText: "English", controller: _tagController)
                // TextField(
                //   controller: _tagController,
                //   decoration: InputDecoration(
                //     hintText: 'Enter a tag',
                //   ),
                // ),
                ),
            Gap(5),
            GestureDetector(
              onTap: () => addTag(),
              child: Container(
                width: 50, // Set your desired width
                height: 50, // Set your desired height
                decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  shape: BoxShape.circle,
                ),
                child: Center(
                  child: Icon(
                    Icons.add,
                    size: 30,
                    color: Colors.white, // Set your desired icon color
                  ),
                ),
              ),
            )

            // IconButton(
            //   icon: Icon(Icons.add, size: 30,),
            //   onPressed: () {
            //     addTag();
            //   },
            // ),
          ],
        ),
        SizedBox(height: 10),
      ],
    );
  }

  void addTag() {
    String newTag = _tagController.text.trim();
    if (newTag.isNotEmpty && newTag.length >= 3) {
      setState(() {
        tags.add(newTag);
        _tagController.clear();
      });
      widget.onTagsChanged(tags); // Notify the home page about the changes
    }
  }

  void removeTag(String tag) {
    setState(() {
      tags.remove(tag);
    });
    widget.onTagsChanged(tags); // Notify the home page about the changes
  }
}


CustomChip widget

import 'package:flutter/material.dart';
import 'package:status_with_friends/const/colors.dart';
import 'package:status_with_friends/widgets/custom_text.dart';

class CustomChip extends StatelessWidget {
  final String tag;
  final Function(String) onTagDeleted;

  const CustomChip({super.key, required this.tag, required this.onTagDeleted});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
      decoration: BoxDecoration(
        color: Colors.lightBlue,
        borderRadius: BorderRadius.circular(18),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          CustomText(
            size: 19,
            text: tag,
            textColor: whiteColor,
          ),
          SizedBox(width: 4),
          GestureDetector(
            onTap: () {
              onTagDeleted(tag);
            },
            child: Icon(
              Icons.close_rounded,
              size: 18,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}




Comments