[flutter] 플러터 커퍼티노 스테퍼를 이용한 환경 설정 저장 주기 조절 기능 구현하기

05 Dec 2023

flutter

소개

애플의 iOS 디자인을 모방한 플러터 커퍼티노(Cupertino) 디자인은 플러터에서 플랫폼별 네이티브 디자인을 구현하기 위해 사용됩니다. 커퍼티노 스테퍼는 iOS의 설정 창에서 자주 사용되며, 숫자 값을 증감할 수 있는 기능을 제공합니다.

이번 기사에서는 플러터의 커퍼티노 스테퍼 위젯을 사용하여 사용자가 환경 설정의 저장 주기를 조절할 수 있는 기능을 구현하는 방법을 알아보겠습니다.

구현 방법

플러터 프로젝트를 생성하고 필요한 의존성을 추가합니다. 의존성은 cupertino_icons와 flutter_cupertino_settings 패키지를 추가하면 됩니다.
main.dart 파일에 설정 저장 주기를 조절하는 페이지를 구현할 Stateful 위젯을 생성합니다. 이 위젯은 CupertinoSettings 위젯을 사용하여 iOS 스타일의 설정을 표시하고, 커퍼티노 스테퍼를 사용자에게 제공합니다.
스테퍼의 현재 값을 저장하고 관리하기 위해 SharedPreferences 패키지를 사용합니다. 필요한 의존성을 추가한 후, SharedPreferences 인스턴스를 생성하고 스테퍼의 값이 변경될 때마다 저장소에 값을 저장합니다.
최종적으로, 설정 페이지를 앱 내의 다른 페이지로 이동할 수 있도록 구현합니다. 이를 위해 Navigator 클래스를 사용하여 페이지를 전환하는 로직을 추가합니다.

코드 예시

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SettingsPage(),
    );
  }
}

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  double _saveInterval = 1;

  @override
  void initState() {
    super.initState();
    _loadSettings();
  }

  void _loadSettings() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _saveInterval = prefs.getDouble('saveInterval') ?? 1;
    });
  }

  void _saveSettings(double value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _saveInterval = value;
    });
    prefs.setDouble('saveInterval', value);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: SafeArea(
        child: CupertinoSettings(
          items: <Widget>[
            CSHeader('Save Settings Interval'),
            CSSlider(
              value: _saveInterval,
              min: 0.5,
              max: 10,
              onChanged: _saveSettings,
            ),
          ],
        ),
      ),
    );
  }
}

결론

이번 기사에서는 플러터 커퍼티노 스테퍼를 사용하여 환경 설정의 저장 주기를 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 커퍼티노 스테퍼를 활용하여 플러터 앱에 iOS 스타일의 설정 페이지를 구현하고, 스테퍼의 값이 변경될 때마다 설정을 저장할 수 있었습니다.

커퍼티노 디자인의 다른 위젯들도 마찬가지로 사용할 수 있으므로, 플러터 앱에서 다양한 iOS 디자인 요소를 구현할 수 있습니다.

목차

소개

구현 방법

코드 예시

결론