[flutter] 플러터 Slider와 ListView 위젯의 연동 방법은?

08 Dec 2023

flutter

플러터에서 Slider와 ListView 위젯을 연동하는 방법은 매우 간단합니다. Slider의 값이 변경될 때 ListView가 업데이트되도록 할 수 있습니다.

1. Slider 위젯 구현

우선 Slider를 구현하여 값을 변경할 수 있도록 합니다. 아래는 Slider 위젯을 생성하는 코드입니다.

double _sliderValue = 0.0;

Slider(
  value: _sliderValue,
  onChanged: (newValue) {
    setState(() {
      _sliderValue = newValue;
    });
  },
);

2. ListView 위젯 구현

이제 ListView를 구현하여 Slider의 값에 따라 항목들을 업데이트할 수 있도록 합니다. ListView.builder를 사용하여 동적으로 항목을 생성하고 업데이트합니다.

ListView.builder(
  itemCount: _getListCount(),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('항목 $index'),
      subtitle: Text('값: ${index * _sliderValue}'),
    );
  },
);

위의 코드에서 getItemCount() 함수는 ListView에 표시될 항목의 개수를 반환하는 함수입니다.

전체 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Slider와 ListView 연동 예제'),
        ),
        body: MySliderListViewWidget(),
      ),
    );
  }
}

class MySliderListViewWidget extends StatefulWidget {
  @override
  _MySliderListViewWidgetState createState() => _MySliderListViewWidgetState();
}

class _MySliderListViewWidgetState extends State<MySliderListViewWidget> {
  double _sliderValue = 0.0;

  int _getListCount() {
    // ListView에 표시될 항목의 개수 계산
    return 5;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Slider(
          value: _sliderValue,
          onChanged: (newValue) {
            setState(() {
              _sliderValue = newValue;
            });
          },
        ),
        Expanded(
          child: ListView.builder(
            itemCount: _getListCount(),
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('항목 $index'),
                subtitle: Text('값: ${index * _sliderValue}'),
              );
            },
          ),
        ),
      ],
    );
  }
}

위의 코드는 Slider와 ListView를 연동하는 방법을 보여주는 간단한 예제입니다. Slider 값을 변경하면 ListView의 항목들이 동적으로 업데이트됩니다.

플러터에서 Slider와 ListView 위젯을 연동하는 방법은 위와 같이 간단하게 구현할 수 있습니다. 완성된 예제 코드를 참고하여 필요에 맞게 적용해 보시기 바랍니다.

참고 자료: