[flutter] 플러터에서 리퀴드 스와이프를 활용한 워크아웃 애플리케이션 구현

18 Dec 2023

flutter

운동을 도와주는 애플리케이션을 개발하기 위해 리퀴드 스와이프 기능을 플러터(Flutter)로 구현하는 방법에 대해 알아보겠습니다.

목표

이번 예시에서 저희는 플러터와 flutter_swiper 패키지를 사용하여 리퀴드 스와이프로 운동 루틴을 선택할 수 있는 애플리케이션을 만들어 보겠습니다.

소개

리퀴드 스와이프는 터치와 드래그 동작을 통해 데이터를 직관적으로 선택할 수 있는 기능입니다. 이것을 활용하여 사용자가 편리하게 운동 루틴을 선택하고 시작할 수 있는 애플리케이션을 개발해 보겠습니다.

구현

먼저, flutter_swiper 패키지를 사용하기 위해 pubspec.yaml 파일에 다음과 같이 추가합니다.

dependencies:
  flutter_swiper: ^1.1.6

다음으로, 다음과 같이 Swiper 위젯을 사용하여 리퀴드 스와이프를 구현할 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WorkoutPage(),
    );
  }
}

class WorkoutPage extends StatelessWidget {
  final List<String> workouts = [
    'Push-ups',
    'Squats',
    'Plank',
    'Lunges',
    'Burpees',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Workout App'),
      ),
      body: Center(
        child: SizedBox(
          height: 300,
          child: Swiper(
            itemCount: workouts.length,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                child: Center(
                  child: Text(
                    workouts[index],
                    style: TextStyle(fontSize: 24),
                  ),
                ),
              );
            },
            viewportFraction: 0.6,
            scale: 0.8,
          ),
        ),
      ),
    );
  }
}

위의 코드에서 WorkoutPage 클래스에서 Swiper 위젯을 사용하여 운동 루틴 목록을 리퀴드 스와이프할 수 있도록 구현했습니다.

결론

이제 운동 루틴을 선택하는 화면을 리퀴드 스와이프로 만들었습니다. 사용자는 터치와 드래그 동작으로 쉽게 운동 루틴을 선택할 수 있게 되었습니다. 플러터와 flutter_swiper 패키지를 활용하여 워크아웃 애플리케이션을 구현하는 방법에 대해 알아보았습니다.

참고: flutter_swiper 패키지