[flutter] 플러터 커퍼티노 스테퍼를 이용한 점수 단위 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter) 프레임워크는 iOS와 비슷한 디자인 스타일을 가지는 컴포넌트를 제공합니다. 이 중 하나인 커퍼티노 스테퍼(Cupertino Stepper)를 사용하여 사용자가 원하는 점수를 조절할 수 있는 기능을 구현해보겠습니다.

커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS의 스텝 피커와 비슷한 사용자 인터페이스를 가진 위젯입니다. 사용자가 값을 조절할 수 있는 버튼과 현재 값이 표시되는 라벨로 구성되어 있습니다.

구현 방법

먼저, 플러터 프로젝트를 생성하고 cupertino_icons 패키지를 추가합니다. pubspec.yaml 파일에 다음 코드를 추가해주세요:
```
dependencies:
  cupertino_icons: ^1.0.2
```

새로운 파일을 생성하고 아래와 같이 코드를 작성해주세요:

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(
      title: 'Stepper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _score = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stepper Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Score:',
              style: TextStyle(fontSize: 24.0),
            ),
            Text(
              _score.toStringAsFixed(1),
              style: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 24.0),
            CupertinoStepper(
              value: _score,
              onChanged: (double newValue) {
                setState(() {
                  _score = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

커퍼티노 스테퍼를 사용하기 위해 import 'package:flutter/cupertino.dart';와 import 'package:flutter/material.dart';를 추가했습니다. CupertinoStepper 위젯을 사용하여 점수 값을 조절할 수 있게 했습니다.
앱을 실행하면 초기 점수 0.0이 표시되며, 커퍼티노 스테퍼를 사용하여 값을 조절할 수 있습니다.

CupertinoStepper(
  value: _score,
  onChanged: (double newValue) {
    setState(() {
      _score = newValue;
    });
  },
),

위 코드에서 value는 현재 점수 값을, onChanged는 사용자가 값을 조절할 때 호출되는 콜백 함수입니다. 값이 변경될 때마다 setState를 호출하여 화면을 갱신합니다.

결론

커퍼티노 스테퍼를 사용하면 Flutter 앱에서 iOS 스타일의 점수 조절 기능을 구현할 수 있습니다. 이를 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

커퍼티노 스테퍼란?

구현 방법

결론

참고 자료