Простой способ скрыть виджет после некоторой продолжительности во Флаттере - PullRequest
Новая
       92

Простой способ скрыть виджет после некоторой продолжительности во Флаттере

0 голосов
/ 22 марта 2020

Я использовал библиотеку flutter_offline для отображения автономного и онлайн-сообщения. Проблема в том, что я хочу скрыть онлайн-сообщение через некоторое время. Я не могу найти способ удалить контейнер, когда статус подключен, но через некоторое время.

Ниже мой код: 

body: OfflineBuilder(
        connectivityBuilder: (
          BuildContext context,
          ConnectivityResult connectivity,
          Widget child,
        ) {
          final bool connected = connectivity != ConnectivityResult.none;
          return SingleChildScrollView(
            scrollDirection: Axis.vertical,
            padding: const EdgeInsets.all(0.0),
            child: Column(
              children: [
                AnimatedSwitcher(
                    duration: const Duration(milliseconds: 350),
                    child: connected
                        ? Container(
                            color: Colors.lightGreenAccent[400],
                            height: 25,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  'ONLINE',
                                  style: TextStyle(color: Colors.black),
                                ),
                              ],
                            ))
                        : Container(
                            color: Colors.red,
                            height: 25,
                            child: 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),
                                  ),
                                ),
                              ],
                            ),
                          )),
                child,
              ],
            ),
          );
        },

Ответы [ 2 ]

2 голосов
/ 22 марта 2020

Вы должны использовать Visibility и Future.duration, чтобы достичь этого. Оберните виджет, который вы хотите скрыть, с помощью виджета Visibility.

Невидимый (занимает место): 

Visibility(
  child: Text("Invisible"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: _visible, 
),

Ушел (не занимает места): 

Visibility(
  child: Text("Offline"), //Your widget is gone and won't take up space
  visible: _visible,
),

Чтобы скрыть виджет через некоторое время: 

@override
void initState() {
  super.initState(); //when this route starts, it will execute this code
  Future.delayed(const Duration(seconds: 5), () { //asynchronous delay
    if (this.mounted) { //checks if widget is still active and not disposed
      setState(() { //tells the widget builder to rebuild again because ui has updated
        _visible=false; //update the variable declare this under your class so its accessible for both your widget build and initState which is located under widget build{}
      });
    }
  });
}
2 голосов
/ 22 марта 2020

Создайте переменную bool поверх вашего класса. когда состояние соединения изменится, запустите отсроченный таймер и используйте пустой контейнер, чтобы через некоторое время сделать его невидимым. 

bool _isContainerVisible = true; // in top of your class

body: OfflineBuilder(
    connectivityBuilder: (
      BuildContext context,
      ConnectivityResult connectivity,
      Widget child,
    ) {
      final bool connected = connectivity != ConnectivityResult.none;
      if(connnected){
        Future.delayed(Duration(seconds: 3).then((v){
         if(this.mounted)
          setState((){
          _isContainerVisible = false;
         });
        });

      }
      return SingleChildScrollView(
        scrollDirection: Axis.vertical,
        padding: const EdgeInsets.all(0.0),
        child: Column(
          children: [
            AnimatedSwitcher(
                duration: const Duration(milliseconds: 350),
                child: connected
                    ? _isContainerVisible ?Container(
                        color: Colors.lightGreenAccent[400],
                        height: 25,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              'ONLINE',
                              style: TextStyle(color: Colors.black),
                            ),
                          ],
                        )):Container()
                    : Container(
                        color: Colors.red,
                        height: 25,
                        child: 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),
                              ),
                            ),
                          ],
                        ),
                      )),
            child,
          ],
        ),
      );
    },
...