[flutter] 플러터 커퍼티노 스테퍼를 이용한 캐릭터 크기 조절 기능 구현하기

05 Dec 2023

flutter

플러터는 다양한 UI 요소를 제공하여 애플리케이션을 구성할 수 있는 강력한 프레임워크입니다. 이번 예시에서는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 캐릭터의 크기를 조절하는 기능을 구현해보겠습니다.

1. 필요한 패키지 가져오기

먼저, Cupertino 스테퍼를 사용하기 위해 cupertino_icons 패키지를 가져옵니다. pubspec.yaml 파일에 아래의 코드를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2 # 버전은 업데이트된 최신 버전으로 변경 가능합니다.

2. 스테퍼 위젯 구현하기

이제 스테퍼 위젯을 구현해보겠습니다. 스테퍼를 사용하기 위해 CupertinoStepper 위젯을 사용합니다. 예제에서는 캐릭터의 크기를 조절하는 기능을 구현하므로, 초기값은 캐릭터의 기본 크기로 설정합니다.

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: 'Flutter Stepper Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  double characterSize = 100.0; // 캐릭터 초기 크기 설정

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Stepper Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              CupertinoIcons.person, // 예시로 사용할 캐릭터 아이콘
              size: characterSize,
            ),
            CupertinoStepper(
              value: characterSize,
              onChanged: (newValue) {
                setState(() {
                  characterSize = newValue;
                });
              },
              stepValue: 10.0, // 스테퍼 한 번 돌릴 때 변경되는 크기
              min: 50.0, // 최소 크기
              max: 150.0, // 최대 크기
              initialItemCount: 1, // 초기 스텝 값
            ),
          ],
        ),
      ),
    );
  }
}

3. 실행 및 테스트

위의 코드를 실행하면, 앱 화면에 캐릭터 아이콘이 나타납니다. 시작할 때 캐릭터의 크기는 초기값인 100입니다. 스테퍼를 사용하여 크기를 조절할 수 있습니다. 스테퍼를 돌리면서 크기가 변경되고, 변경된 값이 실시간으로 적용됩니다. 스테퍼의 범위는 50부터 150까지로 설정되어 있습니다.

flutter_stepper_example

이제 플러터의 커퍼티노 스테퍼를 이용하여 캐릭터의 크기를 조절하는 기능을 구현했습니다. 앱 개발에서 스테퍼를 사용할 때 참고할 수 있도록 위의 예시 코드를 활용해보세요. Happy coding!