해당 예제처럼 화면을 만들어보기 위해서는 어떻게 해야 할까???
- 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이 강조되도록 만들었다.
화면 전환은?
Navigator.pushNamed()
를 이용했다.
화면을 세 개 만들고,
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) 라는 해결방법을 찾았다!! → 수정완료!
빌드 결과
