Question 295203 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – I want to create a button when there is text in the TextField

It’s probably easy to understand if you look at it from the bottom.

final TextEditingController _textEditingController = TextEditingController();

PreferredSizeWidget _appBar() {
  final deviceSize = MediaQuery.of(context).size;
  return AppBar(
    flexibleSpace: SafeArea(
      child: Row(
        children: [
          Container(
            width: deviceSize.width / 10 * 8,
            decoration: BoxDecoration(
              color: const Color(0xFFf4f4f4),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Row(
              children: [
                const Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      // filled: true,
                      // fillColor: Colors.blue,
                      border: InputBorder.none,
                      hintText: 'hintText',
                      hintStyle: TextStyle(
                        color: Color(0xFF888888),
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                      ),
                      contentPadding: EdgeInsets.only(left: 16, bottom: 6),
                    ),
                  ),
                ),
                if (_textEditingController.text.isNotEmpty)
                  InkWell(
                    onTap: () {
                      setState(() {
                        _textEditingController.clear();
                      });
                    },
                    child: Image.asset('assets/images/delete.png'),
                  ),

                    .
                    .
                    .
                    .
                    .

              ],
            ),
          ],
        ),

This code is when the text is in the text field, ElevatedButton is created.

But even if there is text in the text field, it doesn’t happen.

What can I do to appear the button?

Tags:

2

Answers


  1. 0

    The _textEditingController.text.isNotEmpty part is only "read" when the _appBar() method is called, so probably in your widget’s build method. This app bar doesn’t know it should rebuild when the text controller value changes. You have a few options to choose from on how to solve it, two of them, among others are as follows:

    • Wrap your InkWell with the if in ListenableBuilder. The TextEditingController is a ChangeNotifier, which is a Listenable. Something that you can listen to. It "fires" when the controller’s value changes.

      ListenableBuilder(
  listenable: _textEditingController,
  builder: (context, child) =>
    _textEditingController.text.isNotEmpty ? child! : const SizedBox(),
  child: InkWell(), // Your button
)

      If the text is empty I’m returning a const SizedBox(), which is basically a widget with no size and contents, because I need to return something in the builder.

    • In the initState() of your StatefulWidget addListener on the _textEditingController and in its callback, call setState() whenever the value of the controller changes. This will rebuild this stateful widget on every controller change, so the condition in the if will be read again and the button will appear when necessary.

    Also, looking at your code example, I see one issue and one thing you may not be aware of.

    • Calling setState is only necessary when you want your widget to be rebuilt. Text editing controller methods don’t need to be called inside a setState, because you pass this controller to a text field that listens on its changes. You’d need this setState only if you wanted to rebuild your stateful widget.
    • Make sure to read this Q&A: What is the difference between functions and classes to create reusable widgets?
    Login or Signup to reply.
  2. 0

    First, declare a variable after _textEditingController :

    bool isTextFieldEmpty = false;

    Then Do This in TextField:

              onChanged: (value) {
            value.isEmpty
                ? isTextFieldEmpty = false
                : isTextFieldEmpty = true;
            setState(() {});

    }

    Then Do this Where you want to put your Buttton :

            isTextFieldEmpty
      ? ElevatedButton(onPressed: () {
             //do someThing
      }, child: Text('Press'))
     : Container();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search