[flutter] Riverpod를 사용하여 앱의 가로/세로 모드 전환을 관리하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

가로/세로 모드 전환은 앱의 사용자 경험을 향상시키기 위해 중요한 요소입니다. Flutter에서 Riverpod를 사용하여 가로/세로 모드 전환을 관리하는 방법을 살펴보겠습니다.

먼저, Riverpod를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

다음으로, main.dart 파일에서 Riverpod를 초기화하고 가로/세로 모드 변경에 사용할 Provider를 생성합니다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final orientationProvider = Provider<Orientation>((ref) {
  return MediaQuery.of(ref.watch(navigatorKey).currentContext!).orientation;
});

final navigatorKey = GlobalKey<NavigatorState>();

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: OrientationProvider(
        child: HomePage(),
      ),
    );
  }
}

class OrientationProvider extends StatefulWidget {
  final Widget child;

  const OrientationProvider({required this.child});

  @override
  _OrientationProviderState createState() => _OrientationProviderState();
}

class _OrientationProviderState extends State<OrientationProvider> {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (context, orientation) {
        context.read(orientationProvider).state = orientation;

        return widget.child;
      },
    );
  }
}

class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final orientation = watch(orientationProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text("가로/세로 모드 변경"),
      ),
      body: Center(
        child: Text(
          "현재 가로/세로 모드: $orientation",
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

위의 코드에서 OrientationProvider 위젯은 OrientationBuilder를 사용하여 현재 가로/세로 모드를 감지하고 orientationProvider를 업데이트합니다. HomePage 위젯에서 orientationProvider를 사용하여 현재 가로/세로 모드를 표시합니다.

이제 앱을 실행하면 HomePage에서 현재 가로/세로 모드가 표시됩니다. 모드가 변경되면 자동으로 업데이트됩니다.

이와 같이 Riverpod를 사용하여 Flutter 앱의 가로/세로 모드 전환을 관리할 수 있습니다. Riverpod는 상태 관리를 쉽게 만들어주는 강력한 도구이며, 앱의 사용자 경험을 향상시키는 데 유용하게 사용될 수 있습니다.

더 자세한 정보를 원하시면 Riverpod 공식 문서를 참조해주세요.