[flutter] 플러터 Slider를 사용하여 배경 이미지 또는 컬러를 변경하는 방법은?

08 Dec 2023

flutter

Flutter 앱에서 Slider를 사용하여 배경 이미지나 배경 색상을 변경하는 것은 매우 쉽습니다. 이를 위해 Stateful Widget과 Slider 위젯을 사용하여 배경 이미지의 불투명도를 조절하거나 배경 색상을 RGB 값을 조절할 수 있습니다. 이 글에서는 배경 이미지와 배경 색상을 각각 변경하는 방법을 알아보겠습니다.

배경 이미지 변경하기

먼저, 배경 이미지를 변경하는 방법부터 알아봅시다.

// 배경 이미지 변경을 위한 Stateful Widget
class BackgroundImageChanger extends StatefulWidget {
  @override
  _BackgroundImageChangerState createState() => _BackgroundImageChangerState();
}

class _BackgroundImageChangerState extends State<BackgroundImageChanger> {
  double _opacity = 0.5; // 초기 불투명도
  // 이미지 주소
  String _imageUrl =
      'https://example.com/background.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 배경 이미지
          Image.network(
            _imageUrl,
            fit: BoxFit.cover,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.black.withOpacity(_opacity),
            colorBlendMode: BlendMode.darken,
          ),
          // Slider
          Positioned(
            bottom: 20.0,
            left: 20.0,
            right: 20.0,
            child: Slider(
              value: _opacity,
              min: 0.0,
              max: 1.0,
              onChanged: (value) {
                setState(() {
                  _opacity = value;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 이미지와 Slider를 겹쳐놓고, Slider를 조절함에 따라 이미지의 불투명도를 변경하게 됩니다.

배경 색상 변경하기

이번에는 배경 색상을 변경하는 방법을 살펴봅시다.

// 배경 색상 변경을 위한 Stateful Widget
class BackgroundColorChanger extends StatefulWidget {
  @override
  _BackgroundColorChangerState createState() => _BackgroundColorChangerState();
}

class _BackgroundColorChangerState extends State<BackgroundColorChanger> {
  double _red = 127;
  double _green = 127;
  double _blue = 127;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 배경 색상 박스
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.8,
            color: Color.fromRGBO(
              _red.toInt(),
              _green.toInt(),
              _blue.toInt(),
              1.0,
            ),
          ),
          // Slider (빨간색)
          Slider(
            value: _red,
            min: 0,
            max: 255,
            onChanged: (value) {
              setState(() {
                _red = value;
              });
            },
          ),
          // Slider (초록색)
          Slider(
            value: _green,
            min: 0,
            max: 255,
            onChanged: (value) {
              setState(() {
                _green = value;
              });
            },
          ),
          // Slider (파란색)
          Slider(
            value: _blue,
            min: 0,
            max: 255,
            onChanged: (value) {
              setState(() {
                _blue = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

위 코드에서는 세 개의 Slider를 사용하여 각각 빨강, 초록, 파랑(RGB) 값을 조절하여 배경 색상을 변경합니다.

이제 위의 예제를 참고하여 자유롭게 배경 이미지와 배경 색상을 변경하는 기능을 구현할 수 있을 것입니다.

[GitHub 코드 참고](https://github.com/flutter/flutter)