[flutter] 플러터 슬라이딩 패널 타이머 화면

플러터(Flutter)를 사용하여 슬라이딩 패널에 타이머 화면을 구현하는 방법에 대해 알아보겠습니다.

목표

필요한 패키지

이 예제에서는 다음 패키지가 필요합니다:

패키지를 설치하려면 pubspec.yaml 파일의 dependencies 섹션에 아래 코드를 추가하세요:

dependencies:
  flutter_sliding_panel: ^1.0.0
  flutter_countdown_timer: ^0.2.2

설치한 후에는 패키지를 import합니다:

import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';
import 'package:flutter_countdown_timer/flutter_countdown_timer.dart';

슬라이딩 패널 생성하기

먼저, 슬라이딩 패널을 생성해야 합니다. SlidingPanel 위젯을 사용하여 패널을 구현할 수 있습니다. 아래는 기본적인 슬라이딩 패널의 예입니다:

class SlidingPanelPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널 타이머'),
      ),
      body: SlidingPanel(
        panel: Container(
          child: Column(
            children: [
              Text('패널 내용'),
              // 여기에 타이머를 추가하세요
            ],
          ),
        ),
      ),
    );
  }
}

타이머 추가하기

플러터에서 타이머를 추가하려면 CountdownTimer 위젯을 사용합니다. CountdownTimer 위젯은 제공된 시간 동안 타이머를 표시하고 관리하는 기능을 제공합니다. 아래는 타이머를 슬라이딩 패널에 추가하는 예입니다:

class SlidingPanelPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널 타이머'),
      ),
      body: SlidingPanel(
        panel: Container(
          child: Column(
            children: [
              Text('패널 내용'),
              CountdownTimer(
                endTime: DateTime.now().millisecondsSinceEpoch + 10000,
                onEnd: () {
                  print('타이머가 종료되었습니다.');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 CountdownTimer 위젯을 생성하고 endTime 속성을 사용하여 타이머의 종료 시간을 설정합니다. onEnd 콜백 함수는 타이머가 완료될 때 호출됩니다.

화면 제어하기

타이머가 동작할 때 화면을 제어하려면 CountdownTimerController를 사용합니다. CountdownTimerController는 타이머를 시작하고 일시 정지하는 등의 제어 기능을 제공합니다. 아래는 CountdownTimerController를 사용하여 타이머 화면을 제어하는 예입니다:

class SlidingPanelPage extends StatefulWidget {
  @override
  _SlidingPanelPageState createState() => _SlidingPanelPageState();
}

class _SlidingPanelPageState extends State<SlidingPanelPage> {
  CountdownTimerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CountdownTimerController(
      endTime: DateTime.now().millisecondsSinceEpoch + 10000,
      onEnd: () {
        print('타이머가 종료되었습니다.');
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널 타이머'),
      ),
      body: SlidingPanel(
        panel: Container(
          child: Column(
            children: [
              Text('패널 내용'),
              CountdownTimer(
                controller: _controller,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RaisedButton(
                    child: Text('시작'),
                    onPressed: _controller.start,
                  ),
                  RaisedButton(
                    child: Text('일시 정지'),
                    onPressed: _controller.pause,
                  ),
                  RaisedButton(
                    child: Text('재시작'),
                    onPressed: _controller.resume,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서는 CountdownTimerController를 사용하여 _controller를 만들고 타이머를 시작하고 일시 정지하는 등의 기능을 수행합니다. 이를 위해 RaisedButton 위젯을 사용하여 시작, 일시 정지 및 재시작 버튼을 추가하고 각 버튼의 onPressed 이벤트를 _controller의 해당 함수에 연결합니다.

결론

플러터를 사용하여 슬라이딩 패널에 타이머 화면을 구현하는 과정을 살펴보았습니다. 이를 통해 사용자 친화적이고 기능적인 화면을 구현할 수 있습니다. 추가로, flutter_sliding_panel 패키지와 flutter_countdown_timer 패키지를 사용하여 더욱 다양한 기능을 추가할 수 있습니다.

참고 자료