[flutter] 플러터 프로바이더를 사용하여 화면 전환하기

22 Dec 2023

flutter

플러터에서 화면 전환이나 데이터 전달을 효율적으로 관리하기 위해 플러터 프로바이더를 사용할 수 있습니다. 프로바이더는 상태 관리와 데이터 전달을 위한 강력한 도구로, 애플리케이션의 다양한 부분에서 데이터를 공유할 수 있습니다. 이를 통해 화면 간 전환과 데이터 전달을 더욱 쉽게 처리할 수 있습니다.

1. 프로바이더 설정

먼저, 애플리케이션에서 프로바이더 패키지를 추가해야 합니다. 다음은 pubspec.yaml 파일에 패키지를 추가하는 예시입니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.2

이제 터미널에서 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

2. 모델 클래스 생성

화면 간 데이터 전달을 위한 모델 클래스를 생성합니다. 이 클래스는 데이터를 보유하고 관리하는 데 사용됩니다.

class UserData extends ChangeNotifier {
  String _name = 'John Doe';

  String get name => _name;

  void updateName(String newName) {
    _name = newName;
    notifyListeners();
  }
}

3. 프로바이더 설정

이전 단계에서 생성한 모델 클래스를 프로바이더에 등록합니다.

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

위 예시에서 UserData 클래스를 ChangeNotifierProvider에 등록하여 애플리케이션 전체에서 이 데이터에 접근할 수 있도록 합니다.

4. 화면 전환

이제 화면 전환 시, 데이터를 전달하고 갱신하는 방법을 살펴봅니다.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var userData = Provider.of<UserData>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(userData.name),
            RaisedButton(
              child: Text('Update Name'),
              onPressed: () {
                userData.updateName('Jane Smith');
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 Provider.of<UserData>(context)를 사용하여 userData에 액세스하고, userData의 값을 화면에 표시하거나 업데이트하는 방법을 확인할 수 있습니다.

플러터 프로바이더를 사용하면 화면 간 데이터 전달과 관리를 효율적으로 처리할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있습니다.

플러터 프로바이더에 관련된 자세한 내용은 공식 문서를 참고하시기 바랍니다.