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

04 Dec 2023

flutter

소개

Flutter는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 하나의 코드베이스로 iOS와 Android 앱을 모두 개발할 수 있습니다. 이번에는 Flutter의 carousel_slider를 사용하여 간단한 자기소개 슬라이더를 만들어보겠습니다.

carousel_slider 패키지 설치

먼저, carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일에서 dependencies에 아래 코드를 추가하세요.

dependencies:
  carousel_slider: ^4.0.0

설치를 완료한 후, pub get을 실행하여 패키지를 가져오세요.

슬라이더 생성하기

자기소개 슬라이더를 생성하기 위해 carousel_slider 위젯을 사용합니다. 다음은 간단한 예시 코드입니다.

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

class IntroSlider extends StatelessWidget {
  final List<String> introItems = [
    '안녕하세요! 저는 홍길동입니다.',
    '플러터를 사용하여 멋진 앱을 개발합니다.',
    '언제든지 연락주세요!'
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        autoPlay: true,
        height: 150,
        viewportFraction: 1.0,
      ),
      items: introItems.map((item) {
        return Container(
          padding: EdgeInsets.all(10),
          child: Text(
            item,
            style: TextStyle(fontSize: 20),
          ),
        );
      }).toList(),
    );
  }
}

위 코드에서 introItems 리스트에는 자기소개 내용을 담고 있습니다. CarouselSlider 위젯의 items 속성을 사용하여 각각의 슬라이드를 정의할 수 있습니다.

슬라이더 사용하기

위에서 만든 IntroSlider 위젯을 원하는 화면에 추가해보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Introduction Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Introduction Slider'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '자기소개',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              IntroSlider(), // IntroSlider 위젯 사용
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 IntroSlider()를 사용하여 자기소개 슬라이더를 추가하였습니다. IntroSlider는 Column 위젯 내에서 텍스트와 함께 중앙 정렬되어 나타납니다.

이제 앱을 실행하면 자기소개 슬라이더가 자동으로 슬라이드됩니다.

마무리

이번 글에서는 Flutter의 carousel_slider 패키지를 사용하여 자기소개 슬라이더를 만들어보았습니다. 자신의 앱을 홍보하거나 간단한 정보를 전달할 때 이런 슬라이더를 활용할 수 있습니다.

더 다양한 기능과 옵션을 사용하고 싶다면 carousel_slider 패키지의 공식 문서를 참조하세요. 다른 유용한 Flutter 패키지에도 많은 것이 있으니, 필요에 따라 적극적으로 활용해보세요!