[TIL] 20250819 - GoRouter,Responsive UI

GoRouter

실습코드

https://github.com/FEgguri/flutter_gorouter

1. 특징

• 선언형 라우팅: URL 경로 기반으로 라우트 스택 관리
• Path Parameter: /post/:id → /post/1 같은 형태로 사용
• Query Parameter: /search?text=abc 형태 지원
• 웹 새로고침 시에도 파라미터 유지

---

2. 기본 설정

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
      routes: [
        GoRoute(
          path: 'post',
          builder: (context, state) => const PostListPage(),
          routes: [
            GoRoute(
              path: ':id',
              builder: (context, state) {
                final id = int.tryParse(state.pathParameters['id'] ?? '');
                return id == null ? const ErrorPage() : PostDetailPage(id: id);
              },
            ),
          ],
        ),
        GoRoute(
          path: 'search',
          builder: (context, state) {
            final text = state.uri.queryParameters['text'] ?? '';
            return text.isEmpty ? const ErrorPage() : SearchPage(text: text);
          },
        ),
      ],
    ),
  ],
  initialLocation: '/',
  errorBuilder: (context, state) => const ErrorPage(),
);

---

3. MaterialApp 연동

MaterialApp.router(
  routerConfig: router,
);

---

4. 페이지 이동

// Path Parameter
context.go('/post/123');

// Query Parameter
context.go(Uri(path: '/search', queryParameters: {'text': 'abc'}).toString());
context.go('/search?text=abc');

// Extra 객체 전달
context.go('/123', extra: user);

---

👉 요약
GoRouter는 경로 기반 네비게이션 관리를 단순화해주며,
path parameter, query parameter, extra 방식으로 유연하게 데이터 전달 가능하다.
context.go는 URL 스택 관리 기반, context.push는 단순 스택 추가라서 일반적으로 go 사용 권장.

 

 

반응형 UI 

실습코드 https://github.com/FEgguri/flutter_ui

• 화면 크기나 기기(모바일, 태블릿, PC)에 따라 UI를 자동으로 재배치하는 방식
• 태블릿, 폴더블 폰, PC 대응 때문에 중요해짐

---

Breakpoints (가로 기준)

• ≥1024 : PC
• ≥768 : 태블릿
• ≥600 : 소형 태블릿 (Z폴드 등)
• ≥480 : 모바일 가로
• <480 : 모바일 세로

---

구현 방법

(1) LayoutBuilder 사용

부모 위젯 크기를 기준으로 UI 변경

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 768) {
          return HomeBodyTablet();       // 태블릿
        }
        if (constraints.maxWidth >= 600) {
          return HomeBodyTabletSm();     // 소형 태블릿
        }
        if (constraints.maxWidth >= 480) {
          return HomeBodyLandscape();    // 모바일 가로
        }
        return HomeBody();               // 모바일 세로
      },
    );
  }
}

---

(2) MediaQuery 사용

디바이스 전체 화면 크기를 기준으로 UI 변경

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.sizeOf(context);
    double deviceWidth = size.width;

    if (deviceWidth >= 768) {
      return HomeBodyTablet();
    }
    if (deviceWidth >= 600) {
      return HomeBodyTabletSm();
    }
    if (deviceWidth >= 480) {
      return HomeBodyLandscape();
    }
    return HomeBody();
  }
}

---

4. 차이점

항목	LayoutBuilder	MediaQuery
기준	부모 위젯 크기	디바이스 전체 크기
장점	세밀한 위젯 배치 조정	전체 화면 기준 분기 처리
사용	위젯 내부 레이아웃	페이지 단위 UI

---

👉 정리: 부모 위젯 크기 기준이면 LayoutBuilder, 전체 화면 크기 기준이면 MediaQuery 사용