Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Screen not popping to original screen

I have implemented a separate screen to show the error message. In the init state of the error screen, I have implemented a timer so that it pops back to the original login screen after 3 seconds of showing the error. However, after showing the screen for 3 seconds, I get a black screen, and not the original login screen. Can someone explain why? Is there a better way to do it?

Codes:

Widget build(BuildContext context) {
    return BlocBuilder<AuthCubit, AuthState>(
      builder: (context, state) {
        if (state is AuthSuccess) {
          return buildSuccessScreen(state);
        } else if (state is AuthError) {
          return ErrorScreen(state.message);
        } else if (state is AuthPrompt) {
          return _LoginForm(buildSuccessScreen);
        } else {
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }
      },
    );
  }



class ErrorScreen extends StatefulWidget {
  const ErrorScreen(this.error, {super.key});

  final String error;

  @override
  State<ErrorScreen> createState() => _ErrorScreenState();
}

class _ErrorScreenState extends State<ErrorScreen> {
  @override
  void initState() {
    Timer(const Duration(seconds: 3), () {
      Navigator.pop(context);
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
          child: Text(
        widget.error,
        style: const TextStyle(
          color: Colors.black,
          fontSize: 20,
        ),
      )),
    );
  }
}
Tags:

2

Answers


  1. 0

    Are you doing any Navigator.of(context).push? If not maybe you should update your AuthCubit‘s state after 3 seconds so your build method returns the correct widget (I believe _LoginForm(buildSuccessScreen))

    Login or Signup to reply.
  2. 0

    You are getting a black screen because you are actually not pushing anything on the navigation stack and simply just replacing screen based on your AuthState and then you are trying to pop the only screen available in navigation stack, thus you are seeing a blank screen.

    Your code:

    Widget build(BuildContext context) {
    return BlocBuilder<AuthCubit, AuthState>(
      builder: (context, state) {
        if (state is AuthSuccess) {
          return buildSuccessScreen(state);
        } else if (state is AuthError) {
          return ErrorScreen(state.message);
        } else if (state is AuthPrompt) {
          return _LoginForm(buildSuccessScreen);
        } else {
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }
      },
    );
  }

    Solution:

    Please find implementation below:

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ExampleCubit, ExampleCubitState>(
      builder: (context, state) {
        if (state is AuthSuccess) {
          return buildSuccessScreen(state);
        } else if (state is AuthError) {
          context.read<ExampleCubit>().replaceErrorScreen();
          return ErrorScreen(state.message);
        } else if (state is AuthPrompt) {
          return _LoginForm(buildSuccessScreen);
        } else {
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }
      },
    );
  }
}

    class ExampleCubit extends Cubit<ExampleCubitState> {
  ExampleCubit() : super(ExampleCubitInitial());

  Timer? timer;

  @override
  Future<void> close() {
    timer?.cancel();
    return super.close();
  }

  void replaceErrorScreen() {
    timer = Timer(
      const Duration(seconds: 3),
      () {
        emit(ExampleCubitInitial());
      },
    );
  }
}

    @immutable
sealed class ExampleCubitState {}

final class ExampleCubitInitial extends ExampleCubitState {}

final class AuthSuccess extends ExampleCubitState {}

final class AuthError extends ExampleCubitState {}

final class AuthPrompt extends ExampleCubitState {}

    If you find this useful, Kindly upvote this answer

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search