[flutter] 플러터 슬라이딩 패널 광고 화면

플러터(Flutter)를 사용하여 앱 개발을 진행하다 보면 광고를 효과적으로 삽입하고 싶을 때가 있습니다. 이 문서에서는 플러터의 슬라이딩 패널을 사용하여 광고 화면을 구현하는 방법에 대해 알아보겠습니다.

1. 슬라이딩 패널 추가

먼저, sliding_panel 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  sliding_panel: ^0.4.0

저장 후 패키지를 설치하기 위해 flutter pub get 명령을 실행합니다.

2. 광고 화면 구성

main.dart 파일을 열고 다음 코드를 추가합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliding Panel Ad',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널 광고 화면'),
      ),
      body: SlidingPanel(
        panelSize: 200, // 슬라이딩 패널의 높이 설정 (픽셀 단위)
        panel: Container(
          color: Colors.yellow,
          child: Center(
            child: Text(
              '광고 내용',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
        content: Container(
          color: Colors.white,
          child: Center(
            child: Text(
              '앱 내용',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

이 코드에서는 sliding_panel 패키지를 사용하여 슬라이딩 패널을 만들었습니다. panel에는 광고 내용을, content에는 앱 내용을 넣을 수 있습니다. panelSize는 슬라이딩 패널의 높이를 픽셀 단위로 설정합니다. 위 코드에서는 200으로 설정하였습니다.

3. 앱 실행

위 코드를 작성한 뒤 앱을 실행시켜보면, 슬라이딩 패널이 화면 하단에 나타납니다. 사용자는 슬라이딩 패널을 위로 밀면 광고 내용이 나타나고, 아래로 당기면 앱 내용이 나타납니다.

이렇게 슬라이딩 패널을 사용하면 사용자에게 광고를 직관적으로 보여줄 수 있으며, 앱 내용을 스크롤하지 않고도 쉽게 볼 수 있도록 할 수 있습니다.

참고 자료