6. 타이머 시간 선택 하기 - CupertinoTimerPicker

시중에 있는 책의 예제는 보통 이렇게 시간을 가게 하고 끝나는데...

솔직히 누가 시간 정해진 타이머를 쓰는가... 시간을 내가 선택 하려면 어떻게 해야할지 찾아보니

여러가지 시간 선택 위젯이 있지만, 나는 아이폰 스타일의 CupertinoTimerPicker 를 사용해 보도록 하겠다.

 

앞에서 만든 타이머 코드와 섞으면 헷갈리니 (나의 한계다)

별도의 코드에 일단 시간만 선택해 보는 코드를 만들어 본다.

 

아래와 같이 기본 셋팅을 하고..

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(title: const Text("Time Select")),

        body: const numberpicker(),

      ),

    );

  }

}

 

numberpicker 라는 클래스를  StatelessWidget으로 만들어 주면서 CupertinoTimerPicker 을 반환한다.

class numberpicker extends StatelessWidget {

  const numberpicker({super.key});

  @override

  Widget build(BuildContext context) {

    return CupertinoTimerPicker(

        onTimerDurationChanged: (value) {

        });

  }

}

 

CupertinoTimerPicker  을 잘 모르니...구글 검색이나. 정의를 보면서 참고한다...

구글 검색에 보면 onTimerDurationChanged 함수를 (일단은) 정의하는 것으로 나와 있어..위와 같이 써 놓고,

정의를 추가로 찾아보면 아래와 같다.

CupertinoTimerPicker({
    super.key,
    this.mode = CupertinoTimerPickerMode.hms,
    this.initialTimerDuration = Duration.zero,
    this.minuteInterval = 1,
    this.secondInterval = 1,
    this.alignment = Alignment.center,
    this.backgroundColor,
    required this.onTimerDurationChanged,

일단 나는 시간, 분 만 표시 하고 싶으니 mode를 눈여겨 보고 CupertinoTimerPickerMode 의 정의로 다시 들어간다

enum CupertinoTimerPickerMode {
  /// Mode that shows the timer duration in hour and minute.
  ///
  /// Examples: 16 hours | 14 min.
  hm,
  /// Mode that shows the timer duration in minute and second.
  ///
  /// Examples: 14 min | 43 sec.
  ms,
  /// Mode that shows the timer duration in hour, minute, and second.
  ///
  /// Examples: 16 hours | 14 min | 43 sec.
  hms,
}

아항 나는 hm을 쓰면 되는것을 알 수 있다.

추가로 onTimerDurationChanged 함수에서 선택값이 바뀌면 출력이 되도록 print 를 해본다.

value 값은 시간 함수이기 때문에 value.inMinutes를 하면 분으로 자동으로 바껴서 나온다. (오홍! o.o)

    return CupertinoTimerPicker(

        mode: CupertinoTimerPickerMode.hm,

        onTimerDurationChanged: (value) {

          print(value.toString());

          print(value.inMinutes);

        });

 

 

위와 같이 3시간 8분 이면 188분으로 잘 표시됨을 확인 할 수 있다.

 

이제 타이머에 숫자를 "선택" 할 수 있게 위젯을 붙이면 된다.

 

힘들다....

 

<소스 코드>

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(title: const Text("Time Select")),

        body: const numberpicker(),

      ),

    );

  }

}

class numberpicker extends StatelessWidget {

  const numberpicker({super.key});

  @override

  Widget build(BuildContext context) {

    return CupertinoTimerPicker(

        mode: CupertinoTimerPickerMode.hm,

        onTimerDurationChanged: (value) {

          print(value.toString());

          print(value.inMinutes);

        });

  }

}