[flutter] 플러터 커퍼티노 스테퍼를 이용한 색상 선택 기능 구현하기

05 Dec 2023

flutter

이번에는 Flutter에서 커퍼티노 스테퍼를 사용하여 사용자가 색상을 선택할 수 있는 기능을 구현해보겠습니다. 커퍼티노 스테퍼는 iOS 스타일의 스텝 표시 장치로서, iOS 디자인에 맞추어 앱을 개발할 때 유용하게 사용될 수 있습니다.

단계 1: 커퍼티노 스테퍼 위젯 가져오기

먼저, 프로젝트의 pubspec.yaml 파일에 cupertino_icons 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3

그런 다음, main.dart 파일에서 CupertinoSlider 위젯을 import해옵니다:

import 'package:flutter/cupertino.dart';

단계 2: 커퍼티노 스테퍼 구현하기

이제 main.dart 파일에서 StatefulWidget을 사용하여 색상 선택 기능을 구현하는 클래스를 작성해보겠습니다:

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

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

class ColorPickerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Picker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ColorPickerScreen(),
    );
  }
}

class ColorPickerScreen extends StatefulWidget {
  @override
  _ColorPickerScreenState createState() => _ColorPickerScreenState();
}

class _ColorPickerScreenState extends State<ColorPickerScreen> {
  double _redValue = 0.0;
  double _greenValue = 0.0;
  double _blueValue = 0.0;

  Color getSelectedColor() {
    int red = (_redValue * 255).round();
    int green = (_greenValue * 255).round();
    int blue = (_blueValue * 255).round();
    return Color.fromRGBO(red, green, blue, 1.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Picker'),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Red: ${(_redValue * 255).round()}',
                style: TextStyle(fontSize: 20.0),
              ),
              CupertinoSlider(
                value: _redValue,
                min: 0.0,
                max: 1.0,
                onChanged: (value) {
                  setState(() {
                    _redValue = value;
                  });
                },
              ),
              SizedBox(height: 20.0),
              Text(
                'Green: ${(_greenValue * 255).round()}',
                style: TextStyle(fontSize: 20.0),
              ),
              CupertinoSlider(
                value: _greenValue,
                min: 0.0,
                max: 1.0,
                onChanged: (value) {
                  setState(() {
                    _greenValue = value;
                  });
                },
              ),
              SizedBox(height: 20.0),
              Text(
                'Blue: ${(_blueValue * 255).round()}',
                style: TextStyle(fontSize: 20.0),
              ),
              CupertinoSlider(
                value: _blueValue,
                min: 0.0,
                max: 1.0,
                onChanged: (value) {
                  setState(() {
                    _blueValue = value;
                  });
                },
              ),
              SizedBox(height: 20.0),
              Container(
                width: 200.0,
                height: 200.0,
                decoration: BoxDecoration(
                  color: getSelectedColor(),
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 _redValue, _greenValue, _blueValue 변수를 사용하여 사용자가 선택한 색상을 저장합니다. CupertinoSlider 위젯을 사용하여 사용자가 색상을 선택하면 해당 값이 업데이트되고, getSelectedColor 함수를 통해 실제 색상을 계산합니다. 마지막으로, Container 위젯을 사용하여 선택된 색상을 화면에 표시합니다.

단계 3: 앱 실행해보기

이제 앱을 실행해보면 커퍼티노 스테퍼를 사용하여 색상을 선택할 수 있는 화면이 나타납니다. 색상 슬라이더를 움직여 적절한 색상을 선택하면 선택된 색상이 표시됩니다.

이상으로 커퍼티노 스테퍼를 이용한 색상 선택 기능을 구현하는 방법에 대해 알아보았습니다. 색상 선택 기능을 포함하는 앱을 개발할 때 이 기능을 활용해보세요!

단계 1: 커퍼티노 스테퍼 위젯 가져오기

단계 2: 커퍼티노 스테퍼 구현하기

단계 3: 앱 실행해보기

참고 자료