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

05 Dec 2023

flutter

플러터는 크로스플랫폼 앱 개발을 위한 Google의 UI 프레임워크입니다. 커퍼티노 디자인은 iOS 스타일의 디자인을 플러터에서 구현한 것으로, iOS 앱과 유사한 디자인을 구현할 수 있습니다.

이번에는 플러터의 커퍼티노 스테퍼를 사용하여 앱 창의 크기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 커퍼티노 스테퍼 위젯 추가하기

먼저, 플러터 프로젝트에서 사용할 커퍼티노 스테퍼 위젯을 추가해야 합니다.

import 'package:flutter/cupertino.dart';

...

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

위 코드에서 CupertinoStepper는 커퍼티노 스테퍼 위젯을 초기화하고, value 속성에는 현재 창 크기 값을 전달합니다. onChanged 콜백 함수는 스테퍼 값이 변경될 때 호출되며, setState() 함수를 통해 상태를 업데이트하는 데 사용됩니다.

2. 창 크기 조절 로직 구현하기

이제 커퍼티노 스테퍼의 값이 변경될 때마다 앱 창 크기를 조절하는 로직을 구현해야 합니다.

double _windowSize = 0.5; // 기본 창 크기 값

...

Container(
  width: MediaQuery.of(context).size.width * _windowSize,
  child: ... // 창 크기를 조절할 위젯들
),

위 코드에서 MediaQuery 클래스를 사용하여 현재 디바이스의 크기를 가져온 후, _windowSize 값을 곱하여 창의 너비를 조절합니다. 이를 통해 스테퍼 값에 따라 창의 크기가 변경됩니다.

3. 완성된 코드

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: 'Window Resizing',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Window Resizing'),
        ),
        body: WindowResizingScreen(),
      ),
    );
  }
}

class WindowResizingScreen extends StatefulWidget {
  @override
  _WindowResizingScreenState createState() => _WindowResizingScreenState();
}

class _WindowResizingScreenState extends State<WindowResizingScreen> {
  double _windowSize = 0.5;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CupertinoStepper(
          value: _windowSize,
          onChanged: (double newValue) {
            setState(() {
              _windowSize = newValue;
            });
          },
        ),
        Container(
          width: MediaQuery.of(context).size.width * _windowSize,
          child: Column(
            children: [
              // 창 크기를 조절할 위젯들
              Text('Resize Me', style: TextStyle(fontSize: 20)),
              RaisedButton(
                onPressed: () {},
                child: Text('Click Me'),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

위 코드는 스테퍼 값을 통해 창 크기를 조절할 수 있는 앱을 구현한 예시입니다. 앱을 실행하고 스테퍼를 조작하면 창 크기가 변경됨을 확인할 수 있습니다.

플러터의 커퍼티노 스테퍼를 이용하여 창 크기를 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 이 기능을 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참조하세요.