[flutter] 플러터 프로바이더를 활용한 페이지 전환

14 Dec 2023

flutter

플러터(Flutter) 앱에서는 화면 간 전환을 위해 네비게이션을 사용합니다. 플러터의 provider 패키지를 사용하여 전역적으로 상태를 관리하고, 페이지 전환을 처리하는 방법에 대해 알아보겠습니다.

프로바이더란?

플러터의 provider 패키지는 전역적인 상태 관리를 위한 라이브러리입니다. 여러 위젯들 간에 공유해야 하는 데이터나 상태를 효율적으로 관리할 수 있도록 도와줍니다.

예시 코드

다음은 간단한 카운터 앱의 예시 코드입니다. 이 예시에서는 ChangeNotifier를 상속받은 Counter 클래스를 사용하여 상태를 관리하고, provider 패키지를 이용하여 해당 상태를 다른 위젯과 공유하고 갱신합니다.

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('플러터 프로바이더 예시'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('버튼을 눌러 카운트를 증가시키세요:'),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예시 코드에서 ChangeNotifierProvider를 통해 전역적으로 상태를 관리하고, Provider.of로 해당 상태를 사용하여 화면을 갱신하도록 구성되어 있습니다.

페이지 전환

위의 예시에서 MyHomePage 클래스를 다른 페이지로 전환하려면, Navigator를 사용하여 다음과 같이 처리할 수 있습니다.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

위 코드를 통해 SecondPage로 화면을 전환할 수 있습니다. 이때, context는 빌드 메서드나 위젯 트리 정보에 접근하는 데 사용되는 객체입니다.

이처럼, provider와 Navigator를 활용하여 플러터 앱에서 상태 관리와 페이지 전환을 함께 처리할 수 있습니다.

결론

플러터의 provider 패키지를 사용하여 전역적인 상태를 관리하고, Navigator를 활용하여 페이지 전환을 처리할 수 있습니다. 이를 통해 플러터 앱의 화면 간 전환 및 상태 관리를 효율적으로 구현할 수 있습니다.

이렇게 플러터의 다양한 기능과 라이브러리를 통해 앱을 더욱 효율적으로 개발할 수 있습니다.