Flutter — скрытая нижняя панель приложений
Нижняя панель приложений или нижняя панель навигации в основном используются в каждом приложении 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, ), ), ), ); } } |