flutter 为什么我在使用BlocBuilder时会看到黑屏,尽管我已经采取了所有可能的措施?

hivapdat  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(98)

这是我的主文件,我试图检查互联网连接。并显示对话框,如果没有互联网连接使用Flutter肘。
但唯一的障碍是 Flink 的一秒屏幕变黑,然后对话框显示,我怎么能避免这种情况?
main.file

void main() {
  runApp(BlocProvider(
    create: (BuildContext context) => ConnectivityCubit()..checkConnectivity(),
    lazy: false,
    child: MaterialApp(home: MyApp()),
  ));
}

class MyApp extends StatelessWidget {
  MyApp({super.key});
  bool _isDialogDisplayed = false;
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<ConnectivityCubit, ConnectivityState>(
      listener: (context, state) {
        if (state == ConnectivityState.disconnected) {
          _isDialogDisplayed = true;
          showDialog(
            context: context,
            builder: (context) => const AlertDialog(
              title: Text('No Internet'),
              content: Text('Please check your internet connection.'),
            ),
          );
        }
        if (state == ConnectivityState.connected &&
            _isDialogDisplayed == true) {
          Navigator.of(context).pop();
          _isDialogDisplayed = false;
        }
      },
      builder: (context, state) {
        if (state == ConnectivityState.init) {
          return const CircularProgressIndicator();
        }

        return MaterialApp(     //   <-- This is causing problem
          home: Scaffold(                         
            body: state == ConnectivityState.connected
                ? const Center(
                    child: Text('Hello World'),
                  )
                : const Center(child: CircularProgressIndicator()),
          ),
        );
      },
    );
  }
}

cubit.file

import 'dart:async';

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

enum ConnectivityState { connected, disconnected, init }

class ConnectivityCubit extends Cubit<ConnectivityState> {
  final Connectivity _connectivity = Connectivity();
  StreamSubscription<ConnectivityResult>? _subscription;
  late Stream<ConnectivityResult> streamValue;
  ConnectivityCubit() : super(ConnectivityState.init) {
    streamValue = _connectivity.onConnectivityChanged;
    _subscription = _connectivity.onConnectivityChanged.listen((result) {
      if (result == ConnectivityResult.none) {
        emit(ConnectivityState.disconnected);
      } else {
        emit(ConnectivityState.connected);
      }
    });
  }

  checkConnectivity() async {
    final result = await _connectivity.checkConnectivity();
    if (result == ConnectivityResult.none) {
      emit(ConnectivityState.disconnected);
    } else {
      emit(ConnectivityState.connected);
    }
  }

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

我试着简单地用这种方式

return const MaterialApp(
          home: Scaffold(
              body: Center(
            child: Text('Hello World'),
          )),
        );

上面的代码解决了黑屏问题,但是它会显示Hello World几分之一秒,也就是说,因为BlocListener需要时间来建立对话框。为了克服这个问题,我尝试了上面的方法。虽然我有东西 Package 在MaterialApp里面,为什么我会看到黑屏?

4nkexdtk

4nkexdtk1#

您希望构建器部件处于检查状态,然后showDialog()

MyApp({super.key});
  bool _isDialogDisplayed = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
  body:  BlocConsumer<ConnectivityCubit, ConnectivityState>(
      listener: (context, state) {
        if (state == ConnectivityState.disconnected) {
          _isDialogDisplayed = true;
          showDialog(
            context: context,
            builder: (context) => const AlertDialog(
              title: Text('No Internet'),
              content: Text('Please check your internet connection.'),
            ),
          );
        }
        if (state == ConnectivityState.connected &&
            _isDialogDisplayed == true) {
          Navigator.of(context).pop();
          _isDialogDisplayed = false;
        }
      },
      builder: (context, state) {
        if (state == ConnectivityState.init) {
          return const CircularProgressIndicator();
        }
     else if(state == ConnectivityState.disconnected){
          _isDialogDisplayed = true;
          showDialog(
            context: context,
            builder: (context) => const AlertDialog(
              title: Text('No Internet'),
              content: Text('Please check your internet connection.'),
            ),
          );
        }
      },
     );
   );
  }
}

相关问题