[flutter] BottomSheet에서 자동으로 사라지는 타이머 설정하기

14 Dec 2023

flutter

Flutter 앱에서 BottomSheet를 사용하는 경우 사용자 경험을 개선하기 위해 일정 시간이 지나면 BottomSheet가 자동으로 사라지도록 설정할 수 있습니다. 이를 위해 Timer 클래스를 사용하여 BottomSheet가 화면에 표시된 후 일정 시간이 지난 후 자동으로 숨겨지도록 할 수 있습니다.

타이머를 사용하여 BottomSheet 자동 숨김 구현하기

아래는 BottomSheet를 표시하고 일정 시간이 지난 후 자동으로 숨기는 예제 코드입니다. 먼저 showBottomSheet 함수를 사용하여 BottomSheet를 표시하고, Timer 클래스를 사용하여 일정 시간이 지난 후 BottomSheet를 숨기도록 구현합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BottomSheet Auto Dismiss Timer'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showBottomSheet(
                context: context,
                builder: (context) {
                  return Container(
                    height: 200,
                    color: Colors.blue,
                    child: Center(
                      child: Text('Auto Dismissing BottomSheet'),
                    ),
                  );
                },
              );

              Timer(Duration(seconds: 3), () {
                Navigator.pop(context);
              });
            },
            child: Text('Show BottomSheet'),
          ),
        ),
      ),
    );
  }
}

위 예제 코드에서는 showBottomSheet 함수를 사용하여 BottomSheet를 표시하고, Timer 클래스를 사용하여 3초 후에 Navigator.pop(context)를 호출하여 BottomSheet를 자동으로 닫게 됩니다.

이와 같이 Timer 클래스를 사용하여 BottomSheet가 자동으로 사라지도록 설정할 수 있습니다.

마무리

Flutter를 사용하여 BottomSheet가 자동으로 사라지도록 타이머를 설정하는 방법에 대해 알아보았습니다. 이를 통해 앱의 사용자 경험을 향상시키고, 사용자에게 불필요한 인터페이스 요소를 오랫동안 보여주지 않을 수 있습니다.

참조: Flutter Timer Class