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

05 Dec 2023

flutter

플러터(Flutter)에서는 iOS 앱의 디자인을 구현하기 위해 커퍼티노(Cupertino) 디자인 시스템을 사용할 수 있습니다. 이번 글에서는 플러터의 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 배경의 투명도를 조절하는 기능을 구현하는 방법을 알아보겠습니다.

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

우선, 플러터 프로젝트의 pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야합니다. 이 패키지는 커퍼티노 아이콘을 사용하기 위해 필요합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

그리고 해당 패키지를 main.dart 파일에서 import 해줍니다.

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

앱의 배경에 적용할 투명도 값을 저장하기 위한 변수를 선언합니다.

double opacityValue = 0.5;

이제 CupertinoPageScaffold 위젯을 사용하여 앱의 기본 레이아웃을 구성합니다. 배경색은 투명도 값을 반영하기 위해 Color.fromRGBO() 메서드를 사용합니다.

CupertinoPageScaffold(
  child: Container(
    color: Color.fromRGBO(255, 0, 0, opacityValue),
    child: Center(
      child: Text(
        '배경 투명도 조절',
        style: TextStyle(
          fontSize: 24.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
);

커퍼티노 스테퍼를 추가하기 위해 CupertinoStepper 위젯을 사용합니다. currentValue 속성으로 현재 투명도 값을 저장하고 onChanged 콜백을 통해 값을 변경할 수 있도록 합니다.

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

이제 앱의 메인 위젯에 CupertinoPageScaffold와 CupertinoStepper를 조합하여 완성합니다.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        child: MyHomePage(),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  double opacityValue = 0.5;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Container(
        color: Color.fromRGBO(255, 0, 0, opacityValue),
        child: Center(
          child: Text(
            '배경 투명도 조절',
            style: TextStyle(
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
      navigationBar: CupertinoNavigationBar(
        middle: Text('투명도 조절'),
      ),
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '투명도 값: ${opacityValue.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 16.0),
            ),
            SizedBox(height: 16.0),
            CupertinoStepper(
              value: opacityValue,
              onChanged: (newValue) {
                setState(() {
                  opacityValue = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

2. 결과 확인하기

앱을 실행하면 투명도 값을 조절할 수 있는 스크롤 가능한 커퍼티노 스테퍼가 화면에 표시됩니다. 스테퍼를 조절하면 배경의 투명도가 실시간으로 변경되며, 투명도 값이 텍스트로 표시됩니다.

플러터 커퍼티노 스테퍼 예제

3. 마무리

이번 글에서는 플러터에서 커퍼티노 스테퍼를 사용하여 배경의 투명도를 조절하는 기능을 구현하는 방법에 대해 알아보았습니다. 커퍼티노 스테퍼를 사용하면 iOS 앱 디자인을 쉽게 구현할 수 있으며, 사용자에게 투명도 조절 기능을 제공할 수 있습니다.

추가적인 정보는 Flutter 공식 문서를 참고하시기 바랍니다.