개발/Flutter 메모

개발/Flutter 메모

Flutter BottomNavigationBar 유지하는 방법 총 정리

BottomNavigationBar를 유지하는 거의 모든 방법을 찾아보고 적용해보았다. 대부분의 경우 특정 상황에서 문제가 발생하게되고, 최종적으로 테스트한 모든 상황에서 문제가 발생하지않는 방법을 찾아냈기 때문에 정리해보고자 한다. 1. IndexedStack + Navigator Tab끼리의 상태 유지를 위해 IndexedStack을 사용하고, 하나의 Tab에서 Routing 시 BottomNavigation을 유지하기 위해 Navigator를 사용하는 방법이다. [코드] 더보기 import 'dart:math'; import 'package:flutter/material.dart'; void main() => runApp(const TestApp()); class TestApp extends Sta..

개발/Flutter 메모

Flutter BottomNavigationBar 유지하기

목차 persistent_bottom_nav_bar 라이브러리 직접 구현하기 기존 코드 Navigator 추가하기 WillPopScope 추가하기 IndexedStack 추가하기 AppBar 구현하기 ui를 구성하다보면 BottomNavigationBar를 유지한 채로 다른 페이지로 라우팅 하고 싶은 경우가 있다. '플라토'탭에서 강좌를 이름을 눌러 강좌 페이지로 이동하고 싶은데 Navigator.push를 이용하여 페이지를 불러올 경우 위 그림과 같이 BottmNavigationBar가 사라지게 된다. 임시방편으로 모든 페이지에 BottomNavigationBar를 추가하게 될 경우, 에니메이션을 제거한다고 하더라도 정상적으로 네비게이션바가 동작하지 않게 된다. 해결방법으로는 직접 구현하는 방법과 라이..

피곤한투티
'개발/Flutter 메모' 카테고리의 글 목록