3

I have a basic login page that consists of an 'email', 'password' and a 'SwitchListTile' (Switch) that users will select to confirm reading of legal documents. On 'Login', I would like the 'Text' to show. Default is invisible.

I implemented the visibility of the Text using the 'Visibility' class. Now I would like to make it visible using an 'if-else' check.

        SwitchListTile(
          value: _acceptTerms,
          onChanged: (bool value) {
            setState(() {
              _acceptTerms = value;
            });
          },
          title: Text('Accept T&Cs'),
        ),
        SizedBox(height: 5.0),
        Visibility(
            visible: false,
            child: Text(
              'Please accept Terms & Conditions!',
              style: TextStyle(color: Colors.red),
            )),
        SizedBox(
          height: 10.0,
        ),
        RaisedButton(
          color: Theme.of(context).primaryColor,
          textColor: Colors.white,
          child: Text('LOGIN'),
          onPressed: () {
            print(_emailValue);
            print(_passwordValue);
            if(_acceptTerms) {
              Navigator.pushReplacementNamed(context, '/products');
            } else {
              //code to make invisible text visible
            }
          },
        ),

I'm still new to Flutter and Dart development. Thanks.

1 Answer 1

6

The only way to do this in flutter is to create a variable

var tcVisibility = false

set the visibility of the text box to the variable

Visibility(
     visible: tcVisibility,
     child: Text(
     'Please accept Terms & Conditions!',
     style: TextStyle(color: Colors.red),
)),

then in the code update the variable

if(_acceptTerms) {
     Navigator.pushReplacementNamed(context, '/products');
} else {
    setState(() {
         tcVisibility = true;
    });
}

Answer Updated

Sign up to request clarification or add additional context in comments.

1 Comment

Instead of tcVisibility = false;, it should be tcVisibility = true; in else clause.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.