[flutter] 플러터 커퍼티노 스테퍼를 이용한 로그인 화면 텍스트 크기 조절 기능 구현하기

05 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)에서 커퍼티노 스테퍼(Cupertino Stepper)를 이용하여 로그인 화면의 텍스트 크기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 필요한 의존성을 추가합니다. 이 예제에서는 cupertino_icons 패키지를 사용합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

의존성 추가 후, 패키지를 다운로드하고 프로젝트를 업데이트하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

2. 커퍼티노 스테퍼 추가

로그인 화면에 텍스트 크기를 조절하는 기능을 추가하기 위해, CupertinoApp 위젯을 사용하여 앱을 구성합니다. CupertinoApp 위젯의 home 속성에 로그인 화면을 구현할 LoginScreen 위젯을 추가합니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Cupertino Stepper',
      theme: CupertinoThemeData(primaryColor: CupertinoColors.systemBlue),
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('로그인 화면'),
      ),
      child: Center(
        child: Text(
          '텍스트 크기 조절',
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
      ),
    );
  }
}

위 코드에서 LoginScreen() 위젯의 Text 위젯에 텍스트 크기를 조절할 수 있는 버튼을 추가하면 됩니다.

3. 텍스트 크기 조절 기능 구현

버튼을 통해 텍스트 크기를 조절하기 위해, CupertinoStepper 위젯을 사용합니다. CupertinoStepper 위젯은 스텝을 이용하여 값을 변경하는 기능을 제공합니다.

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  double textSize = 20.0;

  void increaseTextSize() {
    setState(() {
      textSize += 2.0;
    });
  }

  void decreaseTextSize() {
    setState(() {
      textSize -= 2.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('로그인 화면'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '텍스트 크기 조절',
              style: TextStyle(
                fontSize: textSize,
              ),
            ),
            SizedBox(height: 20.0),
            CupertinoStepper(
              value: textSize,
              onChanged: (value) {
                setState(() {
                  textSize = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

_LoginScreenState 클래스에서 textSize 변수를 사용하여 텍스트 크기를 관리합니다. increaseTextSize와 decreaseTextSize 메서드를 통해 텍스트 크기를 증가하거나 감소시킬 수 있습니다.

CupertinoStepper 위젯은 텍스트 크기를 조절하면서 값을 변경할 수 있는 스텝을 제공합니다. value 속성은 현재 텍스트 크기를 나타내고, onChanged 콜백은 스텝 값을 변경할 때마다 호출됩니다.

이제 앱을 실행하고 텍스트 크기를 조절해보세요. 텍스트 크기 조절 버튼이 나타나며, 버튼을 터치하여 텍스트 크기를 변경할 수 있습니다.

이상으로 플러터에서 텍스트 크기 조절 기능을 구현하는 방법에 대해 알아보았습니다. 추가적인 기능을 구현하고 확장할 수도 있으니 참고해주세요!

목차

1. 프로젝트 설정

2. 커퍼티노 스테퍼 추가

3. 텍스트 크기 조절 기능 구현