[flutter] 플러터 프로바이더를 사용하여 토글 버튼 만들기

22 Dec 2023

flutter

플러터(Flutter) 앱에서 토글 버튼을 만들고 상태 관리를 위해 프로바이더(Provider)를 사용하는 방법을 알아보겠습니다.

Step 1: 프로바이더 의존성 추가하기

먼저, pubspec.yaml 파일에 provider 패키지를 추가합니다. 이를 위해 아래와 같은 코드를 pubspec.yaml 파일에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그런 다음, 터미널에서 아래 명령어를 실행해 프로젝트에 패키지를 추가합니다:

flutter pub get

Step 2: 모델 생성하기

다음으로, 토글 버튼의 상태를 관리할 모델을 생성합니다. 모델을 생성하기 위해 아래와 같은 코드를 toggle_model.dart 파일에 추가합니다:

import 'package:flutter/foundation.dart';

class ToggleModel extends ChangeNotifier {
  bool _isToggled = false;

  bool get isToggled => _isToggled;

  void toggle() {
    _isToggled = !_isToggled;
    notifyListeners();
  }
}

Step 3: 프로바이더 설정하기

이제, 프로바이더를 설정하여 모델을 제공합니다. 이를 위해 main.dart 파일에 아래와 같은 코드를 추가합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ToggleModel(),
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

Step 4: 토글 버튼 추가하기

마지막으로, 홈 화면에 토글 버튼을 추가하고 이를 통해 모델의 상태를 변경합니다. 이를 위해 home_screen.dart 파일에 아래와 같은 코드를 추가합니다:

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggle Button Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Provider.of<ToggleModel>(context, listen: false).toggle();
          },
          child: Consumer<ToggleModel>(
            builder: (context, toggle, child) {
              return Text(toggle.isToggled ? 'ON' : 'OFF');
            },
          ),
        ),
      ),
    );
  }
}

이제 앱을 실행하고 토글 버튼을 눌러 상태가 변경되는지 확인할 수 있습니다. 위의 단계를 따라가면 플러터 앱에 프로바이더를 사용하여 토글 버튼을 만들 수 있습니다.

프로바이더(Provider)에 대한 자세한 내용은 공식 문서를 참고하세요.