[flutter] 플러터 훅 위젯을 사용한 라우팅 처리 방법

21 Dec 2023

flutter

플러터에서는 훅(Hook) 위젯을 사용하여 간단하고 효과적인 라우팅 처리를 수행할 수 있습니다. 이번 블로그에서는 플러터 훅 위젯을 사용하여 라우팅을 어떻게 처리하는지 알아보겠습니다.

플러터 훅(Hook) 위젯이란?

훅(Hook) 위젯은 선택한 페이지로 이동이나 뒤로 가기와 같은 기본적인 라우팅 기능을 구현하는 데 도움이 되는 간단한 래퍼(wrapper) 위젯입니다. 플러터의 hooks_riverpod 패키지를 사용하면 편리하게 훅 위젯을 구현 및 관리할 수 있습니다.

훅(Hook) 위젯을 사용한 라우팅 처리 방법

다음은 훅(Hook) 위젯을 사용한 기본적인 라우팅 처리 방법입니다.

1. 필요한 패키지를 설치합니다.

dependencies:
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^0.14.0

2. 훅(Hook) 위젯을 사용하여 라우팅 처리를 구현합니다.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

final selectedTabIndexProvider = StateProvider((ref) => 0);

void main() {
  runApp(ProviderScope(
      child: MaterialApp(
    home: Scaffold(
      body: HookBuilder(builder: (context) {
        final selectedTabIndex = useProvider(selectedTabIndexProvider);
        return IndexedStack(
          index: selectedTabIndex.state,
          children: [
            // 페이지 1 위젯,
            // 페이지 2 위젯,
            // 페이지 3 위젯,
          ],
        );
      }),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: selectedTabIndex.state,
        onTap: (index) => selectedTabIndex.state = index,
      ),
    ),
  )));
}

3. 코드를 실행하여 기능을 테스트합니다.

위 코드를 실행하면 간단한 라우팅이 구현된 애플리케이션이 실행될 것입니다. BottomNavigationBar를 터치하여 선택한 페이지로 이동하고, 뒤로 가기 버튼을 누르면 이전 페이지로 돌아갈 수 있습니다.

플러터 훅(Hook) 위젯을 사용하면 라우팅 처리를 간편하게 구현할 수 있습니다. 훅(Hook) 위젯을 활용하여 복잡한 라우팅 로직도 간단하게 처리할 수 있으니 다양한 애플리케이션 개발 시 활용해보시기 바랍니다.

결론

이번 블로그에서는 플러터 훅(Hook) 위젯을 사용한 라우팅 처리 방법에 대해 알아보았습니다. 플러터 훅(Hook) 위젯을 활용하면 간편하게 기본적인 라우팅 처리를 구현할 수 있으며, 코드의 가독성을 높일 수 있습니다. 더 많은 프로젝트에서 플러터 훅(Hook)을 활용하여 효율적인 애플리케이션을 구축해보시기 바랍니다.

자세한 내용은 해당 문서를 참고하시기 바랍니다.

참고 문헌