Flutter에서 iOS 스타일 CupertinoTimerPicker를 만드는 방법은 무엇입니까?

Flutter의 Cupertino 타이머 선택기는 iOS 스타일의 countdown timer picker입니다. CupertinoTimerPicker 위젯을 사용하여 애플리케이션에 iOS 스타일의 카운트다운 타이머 선택기를 추가할 수 있습니다.

타이머 선택기를 사용하여 카운트다운 타이머의 시간을 설정할 수 있습니다. 카운트다운 타이머의 선택기로 사용하는 대신 시간 선택기로 사용할 수 있습니다.

그래서 이번 글에서는 Flutter에서 Cupertino 타이머 선택기를 사용하는 방법에 대해 알아보겠습니다. A 평판Flutter mobile app development company은 CupertinoTimerPicker 위젯의 모양을 변경하는 데 사용할 수 있는 다른 속성도 발견합니다.

Flutter는 cupertino 타이머 선택기를 생성하기 위해 CupertinoTimerPicker 클래스가 필요합니다. 작업은 생성자를 호출하고 필요한 속성을 전달하여 완료할 수 있습니다. onTimerDurationChanged 속성만 있으면 됩니다. 콜백 함수는 받는 값입니다.

다른 위젯과 달리 타이밍 선택기를 계속 표시할 필요가 없습니다. 이벤트가 발생하면 표시해야 합니다. 예를 들어 버튼을 클릭하거나 다른 위젯을 클릭하면 됩니다. 일반적으로 showCupertinoModalPopup 또는 showModalBottomSheet을 사용하여 타이머 선택기를 표시합니다.

다음은 CupertinoTimerPicker의 생성자입니다.

CupertinoTimerPicker(
{Key? key,
CupertinoTimerPickerMode mode = CupertinoTimerPickerMode.hms,
Duration initialTimerDuration = Duration.zero,
int minuteInterval = 1,
int secondInterval = 1,
AlignmentGeometry alignment = Alignment.center,
Color? backgroundColor,
required ValueChanged onTimerDurationChanged}
)

다음은 CupertinoTimerPicker의 속성입니다.

1. 모드 속성: 모드는 기본적으로 CupertinoTimerPickerMode.hms로 설정되며 CupertinoTimerPickerMode에서 제공하는 모드 중 하나입니다.

2. initialTimeDuration 속성: InitialTimerDuration의 기본값은 0이고 최대값은 23시간 59분 59초입니다.

3. minuteInterval 속성: 분 스피너의 세분성은 minuteInterval입니다. 60 양의 정수 배수가 있어야 합니다.

4. secondInterval 속성: 두 번째 스피너의 세분성은 secondInterval입니다. 60 양의 정수 배수가 있어야 합니다.

5. 정렬 속성: Alignment로 생성된 클래스 및 해당 변형은 이러한 종류의 속성 또는 인수에서 허용됩니다.

6. backgroundColor 속성: 이 매개변수를 사용하여 피커의 배경색을 수정합니다. CupertinoColors 또는 색상 클래스 상수가 값으로 허용됩니다.

7. onTimerDurationChanged 속성: 콜백 함수는 받는 값입니다. 사용자가 선택기에서 시간을 수정할 때마다 이 함수가 호출됩니다. 이 메서드 내에서 가장 최근 시간을 가져옵니다. setState() 함수를 사용하여 이 값으로 UI를 업데이트합니다.

Flutter에서 CupertinoTimerPicker 위젯을 사용하여 cupertino 타이머 선택기를 만드는 예제를 만들어 봅시다. 클릭하면 선택기가 표시되는 버튼을 표시합니다. 사용자가 시간을 선택하면 Text widget에 시간이 표시됩니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()
{
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState()
{
return _MyHomePageState();
}
}
class _MyHomePageState extends State {
TextEditingController controller = TextEditingController();
Duration? selectedValue;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Time Picker"),
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child:
Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
TextFormField(
controller: controller,
onTap: () {
showTimerPicker();
},
),
]),
),
);
}
void showTimerPicker() {
showModalBottomSheet(
context: context,
builder: (BuildContext builder) {
return Container(
height: MediaQuery.of(context).copyWith().size.height * 0.25,
width: double.infinity,
color: Colors.white,
child: CupertinoTimerPicker(
onTimerDurationChanged: (value) {
selectedValue = value;
controller.text = selectedValue.toString();
setState(() {});
},
));
});
}
}

산출

결론

이상으로 Flutter에서 Cupertino Timer Picker를 생성하고 사용하는 방법에 대한 강의를 마칩니다. 또한 CupertinoTimerPicker 위젯을 사용하고 모양을 변경하는 방법도 시연했습니다. 여러분이 이 글을 이해하고 즐기시기 바랍니다. 이를 통해 우리가 모바일 애플리케이션 개발의 전문가이며 우리로부터 할 수 있다는hire Flutter engineers 아이디어를 얻을 수 있습니다.

자주 묻는 질문(FAQ)

1. Flutter에서 Cupertino의 디자인은 무엇입니까?

쿠퍼티노 디자인을 활용한 어플리케이션은 iOS 디자인 기반 어플리케이션에서 주로 사용하는 위젯을 감싸는 편리한 위젯이 있습니다. 스크롤 물리학 및 글꼴과 같은 특정 기본값으로 iOS의 WidgetsApp에서 생성됩니다.

2. Flutter 날짜 범위 선택기가 허용하는 것은 무엇입니까?

사용자가 단일 날짜 또는 여러 날짜를 쉽게 선택할 수 있습니다. 원하는 날짜로 더 빠르게 탐색할 수 있는 4개의 기본 제공 보기가 있습니다.

3. Cupertino 날짜 선택기에서 날짜를 숨길 수 있나요?

물론이죠! date picker 에서 월과 연도만 선택해야 합니다.

4. 텍스트 필드 탭에서 시간 선택기를 보고 Flutter에서 형식화된 시간을 가져오는 방법은 무엇입니까?

TextField or TextFormField을 생성하고 사용자가 특정 필드를 클릭하면 시간 선택기 대화 상자가 나타납니다. 여기서는 선택기에서 형식이 지정된 시간을 가져오고 결과 값을 TextFormField 및 TextField로 설정합니다.