[flutter] 플러터 커퍼티노 스테퍼를 이용한 스크린샷 해상도 조절 기능 구현하기

05 Dec 2023

flutter

이번 블로그 포스트에서는 플러터의 커퍼티노 스테퍼를 이용하여 스크린샷의 해상도를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS 앱에서 널리 사용되는 UI 요소 중 하나로, 숫자 값을 증감시키는데 사용됩니다. 스크린샷 해상도 조절 기능을 구현하기 위해 이용할 예정입니다.

2. 프로젝트 설정

플러터 프로젝트를 생성하고 해당 프로젝트의 pubspec.yaml 파일에 다음 패키지를 추가합니다.

dependencies:
  flutter/cupertino.dart: ^1.0.0

3. 스크린샷 해상도 조절 기능 구현

다음과 같이 코드를 작성하여 스크린샷 해상도 조절 기능을 구현할 수 있습니다.

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

class ScreenshotResolutionSelector extends StatefulWidget {
  @override
  _ScreenshotResolutionSelectorState createState() => _ScreenshotResolutionSelectorState();
}

class _ScreenshotResolutionSelectorState extends State<ScreenshotResolutionSelector> {
  double _resolution = 1.0; // 초기 해상도 값은 1.0

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '해상도 조절: ${_resolution.toStringAsFixed(2)}x',
            style: TextStyle(fontSize: 18.0),
          ),
          SizedBox(height: 10.0),
          CupertinoSlider(
            min: 1.0,
            max: 2.0,
            divisions: 10,
            value: _resolution,
            onChanged: (double value) {
              setState(() {
                _resolution = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('스크린샷 해상도 조절'),
      ),
      body: ScreenshotResolutionSelector(),
    ),
  ));
}

위의 코드에서 ScreenshotResolutionSelector 위젯은 커퍼티노 스테퍼로 해상도를 조절하는 UI를 구현한 것입니다. CupertinoSlider 위젯을 이용하여 슬라이더를 생성하고, 해당 슬라이더에서 값이 변경될 때마다 _resolution 변수의 값을 갱신합니다.

위 코드를 실행하면 앱 화면에 해상도 조절 슬라이더가 보이며, 슬라이더를 조작하면 화면의 해상도가 변경됩니다.

마무리

위에서는 플러터의 커퍼티노 스테퍼를 이용하여 스크린샷의 해상도를 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 커퍼티노 스테퍼 외에도 플러터는 다양한 UI 요소를 제공하므로, 다양한 UI를 구성하는 방법을 익혀서 원하는 기능을 구현해보세요.

참고 자료: