[flutter] 플러터 커퍼티노 스테퍼를 이용한 사진 필터 강도 조절 기능 구현하기

05 Dec 2023

flutter

이번 블로그 포스트에서는 플러터(Flutter) 애플리케이션에서 사진 필터의 강도를 조절할 수 있는 기능을 구현하는 방법을 알아보겠습니다. 이를 위해 플러터의 커퍼티노 스테퍼(Cupertino Stepper) 위젯을 사용할 것입니다.

1. 필요한 패키지 추가하기

먼저, cupertino_icons 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해 주세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

변경사항을 적용하기 위해 터미널에서 flutter pub get 명령을 실행하세요.

2. 스테퍼 위젯 구현하기

이제 스테퍼 위젯을 사용하여 사진 필터의 강도를 조절하는 UI를 구현해 보겠습니다. 다음과 같이 코드를 작성해 주세요:

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

class FilterIntensityScreen extends StatefulWidget {
  @override
  _FilterIntensityScreenState createState() => _FilterIntensityScreenState();
}

class _FilterIntensityScreenState extends State<FilterIntensityScreen> {
  double _filterIntensity = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('사진 필터 강도 조절'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Filter Intensity: ${_filterIntensity.toStringAsFixed(1)}',
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(height: 20.0),
            CupertinoStepper(
              value: _filterIntensity,
              onChanged: (newValue) {
                setState(() {
                  _filterIntensity = newValue;
                });
              },
              min: 0.0,
              max: 10.0,
              step: 0.1,
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 FilterIntensityScreen 클래스를 정의하고, _FilterIntensityScreenState 클래스를 통해 상태를 관리합니다. _filterIntensity 변수는 필터 강도를 저장하고, CupertinoStepper 위젯을 사용하여 강도 값을 조정할 수 있습니다.

3. 필터 강도 조절 기능 사용하기

이제 필터 강도 조절 기능을 사용하기 위해 해당 화면으로 이동하는 코드를 작성해 보겠습니다. 다른 화면에서 버튼을 누를 경우, FilterIntensityScreen으로 이동하게 할 수 있습니다. 예를 들어, 다음과 같이 코드를 작성해 주세요:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Filter Intensity Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => FilterIntensityScreen(),
              ),
            );
          },
          child: Text('사진 필터 강도 조절'),
        ),
      ),
    );
  }
}

위의 코드는 앱의 메인 진입점인 MyApp 클래스를 정의하고, FilterIntensityScreen을 포함한 MaterialApp을 생성합니다. HomeScreen 클래스에서는 사진 필터 강도 조절 버튼을 누를 경우 FilterIntensityScreen으로 이동하도록 설정해 주었습니다.

이제 앱을 실행하여 사진 필터 강도를 조절해 볼 수 있습니다.

결론

이번 포스트에서는 플러터의 커퍼티노 스테퍼를 사용하여 사진 필터 강도를 조절하는 기능을 구현하는 방법을 알아보았습니다. 필터 강도 조절 기능을 추가하여 사용자에게 다양한 옵션을 제공하는 애플리케이션을 개발할 수 있을 것입니다.

더 자세한 정보는 플러터 공식 문서를 참조하세요.