[flutter] 플러터 커퍼티노 스테퍼를 이용한 채팅 메시지 폰트 크기 조절 기능 구현하기

05 Dec 2023

flutter

채팅 애플리케이션을 개발하다보면 사용자가 텍스트 대화의 폰트 크기를 조절할 수 있어야 할 때가 있습니다. 이를 위해 플러터의 커퍼티노 스테퍼( Cupertino Stepper)를 사용하여 채팅 메시지의 폰트 크기를 조절하는 기능을 구현해보겠습니다.

1. Cupertino 스테퍼 위젯 추가하기

먼저, Cupertino 스테퍼를 사용하기 위해 cupertino_icons 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 아래 코드를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3 # 커퍼티노 아이콘 추가

패키지를 추가한 뒤에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드하세요.

2. Cupertino 스테퍼 구현하기

다음으로, 채팅 화면을 구성하는 위젯에 Cupertino 스테퍼를 추가해야 합니다. 아래 코드를 참고하여 적절한 위치에 Cupertino 스테퍼를 추가하세요.

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  double _fontSize = 14.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('채팅 앱'),
      ),
      body: Column(
        children: [
          // 채팅 메시지 출력
          Expanded(
            child: ListView.builder(
              itemBuilder: (context, index) {
                // 채팅 메시지 위젯 구현
                return Text(
                  '안녕하세요',
                  style: TextStyle(fontSize: _fontSize),
                );
              },
              itemCount: 10,
            ),
          ),
          // 폰트 크기 조절 스테퍼
          CupertinoStepper(
            value: _fontSize,
            min: 10.0,
            max: 30.0,
            stepValue: 2.0,
            onChanged: (newValue) {
              setState(() {
                _fontSize = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}

위 코드에서는 _fontSize 변수를 사용하여 폰트 크기를 설정하고 이를 스테퍼의 value 속성에 연결합니다. 사용자가 스테퍼를 조절할 때마다 onChanged 콜백 함수가 호출되고, setState 메소드를 사용하여 UI를 다시 렌더링합니다.

3. 실행 결과 확인하기

이제 애플리케이션을 실행하여 채팅 메시지의 폰트 크기를 조절할 수 있는지 확인해보세요. 스테퍼를 조절하면 채팅 메시지의 폰트 크기가 실시간으로 변경되는 것을 확인할 수 있을 것입니다.

결론

이렇게 플러터의 커퍼티노 스테퍼를 이용하여 채팅 메시지의 폰트 크기를 조절하는 기능을 구현할 수 있습니다. 사용자가 원하는 폰트 크기를 선택하여 더 편리한 채팅 환경을 제공할 수 있습니다.