在 Flutter 中当 bool 值为 true 和 false 时显示不同的小部件

Question

问题：在实现 REST API 时，我遇到了一些小部件的条件显示。 所以 API 响应返回一个 bool 值。现在，如果 bool 值为 false，那么我想在 UI 中显示一个 TextField 小部件，否则只是一个文本小部件。 现在我很困惑我应该如何实现它。

API 的功能如下 我们会在他们的正文中发送带有电子邮件的发布请求。 API 会检查 API 是否存在于他们的数据库中，作为回报，他们会发送 true false 和响应。

我将附上我的代码 sn-ps。

API 管理器

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});
}

UI 文件中使用的函数

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

用户界面部分：

 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,
              ),

注意：API 的实现运行良好，我可以验证电子邮件是否存在。我收到的响应正文是真假。

提前致谢。

Answer 1

您应该使用可见性小部件。

根据文档

是显示还是隐藏孩子。

默认情况下，visible 属性控制孩子是否是 是否包含在子树中；当它不可见时， 而是包含替换子项（通常是一个零大小的框）。

你可以这样做

           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
        ),

Answer 2

你可以试试这个FutureBuilder 例子：

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...
}
      
    }
  );
}

同时更改checkUserExist函数：

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