Flutter中如何验证Text组件内容为空并自动跳转至登录页？

核心逻辑是在API请求完成后直接校验返回数据，若为空则触发页面跳转，同时用Text组件展示有效数据，无需依赖输入类组件。

实现步骤 #

• 发起Get请求获取数据，处理异步请求的异常与状态
• 对返回数据做严谨的空值校验（覆盖null、空字符串、全空格场景）
• 校验不通过时调用导航方法跳转登录页，校验通过则在Text中展示数据

原生Flutter实现示例 #

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class DataDisplayPage extends StatefulWidget {
  const DataDisplayPage({super.key});

  @override
  State<DataDisplayPage> createState() => _DataDisplayPageState();
}

class _DataDisplayPageState extends State<DataDisplayPage> {
  String? fetchedData;

  @override
  void initState() {
    super.initState();
    _fetchAndValidateData();
  }

  Future<void> _fetchAndValidateData() async {
    try {
      final response = await http.get(Uri.parse('你的API接口地址'));
      if (response.statusCode == 200) {
        final jsonData = json.decode(response.body);
        // 按实际API返回结构调整字段，trim()避免全空格被误判为有效数据
        setState(() {
          fetchedData = jsonData['target_content']?.toString().trim();
        });

        // 空值校验
        if (fetchedData == null || fetchedData!.isEmpty) {
          // 用Duration.zero确保在页面初始化完成后跳转，避免上下文异常
          Future.delayed(Duration.zero, () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => const LoginPage()),
            );
          });
        }
      } else {
        // 请求失败时也可跳转登录页，按需调整
        _navigateToLogin();
      }
    } catch (e) {
      // 网络异常等场景处理，这里直接跳转登录页
      _navigateToLogin();
    }
  }

  void _navigateToLogin() {
    Future.delayed(Duration.zero, () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const LoginPage()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数据展示页')),
      body: Center(
        child: fetchedData != null
            ? Text(fetchedData!)
            : const CircularProgressIndicator(),
      ),
    );
  }
}

// 示例登录页
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录页')),
      body: const Center(child: Text('请完成登录')),
    );
  }
}

GetX状态管理优化示例 #

如果项目使用GetX，可将逻辑抽离到Controller，代码更简洁：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class DataController extends GetxController {
  final fetchedData = ''.obs;

  @override
  void onInit() {
    super.onInit();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      final response = await http.get(Uri.parse('你的API接口地址'));
      if (response.statusCode == 200) {
        final jsonData = json.decode(response.body);
        fetchedData.value = jsonData['target_content']?.toString().trim() ?? '';
        if (fetchedData.value.isEmpty) {
          Get.offAll(() => const LoginPage());
        }
      } else {
        Get.offAll(() => const LoginPage());
      }
    } catch (e) {
      Get.offAll(() => const LoginPage());
    }
  }
}

class DataDisplayPage extends StatelessWidget {
  const DataDisplayPage({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(DataController());
    return Scaffold(
      appBar: AppBar(title: const Text('数据展示页')),
      body: Center(
        child: Obx(() => controller.fetchedData.isNotEmpty
            ? Text(controller.fetchedData.value)
            : const CircularProgressIndicator()),
      ),
    );
  }
}

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录页')),
      body: const Center(child: Text('请完成登录')),
    );
  }
}

内容的提问来源于stack exchange，提问作者Mr.Robot