[flutter] carousel_slider를 사용하여 지도 슬라이더 만들기

04 Dec 2023

flutter

carousel_slider

Flutter에서 carousel_slider 패키지를 사용하면 지도 슬라이더를 간편하게 구현할 수 있습니다. 지도 슬라이더를 만들기 위해 다음 단계를 따라해봅시다.

1. carousel_slider 패키지 설치

pubspec.yaml 파일에 carousel_slider 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

패키지를 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치하세요.

2. CarouselSlider 위젯 구현

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

class MapSlider extends StatelessWidget {
  final List<String> maps = [
    'https://example.com/map1.png',
    'https://example.com/map2.png',
    'https://example.com/map3.png',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        enlargeCenterPage: true,
        enableInfiniteScroll: true,
      ),
      items: maps.map((map) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              child: Image.network(map, fit: BoxFit.cover),
            );
          },
        );
      }).toList(),
    );
  }
}

위 코드는 CarouselSlider 패키지를 사용하여 지도 슬라이더를 구현하는 예제입니다. maps 리스트에는 슬라이더에 표시할 지도 이미지의 URL이 들어갑니다. CarouselSlider 위젯의 options 속성을 사용하여 슬라이더의 높이, 중앙 페이지 확대, 무한 스크롤 등을 설정할 수 있습니다. items 속성에는 슬라이더에 표시될 각 페이지의 위젯을 구성합니다.

3. 사용하기

위에서 만든 MapSlider 위젯을 사용하려면 해당 위젯을 원하는 곳에 추가하면 됩니다.

import 'package:flutter/material.dart';

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

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

위 코드는 Flutter 앱의 진입점인 main 함수가 포함되어 있으며, MapSlider 위젯을 Center 위젯의 자식으로 추가합니다. 이렇게하면 지도 슬라이더가 앱의 가운데에 표시됩니다.

이제 앱을 실행하면 지도 슬라이더가 나타날 것입니다. 슬라이더를 터치하거나 스와이프하여 다른 지도를 선택할 수 있습니다.

결론

Flutter에서 carousel_slider 패키지를 사용하면 간단하게 지도 슬라이더를 구현할 수 있습니다. 위의 단계를 따라하고 원하는 이미지 URL을 사용하여 지도 슬라이더를 만들어보세요.

참고: carousel_slider 패키지