Спрятать панель соединений inte rnet через пять секунд в Flutter

Question

Я новичок во Флаттере, и я смотрел видео на YouTube о добавлении панели проверки соединения inte rnet, но она исправлена ​​и не исчезает, как ее скрыть через указанное время.

Это панель подключения!

Builder(
    builder: (BuildContext context) {
      return OfflineBuilder(
        connectivityBuilder: (BuildContext context,
            ConnectivityResult connectivity, Widget child) {
          final bool connected =
              connectivity != ConnectivityResult.none;
          return Stack(
            fit: StackFit.expand,
            children: [
              child,
              Positioned(
                left: 0.0,
                right: 0.0,
                height: 32.0,
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  color:
                  connected ? Color.fromRGBO(46, 204, 113, 1) : Color.fromRGBO(231, 76, 60, 1),
                  child: connected
                      ?  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        "Online",
                        style: TextStyle(color: Colors.white),
                      ),

                    ],
                  )
                      : Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        "Offline",
                        style: TextStyle(color: Colors.white),
                      ),
                      SizedBox(
                        width: 8.0,
                      ),
                      SizedBox(
                        width: 12.0,
                        height: 12.0,
                        child: CircularProgressIndicator(
                          strokeWidth: 2.0,
                          valueColor:
                          AlwaysStoppedAnimation<Color>(
                              Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        },

      );
    },
  ),

Я поставил код, а это видео Я смотрел!

Может кто-нибудь изменить код, чтобы сделать это работает, как я хочу?

Answer 1

Вы можете скопировать и вставить полный код ниже
Вы можете обернуть Positioned с помощью Visibility и через некоторое время установить visible на false

фрагмент кода

_hideBar() {
    Timer(Duration(seconds: 5), () {
      setState(() {
        _visible = false;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _hideBar();
    });
  }

...

Visibility(
                visible: _visible,
                child: Positioned(
                  height: 32.0,  

рабочая демонстрация

полный код

import 'package:flutter/material.dart';
import 'package:flutter_offline/flutter_offline.dart';
import 'dart:async';

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  bool _visible = true;
  _hideBar() {
    Timer(Duration(seconds: 5), () {
      setState(() {
        _visible = false;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _hideBar();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Offline Demo"),
      ),
      body: OfflineBuilder(
        connectivityBuilder: (
          BuildContext context,
          ConnectivityResult connectivity,
          Widget child,
        ) {
          final bool connected = connectivity != ConnectivityResult.none;
          return Stack(
            fit: StackFit.expand,
            children: [
              child,
              Visibility(
                visible: _visible,
                child: Positioned(
                  height: 32.0,
                  left: 0.0,
                  right: 0.0,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 350),
                    color: connected ? Color(0xFF00EE44) : Color(0xFFEE4400),
                    child: AnimatedSwitcher(
                      duration: const Duration(milliseconds: 350),
                      child: connected
                          ? Text('ONLINE')
                          : Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text('OFFLINE'),
                                SizedBox(width: 8.0),
                                SizedBox(
                                  width: 12.0,
                                  height: 12.0,
                                  child: CircularProgressIndicator(
                                    strokeWidth: 2.0,
                                    valueColor: AlwaysStoppedAnimation<Color>(
                                        Colors.white),
                                  ),
                                ),
                              ],
                            ),
                    ),
                  ),
                ),
              ),
            ],
          );
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'There are no bottons to push :)',
            ),
            Text(
              'Just turn off your internet.',
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DemoPage(),
    );
  }
}