user-interface - 没有互联网连接时如何显示 snackbar ？

Question

我第一次尝试构建我的移动应用程序。如果没有互联网连接，如何显示 Snackbar？

这是一个 flutter apss，具有连接性:^0.4.3+1 包

这是我的连接状态

class NetworkSensitive extends StatelessWidget {
  final Widget child;


  NetworkSensitive({
    this.child,
  });

  @override
  Widget build(BuildContext context) {
    var connectionStatus = Provider.of<ConnectivityStatus>(context);

    if (connectionStatus == ConnectivityStatus.WiFi) {
      return child;
    }

    if (connectionStatus == ConnectivityStatus.Cellular) {
      return Container(child: Text('Koneksi Mobile'), );
    }

    if (connectionStatus == ConnectivityStatus.Offline) {
      return Container(child: Text('Koneksi Offline'), );
    }
  }
}

这是我用来展示 snackbar 的家

import 'package:flutter/material.dart';


class HomeView extends StatefulWidget {
  static const int CounterMargins = 60;

  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
        backgroundColor: backgroundColor,
        body: Column(children: [
         NetworkSensitive(child: _buildSimpleSnackBar(),

  }

   _buildSimpleSnackBar() {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: MaterialButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text("your'e Offline"),
          );
          _scaffoldKey.currentState.showSnackBar(snackBar);
        },
        color: Colors.blue,
        child: Text(
          "Show Simple SnackBar",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

该代码用于检查连接并在按下按钮后显示 snackbar ，但是如何在不按下按钮的情况下显示它

Answer 1

有一个listener用于连接状态更改，如包页面中所示。

对于 toast 消息，我使用 FlutterToast包裹:

import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class HomeView extends StatefulWidget {

  @override
  _HomeViewState createState() => _HomeViewState();

}
class _HomeViewState extends State<HomeView> {

  var subscription;
  var connectionStatus;

  @override
  void initState() {
    subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {         
      setState(() => connectionStatus = result );
    });
    checkInternetConnectivity();
    checkLoginStatus();
    super.initState();
  }

  checkInternetConnectivity() {
    if (connectionStatus == ConnectivityResult.none) {
      return Fluttertoast.showToast(
          msg: "Check your internet connection",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.TOP,
          timeInSecForIosWeb: 1,
          backgroundColor: Colors.red,
          textColor: Colors.white,
          fontSize: 16.0
      );
    }
  }

  @override
  dispose() {
    super.dispose();
    subscription.cancel();
  }

  @override
  Widget build(BuildContext context) {

    return Container();

  }
}

连接包还提供移动和 wifi 网络更改。只需使用 ConnectivityResult.mobile 和 ConnectivityResult.wifi