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

05 Dec 2023

flutter

이번에는 플러터 Flutter를 사용하여 게시글 보기 시간을 조절하는 기능을 구현해보겠습니다. 이 기능은 사용자가 게시글을 읽을 때, 시간을 조절하여 텍스트의 속도를 조절할 수 있는 기능을 제공합니다. 이를 위해 플러터 커퍼티노(Cupertino) 스테퍼를 사용하겠습니다.

1. 플러터 프로젝트 생성

먼저, 터미널 혹은 커맨드 프롬프트에서 아래 명령어를 사용하여 새로운 플러터 프로젝트를 생성합니다.

flutter create steppertime

프로젝트가 생성되면, main.dart 파일을 열어서 기본 코드를 수정하겠습니다.

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

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

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

class CupertinoStepperPage extends StatefulWidget {
  @override
  _CupertinoStepperPageState createState() => _CupertinoStepperPageState();
}

class _CupertinoStepperPageState extends State<CupertinoStepperPage> {
  double _stepperValue = 5.0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('게시글 시간 조절'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '현재 시간: $_stepperValue 분',
              style: TextStyle(fontSize: 24.0),
            ),
            SizedBox(height: 20.0),
            Container(
              width: 200.0,
              child: CupertinoSlider(
                min: 0,
                max: 10,
                value: _stepperValue,
                onChanged: (double value) {
                  setState(() {
                    _stepperValue = value;
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 CupertinoStepperPage 클래스에서 CupertinoSlider 위젯을 사용하여 값을 조절하고, 조절된 값은 _stepperValue 변수에 저장됩니다. 이 값을 화면에 표시하기 위해 Text 위젯을 사용하였습니다.

2. 시뮬레이터 실행

아래 명령어를 사용하여 프로젝트를 실행합니다.

flutter run

시뮬레이터가 실행되고 앱이 로딩되면, 커퍼티노 스테퍼를 사용하여 조절하는 부분을 확인할 수 있습니다. 조절된 값을 텍스트로 확인할 수 있으며, 사용자가 슬라이더를 조작하면 값을 실시간으로 업데이트합니다.

이제 사용자는 게시글을 읽을 때 커퍼티노 스테퍼를 사용하여 텍스트의 속도를 조절할 수 있습니다.

결론

이번에는 플러터의 커퍼티노 스테퍼를 사용하여 게시글 보기 시간을 조절하는 기능을 구현해보았습니다. 플러터의 다양한 위젯을 활용하여 유연하고 간편하게 기능을 구현할 수 있습니다. 플러터의 다른 위젯들도 활용하여 다양한 앱을 개발해보세요.