时间戳

首页 > 解决方案 > 没有互联网连接时如何显示小吃店？

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

问题描述

我第一次尝试构建我的移动应用程序。如果没有互联网连接，如何显示 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),
        ),
      ),
    );
  }
}

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

标签： user-interfaceflutterdart

解决方案

如包页面所示，有一个连接状态更改的侦听器。

对于 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

推荐阅读