[flutter] 플러터 커퍼티노 스테퍼를 이용한 첫화면 보기 시간 조절 기능 구현하기

05 Dec 2023

flutter

Flutter

본 문서에서는 플러터(Flutter)를 사용하여 커퍼티노 스테퍼(Cupertino Stepper)를 활용하여 첫화면 보기 시간을 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

프로젝트 설정

먼저, Flutter 프로젝트를 설정합니다. Flutter SDK가 설치되어있지 않다면, 공식 홈페이지에서 설치할 수 있습니다.

flutter create my_app

프로젝트 폴더에 이동한 뒤, pub get 명령어로 종속성을 설치합니다.

cd my_app
flutter pub get

커퍼티노 스테퍼 추가

lib/main.dart 파일을 열고, 다음과 같이 CupertinoApp 위젯을 생성합니다.

import 'package:flutter/cupertino.dart';

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

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

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

class _HomePageState extends State<HomePage> {
  double _viewingTime = 5.0; // 초기값 설정

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Home'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Viewing Time: $_viewingTime seconds',
            ),
            SizedBox(height: 16),
            CupertinoStepper(
              value: _viewingTime,
              onChanged: (newValue) {
                setState(() {
                  _viewingTime = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

시간 조절 기능 구현

HomePage 클래스에서 _viewingTime 변수를 생성하여 초기값을 5.0으로 설정합니다. 그리고 _HomePageState 클래스에서 CupertinoStepper 위젯을 사용하여 시간 조절 기능을 구현합니다.

CupertinoStepper 위젯은 value 속성에 현재 값을, onChanged 속성에 값이 변경될 때 호출될 함수를 전달합니다. setState 함수를 사용하여 상태를 갱신하는 방법으로 값을 업데이트합니다.

위 코드를 실행하면, 플러터 앱이 실행되고 커퍼티노 스테퍼를 사용하여 첫화면 보기 시간을 조절할 수 있게 됩니다.

이 문서에서는 플러터 커퍼티노 스테퍼를 이용하여 첫화면 보기 시간 조절 기능을 구현하는 방법에 대해 알아보았습니다. 추가적인 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.

목차

프로젝트 설정

커퍼티노 스테퍼 추가

시간 조절 기능 구현