[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 적색, 녹색, 청색 값을 설정하는 RGB 컬러 선택기 애플리케이션을 만들어보자.

07 Dec 2023

flutter

개요

이번 예제에서는 플러터의 Stepper 위젯을 활용하여 사용자가 선택한 적색(Red), 녹색(Green), 청색(Blue) 값을 설정하는 RGB 컬러 선택기 애플리케이션을 만들어보겠습니다. Stepper 위젯을 사용하면 간단한 버튼 클릭으로 값을 증가 또는 감소시킬 수 있어 사용자가 원하는 컬러 값을 쉽게 조정할 수 있습니다.

앱 구조

우선 애플리케이션의 구조를 설계해보겠습니다.

1. 앱 상태 관리 변수

애플리케이션에서 사용할 상태 관리 변수를 정의합니다. 우리는 현재 선택된 적색, 녹색, 청색 값을 저장할 변수를 선언할 것입니다.

int red = 0;
int green = 0;
int blue = 0;

2. Stepper 위젯 사용

RGB 컬러 선택기에는 각각의 값에 대한 증가/감소 버튼이 필요합니다. 이를 위해 Flutter의 Stepper 위젯을 사용하겠습니다. Stepper 위젯은 화면에 나타낼 단계 수를 설정하고, 각 단계별 내용을 정의하는 데 사용됩니다.

Stepper(
  steps: [
    Step(
      title: Text('Red'),
      content: Text('$red'),
      isActive: true,
      state: StepState.editing,
    ),
    Step(
      title: Text('Green'),
      content: Text('$green'),
      isActive: true,
      state: StepState.editing,
    ),
    Step(
      title: Text('Blue'),
      content: Text('$blue'),
      isActive: true,
      state: StepState.editing,
    ),
  ],
)

위 코드에서는 세 개의 단계를 가지는 Stepper를 정의하였습니다. 각 단계는 적색, 녹색, 청색을 나타내며, 현재 값을 표시합니다. isActive 속성을 true로 설정하여 각 단계가 활성화되도록 합니다. 또한, state 속성을 StepState.editing으로 설정하여 각 단계가 편집 상태임을 나타냅니다.

3. 버튼 추가

RGB 컬러 값을 증가 또는 감소시키기 위한 버튼을 추가해보겠습니다. 사용자가 버튼을 누를 때마다 해당하는 색상의 값이 증가 또는 감소하도록 합니다.

RaisedButton(
  onPressed: () {
    setState(() {
      red++;
    });
  },
  child: Text('Increase Red'),
),
RaisedButton(
  onPressed: () {
    setState(() {
      green++;
    });
  },
  child: Text('Increase Green'),
),
RaisedButton(
  onPressed: () {
    setState(() {
      blue++;
    });
  },
  child: Text('Increase Blue'),
),

위 코드에서는 RaisedButton 위젯을 사용하여 각각의 버튼을 정의하였습니다. 각 버튼을 누를 때마다 해당하는 색상의 값을 1씩 증가시킵니다. setState() 함수를 호출하여 변화된 값이 화면에 반영되도록 합니다.

결론

이제 플러터의 Stepper 위젯을 활용하여 RGB 컬러 선택기 애플리케이션을 만들어보았습니다. 사용자가 버튼을 클릭하여 각각의 색상 값을 조정할 수 있게 되었습니다. 이를 통해 플러터의 다양한 위젯을 활용하여 유용한 애플리케이션을 개발할 수 있음을 알 수 있습니다.

참고 자료

플러터 공식 문서: https://flutter.dev/docs