240612 TIL

① 배운 것

---

디바이스 높이가 작을때 피그마에 있는 대로 패딩을 잡으면 화면이 짤림 > 디자이너와 상의해 패딩을 좀 줄이고 고정된 패딩이 필요 없는 부분은 화면에 맞게 유연하게 패딩이 잡히도록 수정

---

Flutter 탭 화면, 이동 기록까지 깔끔하게 관리하는 비법: StatefulShellRoute!

혹시 Flutter로 탭 화면이 있는 앱을 만들 때, 탭을 왔다 갔다 하면 이전에 보고 있던 화면이 사라져서 불편했던 적 있으신가요?
예를 들어 쇼핑 앱에서 상품 상세 페이지를 보다가 다른 탭으로 이동했다가 다시 돌아오면, 상품 상세 페이지가 아니라 홈 화면이 나타나는 경험 말이죠!
이런 문제는 Flutter의 라우팅 시스템을 제대로 이해하고 활용하면 간단하게 해결할 수 있습니다. 바로 StatefulShellRoute를 사용하는 것이죠!

왜 StatefulShellRoute가 필요할까?

Flutter의 기본 라우팅 시스템은 앱 전체에 대해 하나의 네비게이션 스택을 사용합니다. 탭 화면 간 이동도 이 스택에 기록되기 때문에, 다른 탭으로 이동하면 이전 탭의 이동 기록이 사라지게 됩니다.
하지만 StatefulShellRoute를 사용하면 각 탭 화면이 독립적인 네비게이션 스택을 갖게 됩니다.
덕분에 탭 화면 간 이동 시에도 각 탭의 이동 기록이 유지되어, 사용자가 탭을 왔다 갔다 해도 이전에 보고 있던 화면을 그대로 볼 수 있게 됩니다.

StatefulShellRoute 작동 방식

StatefulShellRoute는 각 탭 화면을 StatefulShellBranch라는 독립적인 브랜치로 관리합니다. 각 브랜치는 자신의 네비게이션 스택을 가지고 있어, 다른 브랜치로 이동해도 이전 브랜치의 이동 기록이 그대로 유지됩니다.

StatefulShellRoute.indexedStack(
  builder: (context, state, navigationShell) {
    // ... 탭 바, 네비게이션 드로어 등 앱의 전체적인 UI 구성
  },
  branches: [
    StatefulShellBranch(
      routes: [
        GoRoute(path: '/home', builder: (context, state) => HomeScreen()),
        // ... 홈 화면 관련 경로들
      ],
    ),
    StatefulShellBranch(
      routes: [
        GoRoute(path: '/category', builder: (context, state) => CategoryScreen()),
        // ... 카테고리 화면 관련 경로들
      ],
    ),
    // ... 다른 탭 화면들
  ],
)

장점 정리

사용자 경험 향상: 탭 화면 이동 시 이전 화면이 사라지지 않아 사용자가 앱을 더욱 편리하게 이용할 수 있습니다.
개발 효율 증가: 각 탭 화면을 독립적으로 관리할 수 있어 코드가 깔끔해지고 유지보수가 용이합니다.

마무리

StatefulShellRoute를 사용하면 탭 화면이 있는 Flutter 앱의 사용자 경험과 개발 효율을 동시에 높일 수 있습니다.

---

어제 버그수정할때 설계잘못 vs 테이프처럼 덕지덕지 를 고민했는데 후자가 너무 싫어서 전자로 해결했다. 굿.

② 회고 (restropective)
버그를 수정했는데 모든 버그가 수정되었는지 모르겠다.
남아있는 버그가 있다면 또 고쳐야지머...
그래도 매번 '어떻게 하면 동료가 혹은 미래의 내가 이 코드를 더 쉽게 이해할까. 더 깔끔하게 코드를 짤까'를 고민하면서 코드를짜니까 훨씬 코드 퀄리티가 좋은것같다. 아직까지 부족하지만..

③ 개선을 위한 방법