[Flutter] Router 세팅하기

드디어 기획이 픽스되고, 페이지 라우팅 세팅을 먼저 하게 되었다.
항상 페이지 만들면서 컴포넌트 같이 만들고 연동하고 했어서 새로운 경험이었다.

팀장님이 피그마로 목업을 만드셔서(점점 피그마 실력이 느셔서 엄청 놀랐닼ㅋㅋㅋㅋㅋ 뭔데 점점 퀄이 좋아져) 그거랑 drow.io에 있는 와이어프레임 보면서 빈 페이지를 만들었다.

그리고 go_router를 사용해서 라우터 관리를 함.

처음에는 그냥

class AppPaths {
  static const String home = '/';
  ...
}

이런식으로 스태틱하게 나열만 하다가 막상 딱 사용하려고 보니까 너무 귀찮았다.

GoRouter(
  path: '${AppPaths.myPage}/${AppPath.info}/${AppPath.address}'
)

뭐 이런식으로 끝없이 경로가 길어졌기 때문....
쓰기도 불편하고 비효율이고 저렇게 하려면 굳이 AppPaths를 정의해서 쓸 이유가 없을 것 같았다. 코드를 더쳐야함;;;
파악도 바로바로 안되고...

그래서 RootPath랑 SubPath를 분리해서 정의하고,
RootPath는 AppPath에서 생성되도록 했다.
메서드처럼 AppPaths.myPate.info 이런식으로 쓸 수 있게 하고싶었음.

1. Path 정의

폴더이름을 어떻게 할까 고민 정말 많이했는데...
일단 생각나는대로 구성했다.

router/static_paths

class RootPath

class RootPaths {
  static const info = '/info';
  static const myPage = '/myPage';
}

2. Root Path Class 정의

class InfoPath {
  final String _basePath = '${RootPaths.myPage}${RootPaths.info}';
  late final AddressPath address;

  String get base => _basePath;

  InfoPath() {
    address = AddressPath(_basePath);
  }
}

3. Root Path 생성

class AppPaths {
  static InfoPath info = InfoPath();
}

4. 사용

  InkWell(
    onTap: () => context.push(AppPaths.info.base),
    child: const ListTile(
      title: Text('홍길동'),
      trailing: Icon(Icons.navigate_next),
    ),
  ),

이런식으로 하면 된다.
오타도 방지하고, 관리도 쉽고, 가독성도 좋고... 여러모로 잘 한 선택이었던 것 같다.