eyoeldefare / textfield_tags Goto Github PK

Please note that the next release will be v2.0.0 and it will be breaking change. So if you update your package to v2+, it will break your code. The reason i am updating this package is to make it more robust and customizable and also to make it upto date with new features in flutter.

Some of the things that will be implemented are:

1. Custom autocomplete support by user as per issue #46 request
2. Build your own custom widget instead of using our implementation
3. More functionality using custom controller

need to replace "!" to "?" character, It doesn't work because there is no question mark because there is a definition that can be null.

lib>src>controller.dart line 87
#60 #58

there should be typing area, and "scroll controller" is always at its horizontal end point, so that typing area is always visible to user

Hi, thanks for this amazing development.

I want to set icon on the left/right side of the widget created by TextFieldTags, and is this supported by this class?
I want it to create like the following image.

I could simply implement it myself with Icon widget,
but if the functionality is supported by this class, I would prefer to use it.

Is it possible to leave a list of words and only from those words will a tag be formed?

I tried to use TextFieldTags without a validator:

TextFieldTags(
  tagsStyler: TagsStyler(
    tagDecoration: BoxDecoration(color: Colors.blue),
  ),
  textFieldStyler: TextFieldStyler(
    textFieldFilled: true,
    hintText: "Tags",
    helperText: null,
    textFieldBorder: OutlineInputBorder(borderSide: BorderSide.none),
  ),
  onTag: (tag) {
    //todo
  },
  onDelete: (tag) {
    //todo
  },
)

Upon entering a tag, I received an exception: Null check operator used on a null value

I want to automatically put # in front of textfield_tags like #tag1 #tag2
and then Can I delete it when I put backspace button?
is this possible?
@eyoeldefare

I tried adding the package to my pubspec.yaml file, after loading for several minutes it will show an error that "can't connect to flutter socket"

Hello, I have reproduced a bug related to #17 which has already been closed!

I'm using the latest version and the codes are below.

Flexible(
  child: TextFieldTags(
    initialTags: this._task.tags, // It happens when I set this option.
    onTag: (String tag) {
      this._tags.add(tag);
    },
    onDelete: (String tag) {
      this._tags.remove(tag);
    },
  ),
),

And these photos are what happened.

I have this TextFieldTags used inside a form. After the form is submitted, it is supposed to reset or clear the tags after successful submit. I dont see how to achieve this, or is there any way to do this?

Hi,

The model TagsStyler has something wrong in your code's comment
///[tagMargin] allows you to apply padding inside tag

Thank you for the useful package.

I would like to have a material look without border. I can I accomplish that? I want TextField's bottom border only and remove all others.

The example in the README.md gives an error: The named parameter 'tags' isn't defined.

I implemented tags list using your library

But the tags are scrolling horizontally .

I need to scroll them vertically

How to do this ?

And also how to add vertical and horizontal scrollbars and increase their size ?

Flutter Web

1. Horizatnal scroll not working in flutter web and desktop when using scroll wheel of mouse !!!! ???
2. How to attach a scroll controller like TextField ?

It appears after I re-open the screen which has TextFieldTags

It would be nice if you could add sth like onTagRemove to handle removing tags just like onTag() used to add tags.

