CODEWITHSUNDEEP
formsflutterdart
Flari
Flari

Reputation: 312

Flutter why is the label text disappearing

I am trying to make a flutter app, however I ran into a weird problem in one of the form fields.

It is supposed to have a placeholder, and when the user types anything the placeholder becomes the label. Simple enough. there is also the thing that the form will enable a button when the "name" and "surname" fields are done.

There are two problems happening. The label is disappearing and the button is enabling like it was an "Or" logic and not "And" logic. Here are the codes: Form field:

            Row(
          children: [
            Container(
              width: 100,
              height: 100,
              child: FlatButton(
                onPressed: open_gallery,
                child: Center(
                  child: _image == null
                      ? Text(
                          "add photo",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: brandLightBlue,
                              fontFamily: "Roboto",
                              fontSize: 16),
                        )
                      : Text(''),
                ),
              ),
              decoration: _image == null
                  ? BoxDecoration(
                      color: brandLightGrey,
                      borderRadius: BorderRadius.circular(200))
                  : BoxDecoration(
                      image: DecorationImage(
                          image: FileImage(_image), fit: BoxFit.fill),
                      color: brandLightGrey,
                      borderRadius: BorderRadius.circular(200)),
            ),
            Container(
              width: 30,
            ),
            Column(
              children: [
                Container(
                  color: brandLightGrey,
                  width: MediaQuery.of(context).size.width * 0.6,
                  child: TextFormField(
                    onChanged: (value) {
                      print(value);
                      _inputName = value;
                    },
                    decoration: InputDecoration(
                        contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                        hintText: _inputName == null || _inputName == ''
                            ? ""
                            : "Name",
                        labelText: _inputName == null || _inputName == ''
                            ? "Name"
                            : "",
                        labelStyle: TextStyle(
                            color: brandDarkGrey, fontFamily: 'Roboto'),
                        hintStyle: TextStyle(
                            color: brandDarkGrey, fontFamily: 'Roboto'),
                        fillColor: brandLightGrey),
                  ),
                ),
                Container(
                  height: 10,
                ),
                Container(
                  color: brandLightGrey,
                  width: MediaQuery.of(context).size.width * 0.6,
                  child: TextField(
                    onSubmitted: (value) {
                      _inputSurname = value;
                    },
                    decoration: InputDecoration(
                      hintText: _inputSurname == null || _inputSurname == ''
                          ? ""
                          : "Surname",
                      labelText:
                          _inputSurname == null || _inputSurname == ''
                              ? "Surname"
                              : "",
                      hintStyle: TextStyle(
                          color: brandDarkGrey, fontFamily: 'Roboto'),
                      contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),

And here is the button and button logic:

        RaisedButton(
        elevation: 0,
        color: brandBlue,
        disabledColor: brandLightGrey,
        onPressed: (_inputName == null && _inputSurname == null) ||
                (_inputName == '' && _inputSurname == '')
            ? null
            : () {
                if (termAccepted == true) {}
                print("AAAA");
              },
        child: Container(
          width: MediaQuery.of(context).size.width * 0.9,
          height: MediaQuery.of(context).size.height * 0.08,
          child: Center(
              child: Text(
            "Next",
            style: TextStyle(
                color: brandWhite, fontFamily: 'Alata', fontSize: 18),
          )),
        )),

Upvotes: 1

Views: 1396

Answers (1)

John Joe
John Joe

Reputation: 12803

I will suggest you to use controller for your TextField.

final _inputSurnameController = TextEditingController();
final _inputNameController = TextEditingController();

Add controller to your TextField.

 TextField(
        onSubmitted: (value) {
            _inputSurname = value;
        },
      decoration: InputDecoration(
          hintText: _inputSurnameController.text == "" ? "": "Surname",
          labelText: _inputSurnameController.text == ""? "Surname": "",
           hintStyle: TextStyle(
                color: brandDarkGrey, fontFamily: 'Roboto'),
                contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
           ),
   ),

Upvotes: 2

Related Questions