[flutter] 플러터 커퍼티노 스테퍼를 이용한 지도 측정 단위 조절 기능 구현하기

05 Dec 2023

flutter

지도 앱에서 사용자가 특정 지점을 선택하고 측정할 때, 일반적으로는 측정 단위를 선택할 수 있는 기능이 필요합니다. 이번 예제에서는 플러터의 Cupertino 스타일의 스테퍼 위젯을 이용하여 사용자가 지도 측정 단위를 조절할 수 있는 기능을 구현해보겠습니다.

Cupertino 스테퍼 위젯 추가하기

먼저, cupertino_icons 패키지를 추가해야 합니다. pubspec.yaml 파일을 열고 아래와 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

그리고 pubspec.lock 파일이 업데이트되도록 터미널에서 flutter pub get 명령을 실행해주세요.

이제 코드에서 Cupertino 스테퍼 위젯을 사용할 준비가 되었습니다.

코드 구현하기

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

class MapMeasureScreen extends StatefulWidget {
  @override
  _MapMeasureScreenState createState() => _MapMeasureScreenState();
}

class _MapMeasureScreenState extends State<MapMeasureScreen> {
  double _measurement = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('지도 측정 단위'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              '측정 단위: $_measurement',
              style: TextStyle(fontSize: 20),
            ),
          ),
          SizedBox(height: 20),
          CupertinoSlider(
            value: _measurement,
            min: 0.1,
            max: 10.0,
            divisions: 100,
            onChanged: (double newValue) {
              setState(() {
                _measurement = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}

위의 코드는 MapMeasureScreen 위젯을 정의하고, CupertinoNavigationBar와 Column 위젯을 사용하여 앱의 화면을 구성합니다. CupertinoSlider 위젯은 스테퍼 역할을 하며, value, min, max, divisions, onChanged 등의 속성을 설정할 수 있습니다.

사용하기

위의 코드를 main.dart 파일에 추가한 후, 필요한 곳에서 MapMeasureScreen을 호출하여 사용할 수 있습니다. 이제 앱을 실행하면 지도 측정 단위를 조절할 수 있는 화면이 표시될 것입니다.

마무리

이번 예제에서는 플러터의 Cupertino 스타일의 스테퍼 위젯을 이용하여 지도 측정 단위를 조절하는 기능을 구현해보았습니다. 이를 활용하여 사용자가 지도 앱에서 원하는 측정 단위를 선택할 수 있게끔 기능을 추가할 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.