/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/controller.dart:86:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/Users/Bala/flutter/packages/flutter/lib/src/widgets/binding.dart').
  package:flutter/…/widgets/binding.dart:1
  WidgetsBinding.instance!.addPostFrameCallback((_) {

after switched to flutter 3.0 and textfield_tags 2.0.0+1 getting this warning.

If a Textfield Tag box is in Flutter Web, and is completely filled up with tags, it will not automatically scroll over to add more tags. Instead, it prevents you from typing with no ability to move over. How can this issue be resolved because currently, once it is full, the textfield becomes unusable. Hence, the demonstration in the images on Pub.dev with it sliding over does not occur.

I want to make the text break and add the tag to a new line instead of adding them to a horizontally scrolling line when the end of the textfield is reached. How can I do that?

Hello, I got an issues of index out of range issues while input text to make a tag, but before tag creation, it shows errors of index out of range

Hi!

First, thanks for the great package!

I was just wondering if a new version with null-safety support is on the way?

Ive tried list.add(tag) in the onTap to get a string. But for some reason that didnt work and the app doesnt make a tag in textfield. (the one you coded(print('onTag ' + tag)) worked well though)
To make it clear I did it on dartpad, in there It did well. I got no idea why it dosent perform it, also any error doesnt even show on debug..
Id like to get the value in my db. is that able?

Hi,
For some reason I need to limit the number of tags. How can I do that?

Thanks.

Can I display a drop-down menu upon typing a tag?
Similar to:

Version used: textfield_tags: ^1.3.1

When used in conjunction with a stepper with the type set to horizontal, the tags seem to be duplicating. However, when using its default type (type: StepperType.vertical), everything is working as intended.

This issue also occurs in flutter web

To recreate this issue:

• Click continue to go to the next step
• Input any number of tags (I did 1, 2, 3 but this issue occurs with any lists of Strings)
• Click on the previous tab by clicking the number at the top of the stepper
• Click continue to go to the next step
• Enter any tags

Following these steps will have both the List and the tags to contain duplicate values.

Loving the simplicity of the package, please do let me know of any updates on this issue and whether or not this issue arises either from the package or from Flutter itself. Thank you!

Here is a simple code that you can use to replicate the issue:

import 'package:flutter/material.dart';
import 'package:textfield_tags/textfield_tags.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Package Stepper/Tag'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> tagsListString = [];
  int currentStep = 0;

  void showInSnackBar(String value) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(value),
      duration: const Duration(seconds: 1),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stepper(
          currentStep: currentStep,
          type: StepperType.horizontal,
          onStepContinue: () {
            print("next");
            if (currentStep < 2) {
              setState(() {
                currentStep++;
              });
            } else
              showInSnackBar("Complete!");
          },
          onStepCancel: () {
            print("reset");
            setState(() {
              currentStep = 0;
            });
          },
          onStepTapped: (index) {
            setState(() {
              currentStep = index;
            });
          },
          steps: [
            Step(isActive: true, content: TextField(), title: Text("Step 1")),
            Step(
                isActive: currentStep >= 1 ? true : false,
                content: TextFieldTags(
                    initialTags: tagsListString,
                    textFieldStyler: TextFieldStyler(
                      helperText: "Enter Tags Here",
                      hintText: "Example: 123 | abc",
                      textFieldFilledColor: Colors.white,
                    ),
                    tagsStyler: TagsStyler(
                        tagDecoration: BoxDecoration(color: Colors.blue),
                        tagTextStyle: TextStyle(color: Colors.white),
                        tagCancelIcon: const Icon(Icons.cancel,
                            size: 18.0, color: Colors.white)),
                    onTag: (tag) async {
                      print("adding $tag");
                      tagsListString.add(tag);
                      print("this is the new list: $tagsListString");
                    },
                    onDelete: (tag) {
                      print("deleting $tag");
                      tagsListString.remove(tag);
                      print("this is the new list: $tagsListString");
                    },
                    validator: (tag) {
                      if (tag!.length > 15) {
                        return "hey that's too long";
                      }
                      return null;
                    }),
                title: Text("Step 2")),
            Step(
                isActive: currentStep >= 2 ? true : false,
                content: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  child: ListView(
                    children: [
                      Text("This is the final list: "),
                      ...tagsListString.map((e) => Text(e))
                    ],
                  ),
                ),
                title: Text("Step 3")),
          ],
        ),
      ),
    );
  }
}

Hi,
I was wondering if support for costume delimeters, instead of only using spaces, is a feature you are looking to implement. I believe you just have to modify the onChanged in the TextField on main.dart to split value on a costume character. It would be really useful to have users separate tags with comas.
Thank you!

How to call the function in a onPressed?

It is TextFieldTags but it's obvious we are going to use it for any similar purpose other than small-case #hashtags.
So is there a way to keep TypeCase as it entered or TitleCase/Uppercase/Lowercase(which is the default/stubborn right now)

I tried getting tags, and noticed that the first tag entered is never returned? Why so?

wanna add tag from right side.
It is supported?

Hi, is there a way to avoid this empty tag?

My text separators:

            textSeparators: const [' ', '.', ','],

Hi, I can't find a property for max tags. Is there a way to expose a new tags limit? Or a better way to get the Tags List length so we can limit adding extra tags?

Autocomplete support would put this over the top in sheer awesomeness ...

Issue:
I can type words in the input form, yet after pressing space or enter, the words dissapear and no tag is renderd. Also, tags are not showing up at print in console.

Expected:

• tags to show up after space
• onTag to show a print in console when a tags is added

Debug console:

W/IInputConnectionWrapper( 5213): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper( 5213): getTextAfterCursor on inactive InputConnection
W/IInputConnectionWrapper( 5213): beginBatchEdit on inactive InputConnection
W/IInputConnectionWrapper( 5213): endBatchEdit on inactive InputConnection

My code:

class _PostFormState extends State<PostForm> {

