[flutter] 플러터 프로바이더를 활용한 광고 표시

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면, 앱 내에서 광고를 표시해야 하는 경우가 많습니다. 이럴 때 프로바이더(Provider) 패키지를 사용하여 효율적으로 광고를 관리하고 표시할 수 있습니다. 이번 포스트에서는 플러터 프로바이더를 활용하여 광고를 표시하는 방법을 알아보겠습니다.

1. 프로바이더 패키지 추가

먼저, pubspec.yaml 파일에 프로바이더 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

pubspec.yaml 파일에 패키지를 추가한 후에는 flutter pub get 명령을 실행하여 패키지를 다운로드 받습니다.

2. 모델 클래스 및 프로바이더 설정

다음으로, 광고를 관리하기 위한 모델 클래스와 프로바이더를 설정합니다.

import 'package:flutter/material.dart';

class Ad {
  final String title;
  final String imageUrl;

  Ad({required this.title, required this.imageUrl});
}

class AdProvider extends ChangeNotifier {
  Ad _currentAd = Ad(
    title: 'Ad Title',
    imageUrl: 'assets/ad_image.jpg',
  );

  Ad get currentAd => _currentAd;

  void updateAd(Ad newAd) {
    _currentAd = newAd;
    notifyListeners();
  }
}

위 코드에서는 Ad 클래스를 생성하여 광고의 제목과 이미지 URL을 관리하고, AdProvider 클래스를 생성하여 광고 상태를 관리합니다.

3. 프로바이더를 통한 광고 표시

이제 화면 위에 현재 광고를 표시하고, 버튼을 클릭하여 다른 광고로 업데이트하는 기능을 구현해 보겠습니다.

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

class AdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ad Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Consumer<AdProvider>(
              builder: (context, adProvider, child) {
                return Column(
                  children: <Widget>[
                    Image.asset(adProvider.currentAd.imageUrl),
                    SizedBox(height: 20.0),
                    Text(adProvider.currentAd.title),
                  ],
                );
              },
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {
                Ad newAd = Ad(
                  title: 'New Ad Title',
                  imageUrl: 'assets/new_ad_image.jpg',
                );
                Provider.of<AdProvider>(context, listen: false).updateAd(newAd);
              },
              child: Text('Load New Ad'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Consumer 위젯을 사용하여 현재 광고를 화면에 표시하고, ElevatedButton을 클릭하면 AdProvider를 통해 새로운 광고로 업데이트하는 기능을 구현했습니다.

프로바이더를 활용하여 광고를 효율적으로 관리하고 표시할 수 있게 되었습니다. 이제 이를 활용하여 앱 내에서 광고를 표시하는 기능을 개발할 수 있을 것입니다.