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

05 Dec 2023

flutter

이번 블로그 포스트에서는 플러터(Flutter) 커퍼티노(Cupertino) 스테퍼(Stepper) 위젯을 이용하여 사진 크기를 조절하는 기능을 구현하는 방법을 알아보겠습니다.

1. 플러터 커퍼티노 스테퍼

플러터 커퍼티노 스테퍼(Cupertino Stepper)는 iOS 디자인 스타일을 따르는 스테퍼 위젯으로써, 값을 증가 또는 감소시킬 수 있는 인터페이스를 제공합니다. 이를 이용하여 사진 크기 조절 기능을 구현할 수 있습니다.

2. 사진 크기 조절 기능 구현하기

먼저, 플러터 앱 프로젝트를 생성하고 필요한 의존성을 추가합니다. 이번 예제에서는 photo_view 패키지를 사용하여 사진을 화면에 표시하고 크기를 조절합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Photo Editor'),
        ),
        child: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  double _photoScale = 1.0;

  void _changeScale(double value) {
    setState(() {
      _photoScale = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          SizedBox(height: 16.0),
          Text(
            'Photo Size',
            style: TextStyle(fontSize: 20.0),
          ),
          SizedBox(height: 16.0),
          Text(
            'Scale: $_photoScale',
            style: TextStyle(fontSize: 16.0),
          ),
          SizedBox(height: 16.0),
          Container(
            height: 300,
            child: PhotoView(
              imageProvider: NetworkImage(
                'https://example.com/photo.jpg',
              ),
              minScale: 0.1,
              maxScale: 2.0,
              scaleStateChangedCallback: (scaleState) {
                _changeScale(scaleState.scale);
              },
            ),
          ),
          SizedBox(height: 16.0),
          CupertinoStepper(
            value: _photoScale,
            onChanged: _changeScale,
            stepValue: 0.1,
            min: 0.1,
            max: 2.0,
            decimalPlaces: 1,
          ),
        ],
      ),
    );
  }
}

위 예제 코드에서는 CupertinoPageScaffold를 사용하여 머터리얼(Material) 디자인이 아닌 커퍼티노 디자인 스타일을 구현했습니다. PhotoView 위젯은 photo_view 패키지에 포함되어 있으며, 네트워크 이미지를 표시하고 크기 조절을 위해 minScale, maxScale, scaleStateChangedCallback 등을 설정합니다.

CupertinoStepper 위젯은 스테퍼를 구현하는 위젯으로서, value, onChanged, stepValue, min, max, decimalPlaces 등을 설정하여 값을 조정할 수 있습니다.

이제 프로젝트를 실행하면 사진이 화면에 표시되고 스테퍼를 조작하여 해당 사진의 크기를 조절할 수 있습니다.

3. 결론

이번 포스트에서는 플러터 커퍼티노 스테퍼를 이용하여 사진 크기 조절 기능을 구현하는 방법을 알아보았습니다. 플러터를 사용하면 다양한 사용자 인터페이스를 쉽게 구현할 수 있으며, 커퍼티노 스타일을 사용하여 iOS 앱과 동일한 사용자 경험을 제공할 수 있습니다.

참고 링크: