[flutter] 플러터의 useRoute 훅(hook)을 이용한 라우터 매개변수 접근

14 Dec 2023

flutter

플러터(Flutter)에서는 useRoute 훅(hook)을 이용하여 라우터(route)에 전달된 매개변수에 쉽게 접근할 수 있습니다. 이를 통해 화면 간 데이터 전달을 간단하게 처리할 수 있습니다.

useRoute 훅이란?

useRoute 훅은 플러터 2.5.0 버전부터 도입된 것으로, 현재 활성화된 라우터에 대한 정보를 제공합니다. 이를 통해 라우터의 매개변수나 설정에 접근할 수 있습니다.

아래는 useRoute 훅을 이용하여 라우터의 매개변수에 접근하는 간단한 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final route = useRoute();
    final arguments = route.settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text('Details Screen'),
      ),
      body: Center(
        child: Text('Parameter: $arguments'),
      ),
    );
  }
}

위의 예제에서 useRoute 훅을 이용하여 라우터의 매개변수를 변수 arguments에 할당한 후, 화면에 출력하는 예제를 볼 수 있습니다.

이제, 위의 예제를 통해 useRoute 훅을 이용하여 라우터 매개변수에 쉽게 접근하는 방법에 대해 알아보았습니다. 다음번에는 실제 앱에서 이를 활용하는 방법에 대해 더 자세히 알아볼 것입니다.

더 많은 정보를 보려면 플러터 공식 문서를 참고하세요.