Show a different widget when the bool value is true and false in Flutter

Question

Problem: While I was implementing REST API, I came across some conditional displays of widgets. So the API response back with a bool value. Now if the bool value is false then I want to show a TextField Widget in the UI else Just a Text Widget. Now I am confused as to how exactly I should implement it.

Here's how API functions We would send a post request with an email in their body. And the API would check whether the API is present in their database and in return they will send true false and response.

I will be herewith attaching my code snippets.

API Manager

class ApiService {
  static const int TIME_CONST = 20;
  Future<UserCheck> apiUserCheck(dynamic param) async {
    var client = http.Client();

    try {
      var response = await client
          .post(
              Uri.https(
                  "baseUrl", "endpoint"),
              body: param)
          .timeout(Duration(seconds: TIME_CONST));

      if (response.statusCode == 200) {
        print('Response Body: ${response.body}');
        final data = jsonDecode(response.body);
        return UserCheck(
          user: data['user_exists'],
        );
      } else {
        print("The response status is not 200");
        return param;
      }
    } on SocketException {
      throw FetchDataException('message', 'url');
    } on TimeoutException {
      throw ApiNotRespondingException("message", "url");
    }
  }
}

class UserCheck {
  final bool? user;
  UserCheck({this.user});
}

Function Used in the UI file

        checkUserExist() {
        final check = ApiService();
        check.apiUserCheck({
          "email": emailController.text,
        }).then((value) {
          if (value.user == true) {
            print('User Exist: ');
          } else {
            print('User Does Not exists');
          }
        });
      }

UI Part:

 Padding(
                padding: EdgeInsets.fromLTRB(15, 20, 15, 5),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                ),
              ),


  ////////IF ELSE BLOCK TO BE USED HERE TO DISPLAY COMDITIONAL WIDGETS/////

              SizedBox(
                height: 50.h,
              ),

Note: The implementation of the API works very well and I could validate whether an email is present or not. I am receiving the response body as true and false.

Thanks in advance.

score 3 · Answer 1 · answered Jul 22 '21 at 20:43

You should be using visibility widget.

According to docs

Whether to show or hide a child.

By default, the visible property controls whether the child is included in the subtree or not; when it is not visible, the replacement child (typically a zero-sized box) is included instead.

You can do something like this

           Visibility(child:
           Padding(
                padding: EdgeInsets.fromLTRB(15, 20, 15, 5),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                ),
              ),


  ////////IF ELSE BLOCK TO BE USED HERE TO DISPLAY COMDITIONAL WIDGETS/////
              replacement:
              SizedBox(
                height: 50.h,
              ),
              visible: //your if condition
        ),

NelsonThiago · Answer 2 · 2021-07-22T20:47:52.820

0

You could try this FutureBuilder example:

Widget build() {
  return FutureBuilder<bool>(
    future: checkUserExist(),
    builder: (context, snapshot) {
      if(snapshot.hasData) {
         if(snapshot.data) {
           return TextField();
         } else {
           return Text();
         }
       } else {
       /// Do something if there is no data like loading...
}
      
    }
  );
}

Also change the checkUserExistfunction:

Future<bool> checkUserExist() async {
        final check = ApiService();
        return await check.apiUserCheck({
          "email": emailController.text,
        });
      }

edited Jul 22 '21 at 20:47

answered Jul 22 '21 at 20:32

NelsonThiago

802
7
12

Hey @NelsonThiago No, there's no data flowing here. The API is just returning a true or a false. So based on what the API returns I need to display the widgets – Pratyay Sinha Jul 22 '21 at 20:35
Yes that's how you put a condition to show different widgets if user exists or not. – NelsonThiago Jul 22 '21 at 20:37
Or do you need help with the checking flow and widget change? – NelsonThiago Jul 22 '21 at 20:38
I will then add my API service class as well – Pratyay Sinha Jul 22 '21 at 20:43
Yes I need help with checking the flow. – Pratyay Sinha Jul 22 '21 at 20:44
Yes. Just wanted to know is there any way to replace the future builder class cause it just has bool values in response. – Pratyay Sinha Jul 22 '21 at 20:51
By the way, thank you for such a quick answer and explanation. I Will confirm it once I write this in my code. – Pratyay Sinha Jul 22 '21 at 20:53
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/235206/discussion-between-pratyay-sinha-and-nelsonthiago). – Pratyay Sinha Jul 23 '21 at 07:48
Hey, Let's move this conversation in the chat. – Pratyay Sinha Jul 23 '21 at 07:49
Hey!! Can you help me solve this error? https://stackoverflow.com/questions/68863386/display-a-particular-data-from-a-json-response-in-the-ui-using-flutter/68863446#68863446 – Pratyay Sinha Aug 20 '21 at 14:36

Show a different widget when the bool value is true and false in Flutter

2 Answers2