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

08 Dec 2023

flutter

1. Slider와 GridView 위젯 소개

먼저 Slider와 GridView 위젯을 간단히 소개하겠습니다.

Slider 위젯

Slider 위젯은 사용자가 값을 선택하도록 하는 데 사용되며, 사용자가 값을 조절하는 슬라이더를 제공합니다.

예시:

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  onChanged: (double value) {
    setState(() {
      _currentSliderValue = value;
    });
  },
)

GridView 위젯

GridView 위젯은 격자 형태로 여러 항목을 표시하는 데 사용됩니다. 다양한 레이아웃 옵션을 제공하여 다양한 스타일의 그리드를 만들 수 있습니다.

예시:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.blue,
      margin: EdgeInsets.all(8),
    );
  },
  itemCount: 4,
)

2. Slider와 GridView 위젯 연동 방법

Slider와 GridView를 연동하여 GridView의 항목 개수나 레이아웃을 Slider로 조절하려면, Slider의 값을 변경할 때마다 GridView를 다시 빌드해야 합니다.

다음은 Slider의 값을 변경할 때마다 GridView를 다시 빌드하는 예시 코드입니다:

double _currentSliderValue = 2;

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Slider(
        value: _currentSliderValue,
        min: 2,
        max: 10,
        divisions: 8,
        onChanged: (double value) {
          setState(() {
            _currentSliderValue = value;
          });
        },
      ),
      Expanded(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: _currentSliderValue.toInt(),
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.blue,
              margin: EdgeInsets.all(8),
            );
          },
          itemCount: 8,
        ),
      ),
    ],
  );
}

위 코드에서 Slider의 값을 조절하면, GridView의 crossAxisCount가 해당 값으로 바뀌어 그리드의 레이아웃이 변경됩니다.

플러터에서 Slider와 GridView 위젯을 연동하는 방법에 대한 간단한 소개였습니다. 더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.