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

05 Dec 2023

flutter

소개

이번 글에서는 Flutter에서 플러터 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 화면 전체 크기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다. 플러터 커퍼티노 스테퍼는 iOS의 스타일을 따르는 위젯으로, 스텝마다 값을 증감시킬 수 있도록 해줍니다.

구현 방법

먼저, cupertino_icons 패키지를 pubspec.yaml 파일에 추가해주세요. 이 패키지는 iOS 아이콘을 사용할 수 있도록 해줍니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

다음으로, 다음과 같이 main.dart 파일에 아래 코드를 추가해주세요.

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(
      home: MyScreen(),
    );
  }
}

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  double _screenSize = 100.0; // 초기화된 화면 크기

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Adjust Screen Size'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Screen Size: $_screenSize'),
            SizedBox(height: 20.0),
            CupertinoStepper(
              initialValue: _screenSize,
              min: 0.0,
              max: 200.0,
              stepValue: 10.0,
              onStepValueChange: (value) {
                setState(() {
                  _screenSize = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

코드를 실행하면 화면에 “Adjust Screen Size”라고 적힌 네비게이션 바와 스테퍼가 나타납니다. 스테퍼를 조작하여 화면의 크기를 증감시킬 수 있습니다. 스테퍼의 현재 값은 “Screen Size: [크기]”라고 표시됩니다.

결론

이렇게 Flutter에서 플러터 커퍼티노 스테퍼를 이용하여 화면 전체 크기를 조절하는 기능을 구현할 수 있습니다. 플러터 커퍼티노 스테퍼는 iOS 스타일의 디자인을 적용할 때 유용하게 사용될 수 있습니다. 자세한 내용은 플러터 공식 문서를 참조해주세요.