  TextEditingController title = TextEditingController();
  List<String> tags;

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    TextFormField(
                          controller: title,
                          decoration: InputDecoration(hintText: 'Title'),
                          maxLength: 140,
                          validator: (value) {
                            if (value.isEmpty) {
                              return 'Please enter a title';
                            } else {
                              return null;
                            }
                          }),
                    SizedBox(height: 16,),
                    TextFieldTags(
                      onTag: (tag) {
                        tags.add(tag);
                        print(tags);
                      },
                      // onDelete: (tag) {
                      //   tags.remove(tag);
                      // },
                    ),
                    RaisedButton.icon(
                        onPressed: () {
                           // Validate returns true if the form is valid, otherwise false.
                            if (_formKey.currentState.validate()) {
                              // Provide userfeedback while processing
                              Scaffold
                                  .of(context)
                                  .showSnackBar(SnackBar(content: Text('Processing Data')));

                              // Post to firebase
                              Future result = widget.db.post(widget.audio, title, tags);

                                result.then((user) => Navigator.of(context)
                                    .pushReplacementNamed(homeRoute, arguments: 2)).catchError((e) => throw 'error in posting' + e);
                              }
                            },                         
                        label: Text('Post'),
                        icon: Icon(Icons.post_add),
                      ),
                  ],
                ),
              );
  }
}

My environment:

[√] Flutter (Channel beta, 1.22.0-12.1.pre, on Microsoft Windows [Version 10.0.18363.1139])
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Android Studio (version 4.0)
[√] VS Code (version 1.50.1)
[√] Connected device (1 available)

I ran in an emulator in debug mode

Hi thanks for this amazing development!

I tried to do a duplicate tag check in this widget with a validator, but it looks like the onTag process is running earlier than the validator process. I think the validator process should be run first, is there a purpose for this cycle?

Is there any way to make the input field multiline?

Im not sure why this is happening, when i add a tag, the event onTag fires twice in quick successions.

Usually what i do is i check if the tag already exist in the tag, if it does i display an alert that the tag is already in the list. I need to do that even though the widget doesnt add duplicates but since it doesnt support multiline so the user can forget what he added and not know why its not taking it.

so now what happens with the double fire of the event onTag. in the first event it saves it to the list, since its a new tag, in the second event it checks that the tag is already in the list and fires the alert saying that the tag already exist.

/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/main.dart:56:13: Error: Too few positional arguments: 6 required, 5 given.
..init(
^
/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/main.dart:81:12: Error: The getter 'focusNode' isn't defined for the class 'TextfieldTagsController'.

• 'TextfieldTagsController' is from 'package:textfield_tags/src/controller.dart' ('/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/controller.dart').
  package:textfield_tags/src/controller.dart:1

Try correcting the name to the name of an existing getter, or defining a getter or field named 'focusNode'.
_ttc.focusNode!,
^^^^^^^^^
/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/controller.dart:69:16: Error: Too few positional arguments: 4 required, 3 given.
super.initS(initialTags, tec, textSeparators);
^
/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/controller.dart:83:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

• 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/C:/Users/Bala/flutter/packages/flutter/lib/src/widgets/binding.dart').
  package:flutter/…/widgets/binding.dart:1
  WidgetsBinding.instance!.addPostFrameCallback((_) {
  ^

/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/controller.dart:178:5: Error: The getter 'focusNode' isn't defined for the class 'TextfieldTagsController'.

• 'TextfieldTagsController' is from 'package:textfield_tags/src/controller.dart' ('/C:/Users/Bala/AppData/Local/Pub/Cache/hosted/pub.dartlang.org/textfield_tags-2.0.0+1/lib/src/controller.dart').
  package:textfield_tags/src/controller.dart:1
  Try correcting the name to the name of an existing getter, or defining a getter or field named 'focusNode'.
  focusNode!.dispose();
  ^^^^^^^^^

after switched to flutter 3.0.2 having this issue.
currently my app not working due to this issue.
I hope it will solve as soon as possible.

There is a bug when initial tags already have some value . and then i try to add another tag it adds two tags.

It will be nice to have the enabled toggle. at the moment i have to put the widget in a stack and place a container with transparent color on top of it with to disallow add / delete tags.

Hi guys, how can i set textfield chips in miltilines. anybody know that please reply. thanks.

LateInitializationError: Field '_textSeparators@1298091221' has already been initialized.

I tried in many ways but still I could not solve it
can you please help me regarding it.

Hello, i want to change keyboardType. But, parameter not available

Would be nice to have access to the controller for easy suggestions

This should be "-1" not "-2"

All I need right now is to provide a list of tags, which I've already added previously. It will be good to have this feature.
Let me know your views on this.
BTW, I'm halfway through its implementation, will raise a PR soon!