목록BottomNavigationBar (3)

개발노트

81. [Flutter] bottomNavigationBar 로 화면 전환하는 화면에서 미니 플레이어 구현하기 (AnimatedContainer,PopScope)

PopScope의 핵심은 뒤로가기 버튼의 순기능인 뒤로가기를 막고 다른 액션을 줄 수 있다는 것이다.이 위젯을 이용하여 뒤로가기 버튼을  Player의 크기가 작아지는 버튼으로 사용해본다. AnimatedContainer의 핵심은 특정 값을 분기를 두고 컨테이너의 크기나 다른 번동사항이 애니메이션으로 편하게 적용된다는 점이다. 이로 크기를 변동시켜본다.작아졌다 커졌다 하는 Player 소스 (GetX의 GetBuilder 사용함)import 'dart:math';import 'package:flutter/material.dart';import 'package:get/get.dart';class MiniPlayerController extends GetxController { late bool isMin..
앱 개발/Flutter 2024. 9. 25. 23:46
73. [Flutter] GoRoute, Stack, OffStage 조합으로 bottomNavigationBar 화면 만들기

bottomNavigationBar을 만들 때 GoRoute, Stack, OffStage 조합을 사용하는 이유는 다음과 같습니다. GoRoute: GoRoute는 일반적으로 네비게이션 기능을 제공하는 라우팅 패키지로 이를 사용하여 앱의 다양한 화면 간의 이동을 관리할 수 있습니다. 특히, Web에서의 동작을 path와 같은 URL로 처리할 수 있습니다. Stack: Stack 위젯은 위에서 아래로 겹쳐진 위젯을 나타냅니다. 여러 화면을 겹쳐서 표시하고, 사용자가 뒤로가기 버튼을 눌렀을 때 이전 화면으로 돌아가게 합니다. 이것은 사용자 경험을 향상시키고, 앱의 내비게이션을 관리하는 데 도움이 됩니다. OffStage: OffStage 위젯은 화면에서 숨겨진 상태로 위젯을 유지합니다. 이를 통해 앱의 여러..
앱 개발/Flutter 2024. 3. 7. 15:47
6. [Flutter] 앱 하단에 화면전환 버튼 만들기(with BottomNavigationBar)

BottomNavigationBar 을 사용하여 화면 하단에 Tap 버튼을 두고 위젯(화면)을 전환시키는 기능을 만들어 보겠습니다. 전환되는 화면으로 사용할 Widget을 views라는 폴더를 두고 각각 생성해 줬습니다. 전환되는 것만 확인할 거라서 Text('화면명') 위젯만 추가하였습니다. main.dart import 'package:flutter/material.dart'; import 'package:flutter_tonetrainer/views/page_dump.dart'; import 'package:flutter_tonetrainer/views/page_reward.dart'; import 'package:flutter_tonetrainer/views/page_theory.dart'; vo..
앱 개발/Flutter 2023. 3. 30. 16:14
이전 Prev 1 Next 다음