my app has two textformfield. I want to enable button if all textfield are not empty. In the internet, there are a way to enable button if "one" textfield are not empty. I try to make isFilledTitle true if title of textfield is not empty. and isFilledContent true if content of textfield is not empty. and then if they are all true, isButtonActive is true. but it doesn't work.

late TextEditingController _titleEditingController;
late TextEditingController _contentEditingController;
bool isButtonActive = true;
bool isFilledContent = false;
bool isFilledTitle = false;

  @override
  void initState() {
    super.initState();
    _titleEditingController = TextEditingController();
    _contentEditingController = TextEditingController();

    _titleEditingController.addListener(() {
      final isFilledTitle = _titleEditingController.text.isNotEmpty;
      setState(() {
        this.isFilledTitle = isFilledTitle;
      });
    });

    _contentEditingController.addListener(() {
      final isFilledContent = _contentEditingController.text.isNotEmpty;
      setState(() {
        this.isFilledContent = isFilledContent;
      });
    });
    if(isFilledContent && isFilledTitle){
      setState(() {
        isButtonActive = true;
      });
    } else {
      setState(() {
        isButtonActive = false;
      });
    }
  }

 @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: Container(
        child: SafeArea(
          child: Scaffold(
            appBar: AppBarWriteContainer(
                onButtonPressed: isButtonActive
                    ? (widget.postNo != null)
                        ? () => revisePost()
                        : () => newPost()
                    : null,
           ),

CodePudding user response：

Yeah your answer is correct but the user needs validation on two text field so i will modify the answer like

 class _TempDialogState extends State<TempDialog> {
      final TextEditingController _inputController = TextEditingController();
      final TextEditingController _inputController2 = TextEditingController();
      bool enable = false;
    
      @override
      void initState() {
        super.initState();
      }
    
      @override
      void dispose() {
        _inputController.dispose();
        _inputController2.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            body: Center(
                child: Column(children: [
              TextField(
                controller: _inputController,
                onChanged: (data) {
                  if (_inputController.text.isEmpty ||
                      _inputController2.text.isEmpty) {
                    enable = false;
                  } else {
                    enable = true;
                  }
                  setState(() {});
                },
              ),
              TextField(
                controller: _inputController2,
                onChanged: (data) {
                  if (_inputController.text.isEmpty ||
                      _inputController2.text.isEmpty) {
                    enable = false;
                  } else {
                    enable = true;
                  }
                  setState(() {});
                },
              ),
              ElevatedButton(
                onPressed: enable ? () {} : null,
                child: Text('${enable}'),
              )
            ])),
          ),
        );
      }
    }

CodePudding user response：

You don't need any additional libraries to do that. Flutter has it out-of-the-box and you can make sure you're not going to rebuild the whole tree on each keystroke.

TextEditingController extends ValueNotifier<TextEditingValue> which means you can utilize ValueListenableBuilder from material package to listen to text changes.

class MyWidget extends StatelessWidget {
  final TextEditingController _inputController = TextEditingController();

  @override
  void dispose() {
    _inputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      TextField(controller: _inputController),
      ValueListenableBuilder<TextEditingValue>(
        valueListenable: _inputController,
        builder: (context, value, child) {
          return ElevatedButton(
            onPressed: value.text.isNotEmpty ? () {} : null,
            child: Text('I am disabled when text is empty'),
          );
        },
      ),
    ]);
  }
}

CodePudding user response：

You only set the isButtonActive in the initState. Try updating it in the controller listeners. Maybe something like:

  @override
  void initState() {
    super.initState();
    _titleEditingController = TextEditingController();
    _contentEditingController = TextEditingController();

    _titleEditingController.addListener(() {
      final isFilledTitle = _titleEditingController.text.isNotEmpty;
      setState(() {
        this.isFilledTitle = isFilledTitle;
        updateIsButtonActive();
      });
    });

    _contentEditingController.addListener(() {
      final isFilledContent = _contentEditingController.text.isNotEmpty;
      setState(() {
        this.isFilledContent = isFilledContent;
        updateIsButtonActive();
      });
    });
  }

  void updateIsButtonActive() {
    if(isFilledContent && isFilledTitle){
      isButtonActive = true;
    } else {
      isButtonActive = false;
    }
  }