[flutter] carousel_slider를 사용하여 회의실 예약 슬라이더 만들기

04 Dec 2023

flutter

회의실 예약 앱을 개발할 때, 사용자가 간편하게 회의실을 선택할 수 있는 슬라이더를 구현하고 싶을 수 있습니다. Flutter의 carousel_slider 라이브러리를 사용하면 간단하게 회의실 예약 슬라이더를 구현할 수 있습니다.

carousel_slider 라이브러리 설치

먼저, carousel_slider 라이브러리를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 라이브러리를 추가합니다.

dependencies:
  carousel_slider: ^3.0.0

그리고 flutter pub get을 실행하여 라이브러리를 설치합니다.

슬라이더 구현하기

다음은 carousel_slider를 사용하여 회의실 예약 슬라이더를 만드는 예제입니다.

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

class MeetingRoomSlider extends StatelessWidget {
  final List<String> meetingRooms = [
    '회의실 A',
    '회의실 B',
    '회의실 C',
    '회의실 D',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        aspectRatio: 16/9,
        viewportFraction: 0.8,
        initialPage: 0,
        enableInfiniteScroll: true,
        reverse: false,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 3),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        autoPlayCurve: Curves.fastOutSlowIn,
        enlargeCenterPage: true,
        scrollDirection: Axis.horizontal,
      ),
      items: meetingRooms.map((room) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: Text(
                  room,
                  style: TextStyle(fontSize: 18, color: Colors.white),
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서는 carousel_slider의 CarouselOptions를 설정하여 슬라이더의 모양과 동작을 조정합니다. items 속성에는 슬라이더에 표시할 회의실 목록을 설정합니다. 슬라이더에 표시할 각 아이템은 Container 위젯으로 구성되며, 원하는 스타일과 내용을 설정하실 수 있습니다.

위의 예제에서는 슬라이더가 자동으로 롤링되도록 설정되었습니다. 필요에 따라 자동 롤링을 비활성화하거나 롤링 속도를 조정할 수 있습니다.

회의실 예약 슬라이더 사용하기

다음은 위에서 구현한 슬라이더를 사용하는 예제입니다.

import 'package:flutter/material.dart';

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

class MeetingRoomApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Meeting Room App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MeetingRoomPage(),
    );
  }
}

class MeetingRoomPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('회의실 예약'),
      ),
      body: ListView(
        children: <Widget>[
          MeetingRoomSlider(),
          // 기타 내용 추가
        ],
      ),
    );
  }
}

위의 예제에서는 MeetingRoomSlider 위젯을 ListView 안에 넣어서 슬라이더를 표시하였습니다. 필요에 따라 슬라이더 위젯과 다른 위젯을 조합하여 원하는 앱 화면을 만드세요.

이제 carousel_slider를 사용하여 간편하게 회의실 예약 슬라이더를 만들 수 있습니다. 자세한 내용은 carousel_slider 라이브러리 문서를 참고하시기 바랍니다.