[flutter] 플러터 커퍼티노 스테퍼를 이용한 백업 주기 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로, iOS와 Android 모두에서 동작하는 앱을 만들 수 있습니다. 이번 포스트에서는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 백업 주기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS 스타일의 스테퍼 위젯으로, 플러터 프로젝트에서 iOS 디자인을 원할 때 주로 사용됩니다. 스테퍼는 사용자가 값을 증가 또는 감소할 수 있는 컨트롤을 제공하며, 숫자나 날짜와 같은 값을 선택할 때 유용합니다.

2. 프로젝트 설정

먼저, 플러터 프로젝트를 생성하고 커퍼티노 패키지를 추가해야 합니다. 다음 명령어를 실행하여 패키지를 추가합니다:

flutter pub add cupertino_icons

3. 코드 구현

먼저, main.dart 파일에서 CupertinoApp을 사용하여 앱을 생성합니다. 그리고 HomePage 위젯을 생성하여 앱의 홈 화면을 구성합니다.

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Backup Settings',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double backupInterval = 24.0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Backup Settings'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Backup Interval: $backupInterval hours'),
            SizedBox(height: 16.0),
            CupertinoStepper(
              value: backupInterval,
              onChanged: (newValue) {
                setState(() {
                  backupInterval = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 backupInterval 변수를 사용하여 백업 주기 값을 저장하고, CupertinoStepper를 사용하여 해당 값을 조절할 수 있도록 합니다. CupertinoStepper 위젯의 value 속성은 현재 선택된 값을, onChanged 속성은 사용자가 값을 변경할 때 실행되는 콜백 함수를 지정합니다.

4. 실행 결과

이제 앱을 실행해보면, 화면에 “Backup Interval: 24.0 hours” 텍스트와 스테퍼 위젯이 표시됩니다. 스테퍼 위젯의 값을 변경하면 텍스트에 반영되며, 사용자는 이를 통해 백업 주기를 조절할 수 있습니다.

5. 마무리

이번 포스트에서는 플러터의 커퍼티노 스테퍼를 이용하여 백업 주기를 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 스테퍼를 사용하여 사용자 인터페이스를 향상시키고 앱의 유용성을 높일 수 있습니다. 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.