[flutter] 리퀴드 스와이프로 구현된 투표(설문조사) 애플리케이션 예시

18 Dec 2023

flutter

리퀴드 스와이프 효과를 활용하여 투표(설문조사) 애플리케이션을 구현하는 방법을 소개합니다. 해당 애플리케이션은 Flutter 프레임워크를 사용하여 구축되었습니다.

목표

리퀴드 스와이프(애니메이션과 함께 움직이는 스와이프)를 통해 사용자가 투표(설문조사) 항목을 선택할 수 있도록 구현한다.
사용자가 선택한 투표 항목에 대한 투표 결과를 보여준다.

구현 방법

1. 패키지 설치

liquid_swipe 패키지를 설치하여 리퀴드 스와이프 효과를 구현합니다.

dependencies:
  liquid_swipe: ^1.4.0

2. 리퀴드 스와이프 위젯 구현

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

void main() => runApp(MyApp());

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

class VotePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LiquidSwipe(
        pages: [
          // 투표 항목 페이지 1
          Container(
            color: Colors.blue,
            child: Center(
                child: Text(
              "투표 항목 1",
              style: TextStyle(fontSize: 20),
            )),
          ),
          // 투표 항목 페이지 2
          Container(
            color: Colors.red,
            child: Center(
                child: Text(
              "투표 항목 2",
              style: TextStyle(fontSize: 20),
            )),
          ),
          // 투표 항목 페이지 3
          Container(
            color: Colors.green,
            child: Center(
                child: Text(
              "투표 항목 3",
              style: TextStyle(fontSize: 20),
            )),
          ),
        ],
      ),
    );
  }
}

위 예시 코드에서는 liquid_swipe 패키지를 사용하여 3개의 페이지로 구성된 투표(설문조사) 애플리케이션을 구현했습니다. 페이지 간에 스와이프하면 애니메이션과 함께 투표 항목을 선택할 수 있습니다.

3. 투표 결과 표시

사용자가 특정 투표 항목을 선택하면 해당 결과를 표시하는 방법에 대한 구현은 별도로 이루어질 수 있습니다.

마치며

위에서 소개한 예시를 참고하여 Flutter를 사용하여 리퀴드 스와이프로 구현된 투표(설문조사) 애플리케이션을 만들어볼 수 있습니다. 필요에 따라 추가적인 기능을 구현하여 다양한 애플리케이션으로 확장할 수 있습니다.

참고: liquid_swipe 패키지