[flutter] 플러터 Stepper를 사용하여 사용자가 선택한 색상으로 화면을 변경하는 테마 변경 애플리케이션을 만들어보자.

07 Dec 2023

flutter

이번에는 플러터의 Stepper 위젯을 사용하여 사용자가 선택한 색상으로 화면의 테마를 변경하는 애플리케이션을 만들어보겠습니다. Stepper 위젯은 여러 단계를 나타내는 인터페이스를 제공해주는데, 각 단계는 사용자가 이전 단계와 다음 단계로 이동할 수 있게 해줍니다.

1. 프로젝트 설정

먼저 플러터 프로젝트를 생성해주세요. 이후 pubspec.yaml 파일에 flutter_colorpicker 패키지를 추가합니다. 이 패키지를 사용하여 색상을 선택할 수 있는 컬러 피커를 구현할 것입니다.

dependencies:
  flutter:
    sdk: flutter

  flutter_colorpicker: ^0.5.0

2. 화면 구성하기

Stepper 위젯을 사용하여 테마 변경 애플리케이션의 화면을 구성해봅시다. 아래의 코드를 main.dart 파일에 추가해주세요.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Changer',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ThemeChangerPage(),
    );
  }
}

class ThemeChangerPage extends StatefulWidget {
  @override
  _ThemeChangerPageState createState() => _ThemeChangerPageState();
}

class _ThemeChangerPageState extends State<ThemeChangerPage> {
  int _currentStep = 0;
  Color _selectedColor = Colors.blue;

  List<Step> _steps = [
    Step(
      title: Text('Step 1'),
      isActive: true,
      content: Text('Select a color'),
    ),
    Step(
      title: Text('Step 2'),
      isActive: false,
      content: Text('Confirm your selection'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Changer'),
      ),
      body: Stepper(
        steps: _steps,
        currentStep: _currentStep,
        onStepTapped: (index) {
          setState(() {
            _currentStep = index;
          });
        },
        onStepContinue: () {
          if (_currentStep < _steps.length - 1) {
            setState(() {
              _currentStep++;
            });
          } else {
            showDialog(
              context: context,
              builder: (_) => AlertDialog(
                title: Text('Theme Changed'),
                content: Text('The theme has been changed to $_selectedColor'),
              ),
            );
          }
        },
        onStepCancel: () {
          if (_currentStep > 0) {
            setState(() {
              _currentStep--;
            });
          }
        },
      ),
    );
  }
}

위 코드는 간단한 테마 변경 애플리케이션을 구현한 것입니다. 앱을 실행하면 Step 1의 내용이 화면에 표시되고, 사용자는 색상을 선택할 수 있게 됩니다.

3. 색상 선택하기

Step 1에서 사용자가 색상을 선택할 수 있도록 구현해보겠습니다. _steps 리스트의 content 부분을 아래의 코드로 변경해주세요.

content: Column(
  children: [
    RaisedButton(
      child: Text('Select a color'),
      onPressed: () {
        showDialog(
          context: context,
          builder: (_) => AlertDialog(
            title: const Text('Choose a color'),
            content: SingleChildScrollView(
              child: ColorPicker(
                pickerColor: _selectedColor,
                onColorChanged: (color) {
                  setState(() {
                    _selectedColor = color;
                  });
                },
                pickerAreaHeightPercent: 0.8,
              ),
            ),
            actions: <Widget>[
              FlatButton(
                child: const Text('Select'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      },
    ),
    SizedBox(height: 20),
    CircleAvatar(
      backgroundColor: _selectedColor,
      radius: 40,
    ),
  ],
),

위 코드에서는 RaisedButton을 사용하여 컬러 피커 다이얼로그를 호출하고, 사용자가 색상을 선택하면 _selectedColor 값을 업데이트합니다. 이후 선택한 색상을 보여주기 위해 CircleAvatar를 사용합니다.

4. 테마 변경하기

Step 2에서는 사용자가 선택한 색상을 최종적으로 테마에 적용할 것입니다. _steps 리스트의 content 부분을 아래의 코드로 변경해주세요.

content: Column(
  children: [
    CircleAvatar(
      backgroundColor: _selectedColor,
      radius: 40,
    ),
    SizedBox(height: 20),
    Text('Confirm your selection'),
    SizedBox(height: 20),
    RaisedButton(
      child: Text('Confirm'),
      onPressed: () {
        showDialog(
          context: context,
          builder: (_) => AlertDialog(
            title: const Text('Theme Changed'),
            content: Text('The theme has been changed to $_selectedColor'),
          ),
        );
      },
    ),
  ],
),

위 코드에서는 선택한 색상을 CircleAvatar로 보여주고, Confirm 버튼을 통해 최종 선택 내용을 다이얼로그로 보여줍니다.

5. 실행해보기

이제 프로젝트를 실행해보세요. 앱이 실행되면 Step 1에 컬러 피커 버튼이 나타나고, 색상을 선택하면서 단계를 이동할 수 있습니다. Step 2에서 Confirm 버튼을 누르면 선택한 색상에 맞게 다이얼로그가 나타날 것입니다.

이렇게 플러터의 Stepper와 컬러 피커를 통해 테마 변경 애플리케이션을 만들어보았습니다. 이 예제를 기반으로 앱을 더욱 개선해나갈 수 있습니다.

참고자료: