Flutter — скрытая нижняя панель приложений

Опубликовано: 9 Января, 2023

Нижняя панель приложений или нижняя панель навигации в основном используются в каждом приложении Android IOS. Нижняя панель навигации — это панель приложений, содержащая вкладки, которая используется для отображения большего количества страниц на одном экране. Мы собираемся скрыть нижнюю панель приложений при прокрутке вниз и показать ее при прокрутке вверх.

Что мы сделаем?

Мы покажем контейнер нижней панели с некоторой высотой, если мы прокрутим вверх, что означает, что нижняя панель отображается, или мы сделаем высоту 0, если мы прокрутим вниз, что означает, что нижняя панель скрыта, это будет простой подход.

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».

There is no need of package

Шаг 2: Создайте класс HiddenBottomBar и верните MaterialApp .

Dart

import "package:flutter/material.dart";
import "package:flutter/rendering.dart";
  
void main() => runApp(MaterialApp(
      home: HiddenBottomAppBar(),
    ));
//class hiddenBottomBar
class HiddenBottomAppBar extends StatefulWidget {
  const HiddenBottomAppBar({Key? key}) : super(key: key);
  
  @override
  HiddenBottomAppBarState createState() => new HiddenBottomAppBarState();
}
  
class HiddenBottomAppBarState extends State<HiddenBottomAppBar> {
   
  @override
  Widget build(BuildContext context) {
    return MaterialApp(    //MaterialApp
       
    );
  }
}

Шаг 3: Работа с MaterialApp

Мы собираемся использовать список изображений для прокрутки. Когда мы прокручиваем изображения, нижняя панель скрывается, а прокручивается снизу.

Контроллер прокрутки создается в методе init. Если направление прокрутки обратное , невидимая переменная становится ложной и показывается дно. когда направление прокрутки вперед , невидимая переменная становится истинной, а нижняя полоса скрыта.

Note – Include the images in the pubspec.yaml File, otherwise it will show an error.

Dart

_isVisible = true;  //isvisible variable is used like flag
   _HideBottomAppBarController = new ScrollController(); // create a ScrollController
   _HideBottomAppBarController.addListener(() {
     if (_HideBottomAppBarController.position.userScrollDirection ==
         ScrollDirection.reverse) {
       setState(() {   //if scrollcontroller value is reverse make the isvisible to false,
         _isVisible = false;
       });
     }
     if (_HideBottomAppBarController.position.userScrollDirection ==
         ScrollDirection.forward) {
       setState(() {//if scrollcontroller value is forward make the isvisible to true,
         _isVisible = true;
       });
     }
   });

Пример кода

Dart

import "package:flutter/material.dart";
import "package:flutter/rendering.dart";
  
void main() => runApp(MaterialApp(
      home: HiddenBottomAppBar(),
    ));
  
class HiddenBottomAppBar extends StatefulWidget {
  const HiddenBottomAppBar({Key? key}) : super(key: key);
  
  @override
  HiddenBottomAppBarState createState() => new HiddenBottomAppBarState();
}
  
class HiddenBottomAppBarState extends State<HiddenBottomAppBar> {
  late ScrollController _HideBottomAppBarController;
  var _isVisible;
  
  @override
  initState() {
    super.initState();
    _isVisible = true;
    _HideBottomAppBarController = new ScrollController();
    _HideBottomAppBarController.addListener(() {
      if (_HideBottomAppBarController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
        });
      }
      if (_HideBottomAppBarController.position.userScrollDirection ==
          ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
        });
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView(
          controller: _HideBottomAppBarController,
          children: [
            Text("Scroll Down Will Hide The BottomAppBar!"),
            Text("Scroll Up   Will Show The BottomAppBar!"),
            Divider(),
            Image.asset("assets/s1.png"),
            Divider(),
            Image.asset("assets/s2.png"),
            Divider(),
            Image.asset("assets/S4.png"),
          ],
        ),
        bottomNavigationBar: AnimatedContainer(
          duration: Duration(milliseconds: 50),
          height: _isVisible ? 60.0 : 0.0,
          child: _isVisible
              ? AnimatedContainer(
                  duration: Duration(milliseconds: 50),
                  height: _isVisible ? 60.0 : 0.0,
                  child: _isVisible
                      ? Container(
                          width: MediaQuery.of(context).size.width,
                          color: Colors.blue,
                          child: Center(
                            child: Text("Bottom AppBar"),
                          ),
                        )
                      : Container(
                          color: Colors.white,
                          width: MediaQuery.of(context).size.width,
                        ),
                )
              : Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                ),
        ),
      ),
    );
  }
}

Выход

Flutter Dart

Flutter — скрытая нижняя панель приложений

Что мы сделаем?

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Шаг 2: Создайте класс HiddenBottomBar и верните MaterialApp .

Dart

Шаг 3: Работа с MaterialApp

Dart

Пример кода

Dart

Выход

РЕКОМЕНДУЕМЫЕ СТАТЬИ