Dn-a / flutter_tags

With flutter tags you can create selectable or input tags that automatically adapt to the screen width
https://pub.dartlang.org/packages/flutter_tags
MIT License
507 stars 127 forks source link

Suggestions moves textfield up and suggestions do not align perfectly with text #31

Closed johnmastri closed 4 years ago

johnmastri commented 5 years ago

Here is the textfield without any text in it.

image

Here is the textfield with text - it shifts up (compare spacing to the gray box above the 'f').

image

Here is the textfield with a suggestion behind the input text:

image

Dn-a commented 5 years ago

@johnmastri Android or iPhone? Post your code please

johnmastri commented 5 years ago

Here you go - thanks:

import "package:flutter_tags/tag.dart";

class Item {
  String title;
  bool active;
  var customData;

  Item({this.title, this.active, this.customData});

}

class RoutineTags extends StatefulWidget {

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

class _RoutineTagsState extends State<RoutineTags> {

  List _items = [
  /*  Item(title: "Serenity",
    active: true,
    customData: null
    ),
    Item(title: "Peace",
        active: true,
        customData: null
    ),
    Item(title: "Energy",
        active: true,
        customData: null
    ),
    Item(title: "Laugther",
        active: true,
        customData: null
    ),
    Item(title: "Answers",
        active: true,
        customData: null
    ),
    Item(title: "Money",
        active: true,
        customData: null
    ),
    Item(title: "Intention",
        active: true,
        customData: null
    ),*/
  ];

  Widget _tags(){

    return Container(
      alignment: Alignment.topLeft,
      //height: 100,
      //padding: EdgeInsets.all(10),
      child: Tags(
        horizontalScroll: true,
        //heightHorizontalScroll: 30,
        spacing: 2,
        textField: TagsTextFiled(
          textStyle: TextStyle(
              fontSize: 20,
              height: 1.1
          ),
          suggestions: [
            "peace",
            "love",
            "joy"
          ],
          onSubmitted: (String str) {
            // Add item to the data source.
            setState(() {
              // required
              _items.add(str);
            });
          },
        ),
        itemCount: _items.length, // required
        itemBuilder: (int index) {

          final item = _items[index];

          return ItemTags(
              key: Key(index.toString()),
              index: index, // required
              title: item.title,
              active: item.active,
              customData: item.customData,
              textStyle: TextStyle( fontSize: 12 ),
              combine: ItemTagsCombine.withTextBefore,
              onPressed: null,
              pressEnabled: false,
              //image: ItemTagsImage(image: AssetImage("img.jpg") || NetworkImage("https://...image.png") || null,
              //icon: ItemTagsIcon(icon: Icons.add),
              removeButton: ItemTagsRemoveButton(),
              onRemoved: (){
                // Remove the item from the data source.
                setState(() {
                // required
                _items.removeAt(index);
                });
              },
          //onPressed: (item) => print(item),
          //onLongPressed: (item) => print(item),
          );

        },
      ),
    );
  }

  String text = "Nothing to show";

  @override
  Widget build(BuildContext context) {
      return _tags();
  }
}
Dn-a commented 5 years ago

@johnmastri the problem occurs when you use the height parameter.

textField: TagsTextFiled(
          textStyle: TextStyle(
              fontSize: 20,
               // Comment this 
              //height: 1.1
          ),
}

I will solve in the next release

hatano0x06 commented 4 years ago

I found nearly problem. if i use multibyte word, it going to be miss

byte-word multibyte-word

Dn-a commented 4 years ago

@hatano0x06 thanks for the report. I will solve it in the next releases.

hatano0x06 commented 4 years ago

@Dn-a thank you! I will be happy for next release!

Dn-a commented 4 years ago

@hatano0x06 @johnmastri new release 0.4.4, check and leave feedback. thanks