[flutter] 플러터 커퍼티노 스테퍼를 이용한 시간 선택 기능 구현하기

05 Dec 2023

flutter

플러터에서 시간 선택 기능을 구현하고 싶을 때, 커퍼티노 스테퍼를 사용할 수 있습니다. 커퍼티노 스테퍼는 iOS 스타일의 시간 선택 위젯으로, 사용자가 시간을 선택할 수 있도록 도와줍니다.

1. 커퍼티노 스테퍼 추가하기

먼저, cupertino_icons 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

그리고, 다음과 같이 커퍼티노 스테퍼를 추가합니다.

CupertinoStepper(
  value: _selectedTime,
  onChanged: (value) {
    setState(() {
      _selectedTime = value;
    });
  },
  min: 0,
  max: 24,
  stepValue: 1,
),

위 코드에서 _selectedTime은 현재 선택된 시간값을 나타내는 변수입니다.

2. 시간 값 변환하기

커퍼티노 스테퍼는 실제로 선택한 값을 double 형태로 반환합니다. 따라서, 이를 시간 형식으로 변환해주어야 합니다.

String _getTimeString(double value) {
  int hours = value.toInt();
  int minutes = ((value - hours) * 60).toInt();
  String hoursString = hours.toString().padLeft(2, '0');
  String minutesString = minutes.toString().padLeft(2, '0');
  return '$hoursString:$minutesString';
}

// 사용 예시
Text(_getTimeString(_selectedTime)),

위 코드에서 _getTimeString 함수는 double 형태의 값을 받아 시간 형식(hh:mm)으로 변환한 뒤 문자열로 반환합니다.

3. 전체 코드

이제 전체적인 코드를 살펴보겠습니다.

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _selectedTime = 0;

  String _getTimeString(double value) {
    int hours = value.toInt();
    int minutes = ((value - hours) * 60).toInt();
    String hoursString = hours.toString().padLeft(2, '0');
    String minutesString = minutes.toString().padLeft(2, '0');
    return '$hoursString:$minutesString';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CupertinoStepper(
              value: _selectedTime,
              onChanged: (value) {
                setState(() {
                  _selectedTime = value;
                });
              },
              min: 0,
              max: 24,
              stepValue: 1,
            ),
            SizedBox(height: 16),
            Text(_getTimeString(_selectedTime)),
          ],
        ),
      ),
    );
  }
}

결론

이제, 플러터 커퍼티노 스테퍼를 이용하여 시간 선택 기능을 구현하는 방법을 알게 되었습니다. 커퍼티노 스테퍼를 사용하면 iOS 스타일의 시간 선택 위젯을 쉽게 구현할 수 있습니다.