Question

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

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.

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

Answer 1

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.

友情链接