[flutter] 플러터 슬라이딩 패널 알림 화면

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 개발할 수 있습니다. 이번 글에서는 플러터를 사용하여 슬라이딩 패널 알림 화면을 만드는 방법에 대해 알아보겠습니다.

패키지 설치

먼저, 플러터 프로젝트에 슬라이딩 패널 알림 화면을 구현하기 위해 slide_container 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해주세요.

dependencies:
  slide_container: ^0.5.0

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

슬라이딩 패널 알림 위젯 생성

슬라이딩 패널 알림 화면을 구현하기 위해 slide_container 패키지의 SlideContainer 위젯을 사용합니다. 이 위젯은 슬라이딩 애니메이션과 함께 위젯을 보여주는 기능을 제공합니다.

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

class SlidingPanelNotification extends StatefulWidget {
  const SlidingPanelNotification({Key? key}) : super(key: key);

  @override
  State<SlidingPanelNotification> createState() =>
      _SlidingPanelNotificationState();
}

class _SlidingPanelNotificationState extends State<SlidingPanelNotification> {
  bool isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sliding Panel Notification'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              setState(() {
                isVisible = true;
              });
            },
            child: const Text('Show Notification'),
          ),
          SlideContainer(
            isOpen: isVisible,
            slideDirection: SlideDirection.UP,
            slideBarrier: SlideBarrier.none,
            child: Container(
              height: 200,
              color: Colors.blue,
              child: const Center(
                child: Text(
                  'You have a new notification!',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 SlideContainer 위젯의 isOpen 속성을 이용해 알림 화면의 가시성을 제어할 수 있습니다. 슬라이딩 방향과 슬라이딩 동작을 설정할 수도 있습니다.

앱에 슬라이딩 패널 알림 추가

위에서 생성한 SlidingPanelNotification 위젯을 앱에 추가하기 위해 main.dart 파일을 수정합니다.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliding Panel Notification',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SlidingPanelNotification(),
    );
  }
}

위와 같이 수정한 후 앱을 실행하면 화면에 “Show Notification” 버튼이 보이게 됩니다. 버튼을 클릭하면 알림 패널이 슬라이딩되면서 화면에 나타납니다.

결론

위에서는 플러터를 이용하여 슬라이딩 패널 알림 화면을 구현하는 방법에 대해 알아보았습니다. slide_container 패키지를 활용하여 간편하게 알림 화면을 만들 수 있습니다. 플러터를 사용하면 다양한 UI 요소들을 빠르고 쉽게 개발할 수 있으니, 많은 기능들을 활용해보시기 바랍니다.