[flutter] 스크롤바를 사용하여 이미지 갤러리 구현하기

11 Dec 2023

flutter

이번에는 flutter를 사용하여 스크롤바를 추가하여 이미지 갤러리를 구현하는 방법에 대해 알아보겠습니다.

스크롤바와 이미지 갤러리 위젯 추가하기

먼저, pubspec.yaml 파일에 image_picker 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.3+3

그런 다음, 아래와 같은 코드를 사용하여 스크롤바와 이미지 갤러리 위젯을 추가합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyImageGallery(),
    );
  }
}

class MyImageGallery extends StatefulWidget {
  @override
  _MyImageGalleryState createState() => _MyImageGalleryState();
}

class _MyImageGalleryState extends State<MyImageGallery> {
  List<XFile> _imageList = [];

  Future _getImage() async {
    final imagePicker = ImagePicker();
    final image = await imagePicker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        _imageList.add(image);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Gallery with Scrollbar')),
      body: Center(
        child: Scrollbar(
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            itemCount: _imageList.length,
            itemBuilder: (BuildContext context, int index) {
              return Image.file(File(_imageList[index].path));
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getImage,
        tooltip: 'Add Image',
        child: Icon(Icons.add),
      ),
    );
  }
}

결과 확인하기

이제 앱을 실행하여 이미지 갤러리에 스크롤바가 추가된 모습을 확인할 수 있습니다.

이상적으로, 이미지를 선택하고 스크롤하여 모든 이미지가 표시되는 것을 확인할 수 있을 겁니다.

이렇게 간단하게 flutter를 사용하여 스크롤바를 추가하여 이미지 갤러리를 구현할 수 있습니다. 만약 궁금한 점이 있으시다면, 자유롭게 물어봐주세요.