Randu Pratama
Randu Pratama

Reputation: 23

TextFormField with condition Flutter

I've created 3 TextFormField. I want to make the second and third TextFormField disable until the user input the first TextFormField, and disable again if the user deletes the value of first TextFormField. I make onchanged property on first TextFormField, the function work but when users delete the value from first TextFormField the second and third TextFormField doesn't disable itself again.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final PageController _pagecontroller = PageController();
  int _selectedindex = 0;
  final _formKey = GlobalKey<FormState>();
  bool _isEnable = false;

  void _ontap(int index) {
    setState(() {
      _selectedindex = index;
    });
    _pagecontroller.jumpToPage(index);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(24.0),
          child: PageView(
            controller: _pagecontroller,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Home'),
                  Padding(
                    padding: EdgeInsets.all(16.0),
                    child: Form(
                        key: _formKey,
                        child: Column(
                          children: [
                            TextFormField(
                              onChanged: (String _value) {
                                if (_value != null) {
                                  setState(() {
                                    _isEnable = true;
                                  });
                                } else {
                                  setState(() {
                                    _isEnable = false;
                                  });
                                }
                              },
                            ),
                            TextFormField(
                              enabled: _isEnable,
                            ),
                            TextFormField(
                              enabled: _isEnable,
                            )
                          ],
                        )),
                  ),
                  FlatButton(
                    onPressed: () {
                      setState(() {
                        _selectedindex++;
                      });
                      _pagecontroller.jumpToPage(_selectedindex);
                    },
                    child: Text('Profile'),
                    color: Colors.orange,
                  ),
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Profile'),
                ],
              ),
            ],
            onPageChanged: (page) {
              setState(() {
                _selectedindex = page;
              });
            },
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Profile'),
            ),
          ],
          currentIndex: _selectedindex,
          onTap: _ontap,
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 2593

Answers (1)

hewa jalal
hewa jalal

Reputation: 963

the first time the condition is false because the value is null but as soon as you type something the value will have a value and when you delete the values you entered, the value will still have a value of empty string which is this '' and won't go back on being null so instead of checking for null check for '' like this:

  onChanged: (String value) {
                                if (value != '') {
                                  setState(() {
                                    _isEnable = true;
                                  });
                                } else {
                                  setState(() {
                                    _isEnable = false;
                                  });
                                }
                              },

also i don't think it's a good practise to name parameters with _ as they are local and only belong to that method. enter image description here

Upvotes: 1

Related Questions