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

05 Dec 2023

flutter

플러터에는 다양한 위젯이 있어 사용자 인터페이스를 구축하는 데 편리합니다. 그 중 하나인 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 경사도를 조절하는 기능을 구현해보겠습니다.

1. 커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS 디자인 언어로 유명한 커퍼티노 디자인을 따르는 플러터의 위젯입니다. 이 위젯은 값의 범위를 동적으로 조절할 수 있으며, 터치 제스처를 통해 값을 증가 또는 감소시킬 수 있습니다.

2. 경사도 조절 기능 구현하기

아래의 코드를 참고하여 경사도 조절 기능을 구현해보세요.

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

class GradientAdjustmentScreen extends StatefulWidget {
  @override
  _GradientAdjustmentScreenState createState() => _GradientAdjustmentScreenState();
}

class _GradientAdjustmentScreenState extends State<GradientAdjustmentScreen> {
  double _gradientValue = 0.5; // 경사도 값 초기화
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient Adjustment'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Adjust the Gradient:',
              style: TextStyle(fontSize: 16.0),
            ),
            SizedBox(height: 10.0),
            CupertinoSlider(
              value: _gradientValue,
              min: 0.0,
              max: 1.0,
              onChanged: (value) {
                setState(() {
                  _gradientValue = value;
                });
              },
            ),
            SizedBox(height: 10.0),
            Text('Gradient Value: $_gradientValue'),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 GradientAdjustmentScreen이라는 StatefulWidget을 생성하고, 그 안에서 _gradientValue라는 변수를 통해 경사도 값을 조절합니다. CupertinoSlider를 통해 사용자가 경사도 값을 조정할 수 있습니다. 값이 변경될 때마다 setState 메서드를 호출하여 화면을 업데이트합니다.

3. 사용하기

구현한 경사도 조절 기능을 사용하기 위해서는 해당 위젯을 다른 화면에서 호출해야 합니다. 예를 들어 아래의 코드에서는 FloatingActionButton을 눌렀을 때 경사도 조절 화면으로 이동하도록 구현되어 있습니다.

import 'package:flutter/material.dart';

import 'gradient_adjustment_screen.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App'),
      ),
      body: Center(child: Text('Home Screen')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => GradientAdjustmentScreen(),
            ),
          );
        },
        child: Icon(Icons.gradient),
      ),
    );
  }
}

GradientAdjustmentScreen을 호출하기 위해 MaterialPageRoute를 사용하여 화면 이동을 처리합니다.

참고 자료

위의 참고 자료는 커퍼티노 스테퍼와 함께 플러터에서 제공하는 기본적인 슬라이더 위젯에 대한 정보를 제공합니다. 추가로 확인하고 싶은 내용이 있다면 공식 문서를 참조해주세요.

이제 플러터를 사용하여 경사도 조절 기능을 구현할 수 있는 방법을 알게 되었습니다. 원하는 기능을 구현하기 위해 위 코드를 수정하거나 다른 위젯과 결합해서 사용하는 등 자유롭게 활용해보세요!