[flutter] 플러터 커퍼티노 스테퍼를 이용한 성적표 등급 선택 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 다양한 플랫폼에서 동작하는 앱을 개발할 수 있는 크로스 플랫폼 프레임워크입니다. 이번 글에서는 플러터의 Cupertino 스타일의 스테퍼(Cupertino Stepper)를 이용하여 성적표의 등급 선택 기능을 구현하는 방법을 알아보겠습니다.

1. 필요한 라이브러리 추가하기

성적표 등급 선택 기능을 구현하기 위해 cupertino_icons 패키지가 필요합니다. pubspec.yaml 파일에 다음과 같이 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

2. 스테퍼 위젯 생성하기

플러터 코드 파일에서 다음과 같이 Cupertino 스타일의 스테퍼 위젯을 생성합니다:

import 'package:flutter/cupertino.dart';

class GradeStepper extends StatefulWidget {
  @override
  _GradeStepperState createState() => _GradeStepperState();
}

class _GradeStepperState extends State<GradeStepper> {
  double _currentGrade = 50.0;

  @override
  Widget build(BuildContext context) {
    return CupertinoFormSection(
      header: Text('성적표 등급 선택'),
      children: [
        CupertinoStepper(
          value: _currentGrade,
          min: 0,
          max: 100,
          stepValue: 10,
          onChanged: (double value) {
            setState(() {
              _currentGrade = value;
            });
          },
        ),
        Text('현재 등급: $_currentGrade'),
      ],
    );
  }
}

위 코드에서 GradeStepper는 StatefulWidget이며, _GradeStepperState 클래스는 상태를 관리합니다. _currentGrade 변수는 현재 선택된 등급을 나타냅니다. CupertinoFormSection과 CupertinoStepper 배치에서 등급을 설정할 수 있도록 구성됩니다.

3. 사용하기

앱의 메인 위젯에서 GradeStepper를 사용하여 성적표 등급 선택 기능을 추가합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: '성적표 등급 선택',
      theme: CupertinoThemeData(
        primaryColor: CupertinoColors.activeBlue,
      ),
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('성적표 등급 선택'),
        ),
        child: GradeStepper(),
      ),
    );
  }
}

위 코드에서는 CupertinoApp을 사용하여 메인 앱을 설정하고, CupertinoPageScaffold을 사용하여 앱의 기본 레이아웃을 구성합니다. 메인 위젯에서 GradeStepper를 호출하여 등급 선택 기능을 추가합니다.

4. 실행하기

플러터 개발 환경에서 앱을 실행하여 성적표 등급 선택 기능을 확인할 수 있습니다.

위의 코드를 참고하여 성적표의 등급 선택 기능을 구현해보세요. 플러터의 다양한 위젯과 기능을 사용하여 더욱 풍부한 앱을 개발할 수 있습니다.

참고 자료

Flutter 공식 문서: https://flutter.dev
Cupertino 스테퍼 위젯 문서: https://api.flutter.dev/flutter/cupertino/CupertinoStepper-class.html
Cupertino 스타일 가이드: https://flutter.dev/docs/development/ui/widgets/cupertino