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

05 Dec 2023

flutter

플러터에서는 Cupertino 스타일의 UI를 구현할 수 있는 Cupertino 패키지를 제공합니다. 이 패키지를 사용하여 그래프 크기를 조절할 수 있는 스테퍼(Stepper)를 구현해보겠습니다.

단계 1: 패키지 추가하기

먼저, pubspec.yaml 파일에 Cupertino 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: any

의존성을 추가한 후에는 flutter packages get 명령어를 실행하여 패키지를 다운로드 해주세요.

단계 2: 스테퍼 추가하기

이제 그래프를 포함할 화면에 스테퍼를 추가해보겠습니다. CupertinoApp 위젯을 사용하여 기본 앱 구조를 생성한 뒤, Scaffold 위젯 내에 아래 코드를 추가해주세요.

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

class GraphScreen extends StatefulWidget {
  @override
  _GraphScreenState createState() => _GraphScreenState();
}

class _GraphScreenState extends State<GraphScreen> {
  double graphSize = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('Graph Screen'),
      ),
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              'Graph Size: $graphSize',
              style: TextStyle(fontSize: 24.0),
            ),
            CupertinoSlider(
              value: graphSize,
              min: 0.0,
              max: 200.0,
              onChanged: (value) {
                setState(() {
                  graphSize = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 StatefulWidget을 사용하여 그래프의 크기를 관리합니다. graphSize 변수는 스테퍼의 현재 값을 저장하고, onChanged 콜백 함수를 통해 값을 변경하면서 화면을 다시 그리도록 setState 함수를 호출합니다.

단계 3: 스테퍼 화면으로 이동하기

이제 위에서 만든 GraphScreen 클래스가 포함된 화면으로 이동할 수 있는 버튼을 추가해보겠습니다. 예를 들어 MyApp 클래스의 build 메서드에 다음 코드를 추가해주세요.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoButton(
        child: Text('Go to Graph Screen'),
        onPressed: () {
          Navigator.push(
            context,
            CupertinoPageRoute(builder: (context) => GraphScreen()),
          );
        },
      ),
    );
  }
}

위 코드에서는 CupertinoButton 위젯을 사용하여 버튼을 생성하고, onPressed 콜백 함수에서 Navigator를 사용하여 GraphScreen으로 화면을 이동합니다.

결론

이제 플러터 커퍼티노 스테퍼를 이용하여 그래프 크기 조절 기능을 구현할 수 있습니다. 위 코드를 실행해보고, 스테퍼를 움직여 그래프의 크기가 조절되는지 확인해보세요.

더 자세한 내용은 Flutter 공식 문서를 참조해주세요.