3일차: 스틸 UI/하단 탐색 모음(사용자 지정)

맞춤 하단 내비게이션 바를 완성하여 가장 큰 바위를 이동시킨 것 같습니다. 화면 너비와 높이가 BottomNavigationBar() //kBottomNavigationBarHeight인 컨테이너 내부의 버튼으로 하단 내비게이션 바를 만들 수 있었습니다. 하지만 저는 Flutter를 처음 접했고 배울 것이 많기 때문에 내장 Flutter BottomNavigationBar 위젯이나 외부 패키지를 사용하는 것처럼 위젯(및 아마도 flutter 패키지)을 만들어서 사용할 생각이었습니다.

최종 결과는 Flutter의 BottomNavigationBar와 같지 않지만 정확히 동일한 작업을 수행하며 유일한 차이점은 코드 구현과 이벤트 처리 방법입니다. 또한 언급하는 것을 잊기 전에 CustomButton 위젯을 다음에서 변경했습니다.



재미있는 점은 CustomBottomNavigationBar은 클릭과 상호작용하지 않는다는 것입니다. 기본적으로 container에 CustomButton 위젯이 있고, 클릭과 상호작용하는 것은 CustomButton 자체이므로 CustomBottomNavigationBar(childeren: _items)에서 각 항목에는 고유한 onPressed()이 있으며 VoidCallback이기 때문에 아무 것도 반환하지 않습니다. 일반적인 BottomNavigatoinBar 과 같은 인수는 onPressed(index) => ... 내 BottomNavigatoinBar 에서 현재 하단 탐색 모음의 인덱스를 나타내는 정수를 반환합니다. 이것이 내가 인덱스를 얻는 방법입니다.

onPressed: () {
          setState(() {
            _currentIndex = 1; // setting the index manually
          // setting the buttons bool values to appear as one 
         // button is pushed down at a time

            tapStatus[_currentIndex] = true; // the clicked button

            tapStatus[0] = false; 
            tapStatus[2] = false;
            _screenController.jumpToPage(_currentIndex);
          });
        },

CustomBottomNavigationBar 수신 클릭 이벤트를 만드는 데 더 많은 시간을 낭비하고 싶지 않았습니다. 나중에 변경 사항을 적용할 수 있습니다.

check out my custom bottom navigation bar