English 中文(简体)
Flutter: How to display autocomplete suggestions beside TextField?
原标题:

I m trying to create a text field with a suggestion text, something like this:

enter image description here

the @gmail.com it s a suggestion for the user to autocomplete the word, but I m not able to put the text next to the written text.

I tried using an IntrinsicWidth but it shrinks the text field to 0 and the label doesn t show correctly.

enter image description here

So I expect to put the suggestion next to the written text but without affecting the label to be shown correctly.

问题回答

you can try this code, it s worked for me

  final _editingController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.centerLeft,
          children: [
            TextField(
              controller: _editingController,
              onChanged: (text){
                setState(() {
                });
              },
            ),
            Positioned(
              left: boundingTextSize(
                _editingController.text,
                TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.normal,
                )
              ).width,
              child: Visibility(
                visible: _editingController.text.isNotEmpty,
                child: Text("@gmail.com")
              ),
            ),
          ],
        ),
      ),
    );
  }

  static Size boundingTextSize(String text, TextStyle style,  {int maxLines = 2^31, double maxWidth = double.infinity}) {
    if (text.isEmpty) {
      return Size.zero;
    }
    final TextPainter textPainter = TextPainter(
        textDirection: TextDirection.ltr,
        text: TextSpan(text: text, style: style), maxLines: maxLines)
      ..layout(maxWidth: maxWidth);
    return textPainter.size;
  }

use boundingTextSize to measure the TextField text size and change the suggestion text s position when TextField text changed.





相关问题
high load on mysql DB how to avoid?

I have a table contain the city around the worlds it contain more than 70,000 cities. and also have auto suggest input in my home page - which used intensively in my home page-, that make a sql query ...

Fast Javascript String Replacement

Hey there geniuses of SO! This is for an autocomplete plugin that needs to accept data as an array of arrays and convert it using a format string (or regex). The format string could be any format. ...

Categorized results – jQuery autocomplete plugin

I m looking for an autocomplete plugin that makes it easy to categorize search results. If that s unclear, take a look at Apple.com s search bar (top right). I know that script.aculo.us autocomplete ...

Limiting IntelliJ IDEA import suggestions on completion

When I type the name of a class which will need to be imported, IntelliJ lovingly pops up with a list of suggestions. However, most of the time those suggestions are things I d never want to import, ...

热门标签