没有互联网连接时如何显示小吃店？答案

【问题标题】：How to Show snackbar when no internet connection?没有互联网连接时如何显示小吃店？
【发布时间】：2019-12-17 01:08:02
【问题描述】：

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

这是一个颤振的 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'), );
    }
  }
}

这是我展示小吃店的家

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

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

【问题讨论】：

您应该检查异步功能、蒸汽和 BLoC 模式。

标签： user-interface flutter dart

【解决方案1】：

它们是连接状态变化的侦听器，如包页面https://pub.dev/packages/connectivity 所示。


class MyClass extends StatefulWidget {

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

class _MyClassState extends State<MyClass> {

  var connectionStatus;

  @override
    initState() {
    super.initState();

    subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      // Got a new connectivity status!
      setState(() => connectionStatus = result);
    })
  }

  @override
  Widget build(BuildContext 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'), );
    }
  }

  // Be sure to cancel subscription after you are done
  @override
  dispose() {
    super.dispose();
    subscription.cancel();
  }

【讨论】：

【解决方案2】：

有一个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

【讨论】：