bottomNavigationBar(3)
-
[003] 플러터 (Flutter) Tip - Scaffold, Appbar, Drawer, BottomNavigationBar, Routing (3페이지 구현 실습)
안녕하세요~ totally 개발자입니다. 아래처럼 Home, Search, Settings 페이지를 구성하고 Home이 아닌 Search와 Settings에서는 좌측 상단의 drawer 메뉴를 보이지 않게 하고 하단 메뉴의 아이콘을 클릭하면 각 페이지로 이동할 수 있는 간단한 실습을 해보도록 하겠습니다. Step 1: 시작하기에 앞서 구현 방법은 여러 가지로 꼭 해당 방법으로 구현하실 필요는 없으시고 라우팅 방법도 필자처럼 하실 수도 있고 Navigator.push, pop 등을 활용해서 하실 수도 있는 등 구현 상황에 따라 다르게 적용하셔야 함을 미리 말씀을 드립니다. 먼저 아래처럼 5개의 파일들을 구성합니다. Step 2: routeObserver를 구성을 해줍니다. 다만 이 실습에서는 이 overr..
2023.05.21 -
[002] 플러터 (Flutter) Tip - 키보드 입력시 BottomNavigationBar을 자판 위에 위치시키는 방법, 밖의 화면 탭 했을 때 키보드 사라지게 하는 방법
안녕하세요~ totally 개발자입니다. 오늘은 제목 그대로 키보드 입력시에 bottomNavigationBar을 키보드 자판 위에 위치시킬 수 있게 하고 또 밖의 화면 탭하면 키보드 자판을 다시 사라지게 하는 방법에 대해서 공유합니다. Step 1: 아래처럼 controller, focusNode 변수를 선언합니다. Step 2: 아래처럼 GestureDetector와 Scaffold를 2번 추가해줍니다. Step 3: 다음처럼 구성해줍니다. Step 4: 테스트한 화면입니다.
2023.05.03 -
[026] 플러터 (Flutter) 배우기 - bottomNavigationBar (화면 하단 네비게이션바 배치)
안녕하세요~ totally 개발자입니다. 오늘 다룰 부분은 Scaffold 위젯에 있는 bottomNavigationBar 속성을 이용하여 화면 하단 네비게이션 바를 배치해보는 것에 대해 살펴보도록 하겠습니다. 보통 인스타그램, 카카오톡 등 요즘 어플들을 보면 화면 하단에 네비게이션바가 위치하고 있는 것을 알 수 있습니다. 대부분의 이유로는 화면 하단에 있기 때문에 한 손가락으로 쉽게 누르면서 조작할 수 있다는 장점이 있습니다. 예제로 바로 들어가보도록 하겠습니다. Step1: 9번째 줄에 with SingleTickerProviderStateMixin을 추가하고 10, 11번째 줄에 TabController와 tab을 선택했을 때 선택한 인덱스 값을 담을 수 있는 integer 변수를 하나 선언해줍니다..
2023.01.27