[flutter] carousel_slider를 사용하여 로그인 폼 슬라이더 만들기

04 Dec 2023

flutter

로그인 폼을 슬라이더 형태로 구현하고 싶을 때, Flutter의 carousel_slider 패키지를 사용할 수 있습니다. carousel_slider를 사용하면 편리하게 이미지나 위젯을 슬라이딩하는 기능을 구현할 수 있습니다.

carousel_slider 패키지 추가하기

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 carousel_slider 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.3.1

그리고, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받으세요.

carousel_slider로 로그인 폼 슬라이더 만들기

로긴 폼 슬라이더를 만들기 위해 다음과 같이 코드를 작성하세요.

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

class LoginSlider extends StatelessWidget {
  final List<Widget> loginForms = [
    LoginForm(title: 'Email Login'),
    LoginForm(title: 'Phone Login'),
    LoginForm(title: 'Social Login'),
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: loginForms,
      options: CarouselOptions(
        height: 400.0,
        autoPlay: true,
        enlargeCenterPage: true,
      ),
    );
  }
}

class LoginForm extends StatelessWidget {
  final String title;

  LoginForm({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

이 코드에서는 CarouselSlider 위젯을 만들어 items 속성에 로그인 폼 위젯을 넣어주고, options 속성에서 슬라이더의 높이, 자동 재생, 확대 및 중앙 정렬 옵션을 설정합니다.

로그인 폼을 나타내는 LoginForm 위젯을 만들어 각각 다른 제목을 전달해줍니다.

실행하기

로그인 폼 슬라이더 위젯을 사용하려면 화면에서 호출하면 됩니다. 예를 들어 다음과 같이 사용할 수 있습니다.

import 'package:flutter/material.dart';

import 'login_slider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Login Slider'),
        ),
        body: Center(
          child: LoginSlider(),
        ),
      ),
    );
  }
}

위 코드에서는 LoginSlider 위젯을 화면 중앙에 위치시켜 표시합니다.

이제 앱을 실행하면 로그인 폼 슬라이더를 볼 수 있습니다.

결론

carousel_slider를 사용하여 Flutter 앱에서 로그인 폼 슬라이더를 구현하는 방법에 대해 알아보았습니다. carousel_slider 패키지를 사용하면 쉽게 이미지나 위젯의 슬라이딩 기능을 구현할 수 있습니다.