개요

이번 포스트에서는 플러터(Flutter)의 Cupertino Stepper를 이용하여 별점 선택 기능을 구현하는 방법에 대해 알아보겠습니다.

구현 방법

1. 먼저 cupertino_icons 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

   dependencies:
     flutter:
    sdk: flutter
     cupertino_icons: ^1.0.2
   

2. 다음으로, main.dart 파일을 열고 아래 코드를 추가합니다. ```dart import ‘package:flutter/cupertino.dart’; import ‘package:flutter/material.dart’; import ‘package:flutter/services.dart’;

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ‘별점 선택’, theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } }

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

class _MyHomePageState extends State { double _rating = 0;

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘별점 선택’), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( ‘현재 별점: $_rating’, style: TextStyle(fontSize: 24), ), CupertinoSlider( value: _rating, min: 0, max: 5, divisions: 5, onChanged: (value) { setState(() { _rating = value; }); }, ), ], ), ), ); } } ```

1. 앱을 실행해보면 별점을 선택할 수 있는 Cupertino Slider가 화면에 나타납니다. 사용자가 슬라이더를 조작할 때마다 _rating 변수 값이 업데이트되며, 선택한 별점이 화면에 표시됩니다.

결론

이제 플러터의 Cupertino Stepper를 이용하여 별점 선택 기능을 구현하는 방법을 알아보았습니다. 이 기능을 활용하여 사용자가 별점을 선택할 수 있는 평가 기능을 구현할 수 있습니다. 프로젝트에서 이 기능을 적용해보고 사용자의 피드백을 수집하는 데 활용해보세요.