[flutter] 플러터에서 키보드 이벤트를 통한 Visibility 조절하기

18 Dec 2023

flutter

플러터 앱을 개발하다 보면 키보드가 나타나거나 사라질 때 화면의 일부를 숨겨야 하는 경우가 있습니다. 예를 들어, 텍스트 필드를 터치할 때마다 키보드에 가려지는 부분이 없도록 하고 싶을 수 있습니다. 이런 경우에 키보드 이벤트를 통해 화면 요소의 Visibility를 조절할 수 있습니다.

키보드 이벤트를 감지하기

먼저, keyboard_visibility 패키지를 사용하여 키보드의 상태를 감지하는 방법을 알아보겠습니다. 이 패키지를 사용하면 키보드가 나타나거나 사라질 때 이벤트를 감지할 수 있습니다.

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        setState(() {
          _isKeyboardVisible = visible;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Keyboard Visibility Example'),
        ),
        body: Center(
          child: Text('Keyboard is ${_isKeyboardVisible ? 'visible' : 'hidden'}'),
        ),
      ),
    );
  }
}

위 코드에서는 keyboard_visibility 패키지를 사용하여 키보드의 상태에 따라 화면에 ‘Keyboard is visible’ 또는 ‘Keyboard is hidden’ 메시지를 표시합니다.

Visibility 조절하기

이제 키보드가 나타나거나 사라질 때 화면 요소의 Visibility를 조절하는 방법을 살펴봅시다. 예를 들어, 키보드가 나타날 때는 버튼을 숨기고, 키보드가 사라질 때는 버튼을 다시 보이도록 만들어보겠습니다.

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        setState(() {
          _isKeyboardVisible = visible;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Keyboard Visibility Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _isKeyboardVisible ? Container() : RaisedButton(
                onPressed: () {
                  // 버튼 클릭 이벤트 처리
                },
                child: Text('Submit'),
              ),
              TextField(),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 키보드 상태에 따라 RaisedButton 위젯의 Visibility를 조절합니다. 키보드가 나타날 때는 버튼을 숨기고, 사라질 때는 버튼을 보여줍니다.

이제 플러터에서 키보드 이벤트를 통해 Visibility를 조절하는 방법에 대해 알아보았습니다. 키보드가 나타날 때 화면 요소를 조절하여 사용자 경험을 향상시킬 수 있습니다.