Flutter : toggle button을 네비게이션 바처럼 만들어보자!

koeyhoyh·2022년 7월 3일
2

App_Flutter

목록 보기
9/19

해당 예제처럼 화면을 만들어보기 위해서는 어떻게 해야 할까???

  • 2번, 3번을 클릭하면 원래 있던 focus가 풀리고 "2와 둘", "3과 셋" 이 화면에 출력되어야 한다.

toggle button으로 네비게이션 바를 어떻게 만든다는 거에요??

처음에는, 직접 네비게이션 바를 사용해서 만들려고 했었다. 그런데 여러 테마와 모양을 살펴봐도, 해당 예제와 비슷한 네비게이션 바를 찾을 수 없었다.

그래서 이리저리 찾다가 본 것이 Toggle Button 이다.

토글 버튼을 이용하면, 네비게이션 바의 정해진 디자인보다 더 자유롭게 커스텀이 가능하다고 느꼈다. 네비게이션 바와 가장 비슷하게 행동할 수 있고, 형태가 가장 비슷한 것도 토글 버튼이다. 토글 버튼을 클릭하면, 화면을 전환하는 방식으로 만들어 토글 버튼을 네비게이션 바와 같이 느끼게 만들 것이다.


디자인은?

토글 버튼의 전체 소스코드이다.

Container(
  margin: EdgeInsets.all(30),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(
                        Radius.circular(5),
                      ),
                    ),
                    child: ToggleButtons(
                      disabledColor: Colors.white,
                      renderBorder: false,
                      borderRadius: BorderRadius.circular(10),
                      borderWidth: 0,
                      borderColor: Colors.white,
                      selectedBorderColor: Colors.white,
                      fillColor: Colors.white,
                      color: Colors.grey,
                      selectedColor: Colors.black,
                      children: [
                        const Padding(
                            padding: EdgeInsets.symmetric(horizontal: 35),
                            child: Text(
                              '1',
                              style: TextStyle(
                                fontFamily: 'summer',
                                fontSize: 24,
                              ),
                            )),
                        const Padding(
                          padding: EdgeInsets.symmetric(horizontal: 35),
                          child: Text(
                            '2',
                            style: TextStyle(
                              fontFamily: 'summer',
                              fontSize: 24,
                            ),
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(horizontal: 35),
                          child: Text(
                            '3',
                            style: TextStyle(
                              fontFamily: 'summer',
                              fontSize: 24,
                            ),
                          ),
                        ),
                      ],
                      isSelected: isSelected,
                      onPressed: (index) {
                        setState(() {
                          isSelected[index] = !isSelected[index];
                          if (isSelected[0]) {
                            Navigator.pushNamed(context, '/');
                            isSelected[1] = false;
                            isSelected[2] = false;
                          } else if (isSelected[1]) {
                            Navigator.pushNamed(context, '/first');
                            isSelected[0] = false;
                            isSelected[2] = false;
                          } else if (isSelected[2] && flag != 3) {
                            Navigator.pushNamed(context, '/second');
                            isSelected[0] = false;
                            isSelected[1] = false;
                          }
                        });
                      },
                    ),

일단, 버튼과 버튼 사이의 border을 없애주고, 배경과 선택되었을 때 색깔 등을 모두 흰색으로 주었다. 그리고 margin을 주어 바닥과 띄워지게 해주었다. 당연히 텍스트 사이의 margin도 주었으며, 선택되지 않았을 때의 color는 grey, selected color 는 black으로 주어서 1, 2, 3이 강조되도록 만들었다.


화면 전환은?

를 이용했다.

화면을 세 개 만들고,

toggle button은 index가 true, false로 작동하는 방식이어서, if - else 문으로 간단히 구현했다.

					  onPressed: (index) {
                        setState(() {
                          isSelected[index] = !isSelected[index];
                          if (isSelected[0]) {
                            Navigator.pushNamed(context, '/');
                            isSelected[1] = false;
                            isSelected[2] = false;
                          } else if (isSelected[1]) {
                            Navigator.pushNamed(context, '/first');
                            isSelected[0] = false;
                            isSelected[2] = false;
                          } else if (isSelected[2] && flag != 3) {
                            Navigator.pushNamed(context, '/second');
                            isSelected[0] = false;
                            isSelected[1] = false;
                          }
                        });

구현하고 생각해본 문제점은?

Navigator.pushNamed를 이용한다면 결국 스택에 차근차근 쌓여서, 나중에 뻥 터져버리는 것이 아닐까…? 라는 생각을 했다.

해당 방법은 스택에 차근차근 쌓이고 있는 것이 맞았고, popAndPushNamed(context, screen) 라는 해결방법을 찾았다!! → 수정완료!


빌드 결과




참고 :
토글 버튼 배경색을 바꾸어주려면?
오늘의 위젯: 토글버튼
토글버튼: 딥다이브

profile
내가 만들어낸 것들로 세계에 많은 가치를 창출해내고 싶어요.

0개의 댓글