[flutter] carousel_slider를 사용하여 팀 소개 슬라이더 만들기

04 Dec 2023

flutter

Team Carousel Slider

팀 소개 슬라이더는 팀원들의 사진과 간단한 소개를 슬라이드 형식으로 보여주는 기능입니다. 이번에는 Flutter에서 carousel_slider 라이브러리를 사용하여 팀 소개 슬라이더를 만들어보겠습니다.

carousel_slider 라이브러리 설치

먼저, carousel_slider 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 dependency를 추가해주세요.

dependencies:
  carousel_slider: ^4.0.0

의존성을 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 라이브러리를 다운로드 받습니다.

팀 소개 슬라이더 구현

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

class TeamSlider extends StatelessWidget {
  final List<TeamMember> teamMembers = [
    TeamMember(name: 'John Doe', position: 'CEO', photoUrl: 'https://example.com/john.jpg'),
    TeamMember(name: 'Jane Smith', position: 'Designer', photoUrl: 'https://example.com/jane.jpg'),
    TeamMember(name: 'Alex Johnson', position: 'Developer', photoUrl: 'https://example.com/alex.jpg'),
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        autoPlay: true,
        enlargeCenterPage: true,
      ),
      items: teamMembers.map((teamMember) {
        return Container(
          margin: EdgeInsets.symmetric(horizontal: 10),
          child: Column(
            children: [
              CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage(teamMember.photoUrl),
              ),
              SizedBox(height: 10),
              Text(
                teamMember.name,
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              Text(teamMember.position),
            ],
          ),
        );
      }).toList(),
    );
  }
}

class TeamMember {
  final String name;
  final String position;
  final String photoUrl;

  TeamMember({required this.name, required this.position, required this.photoUrl});
}

위의 코드는 carousel_slider를 사용하여 팀 소개 슬라이더를 구현한 예제입니다. TeamSlider 클래스는 StatelessWidget을 상속받아 구현되었으며, 팀원 정보를 담은 리스트를 생성합니다. carousel_slider 위젯을 사용하여 슬라이더를 구현하며, height, autoPlay, enlargeCenterPage 등의 옵션을 설정할 수 있습니다.

각 슬라이드는 Container 위젯을 사용하여 구성되며, TeamMember 객체의 정보를 바탕으로 CircleAvatar와 Text 위젯을 포함하고 있습니다.

팀 소개 슬라이더 사용하기

TeamSlider 위젯을 사용하기 위해서는 해당 페이지나 위젯에서 TeamSlider를 호출해야 합니다. 예를 들어, 다른 페이지에서 사용하고 싶다면 다음과 같이 호출할 수 있습니다.

import 'package:flutter/material.dart';

class TeamPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('팀 소개'),
      ),
      body: Center(
        child: TeamSlider(),
      ),
    );
  }
}

위의 코드는 TeamSlider를 TeamPage에서 사용하는 예제입니다. 위젯을 호출하기 위해 Center 위젯을 사용하고, 필요에 따라 다른 위젯과 함께 조합하여 사용할 수 있습니다.

팀 소개 슬라이더를 더욱 다양한 방식으로 사용하고 싶다면 carousel_slider 라이브러리의 문서를 참고하시면 됩니다.