[flutter] Swipeable Widget을 활용한 스톱워치 구현하기

08 Dec 2023

flutter

이번 글에서는 Flutter에서 Swipeable Widget을 활용하여 간단한 스톱워치 앱을 구현하는 방법을 소개하려고 합니다.

1. 필요한 패키지 설치

먼저 flutter_swiper 패키지를 설치해야 합니다. 이 패키지는 Swipeable 기능을 제공해주는데 사용됩니다.

dependencies:
  flutter_swiper: ^1.1.6

패키지를 설치한 후, flutter pub get을 실행하여 의존성을 갱신합니다.

다음으로, 스와이프 기능을 사용할 화면에 Swipeable 위젯을 추가해야 합니다.

import 'package:flutter_swiper/flutter_swiper.dart';

class StopwatchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stopwatch'),
      ),
      body: Center(
        child: Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Container(
              // content of each swiper item
            );
          },
          itemCount: 3,
          pagination: SwiperPagination(),
          control: SwiperControl(),
        ),
      ),
    );
  }
}

3. 스톱워치 기능 구현

이제 Swipeable을 통해 스톱워치 화면을 렌더링할 준비가 되었습니다. 스톱워치의 기능은 개별 페이지에 구현할 수 있습니다. 여러 개의 페이지를 스와이프하여 전환할 수 있기 때문입니다.

class StopwatchItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('00:00:00', style: Theme.of(context).textTheme.headline1),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            FloatingActionButton(
              onPressed: () {
                // Start stopwatch
              },
              child: Icon(Icons.play_arrow),
            ),
            FloatingActionButton(
              onPressed: () {
                // Pause stopwatch
              },
              child: Icon(Icons.pause),
            ),
            FloatingActionButton(
              onPressed: () {
                // Reset stopwatch
              },
              child: Icon(Icons.stop),
            ),
          ],
        ),
      ],
    );
  }
}

4. 마무리

이제 모든 준비가 끝났습니다. 이제 앱을 실행하여 Swipeable을 통해 여러 스톱워치 페이지를 스와이프하여 전환해 보세요.

이상으로, Swipeable Widget을 활용하여 스톱워치 앱을 구현하는 방법에 대해 알아봤습니다. 개발하는 데 도움이 되길 바랍니다!

참고 자료

flutter_swiper 패키지

목차

1. 필요한 패키지 설치

2. Swipeable Widget 추가

3. 스톱워치 기능 구현

4. 마무리

참고 자료