[GetX] BottomSheet

2022-01-24 hit count image

Flutter에서 GetX를 사용하여 BottomSheet를 사용하는 방법에 대해서 알아봅시다.

개요

이번 블로그 포스트에서는 GetX를 사용하여 BottomSheet를 사용하는 방법에 대해서 알아보도록 하겠습니다. 이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.

블로그 시리즈

이 블로그 포스트는 Flutter에서 GetX를 사용하는 방법에 관해 시리즈로 제작되었습니다. GetX의 다른 사용법을 알고 싶으시다면, 다음 링크를 참고하시기 바랍니다.

GetX 설치

Flutter에서 GetX의 사용법을 확인하기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.

flutter create bottom_sheet

그런 다음 명령어를 실행하여 GetX 패키지를 설치합니다.

flutter pub add get

이제 이렇게 설치한 GetX를 사용하여 BottomSheet를 사용하는 방법에 대해서 알아보도록 하겠습니다.

BottomSheet 열기

GetX를 사용하여 BottomSheet를 사용하기 위해서는 다음과 같이 Get.bottomSheet 함수를 사용해야 합니다.

Get.bottomSheet(
  Widget(),
);

이를 확인하기 위해, lib/main.dart를 다음과 같이 수정합니다.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  void openBottomSheet() {
    Get.bottomSheet(
      Column(
        children: [
          const SizedBox(height: 20),
          const Center(
            child: Text(
              'Bottom Sheet',
              style: TextStyle(fontSize: 18),
            ),
          ),
          OutlinedButton(
            onPressed: () {
              Get.back();
            },
            child: const Text('Close'),
          ),
        ],
      ),
      backgroundColor: Colors.white,
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BottomSheet"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Bottom sheet example'),
            OutlinedButton(
              onPressed: openBottomSheet,
              child: const Text('Open'),
            )
          ],
        ),
      ),
    );
  }
}

이를 실행하면 다음과 같은 화면을 확인할 수 있습니다.

Flutter - GetX bottom sheet open button

화면에 표시된 Open 버튼을 누르면 다음과 같이 Get.bottomSheet를 호출하게 됩니다.

void openBottomSheet() {
  Get.bottomSheet(
    Column(
      children: [
        const SizedBox(height: 20),
        const Center(
          child: Text(
            'Bottom Sheet',
            style: TextStyle(fontSize: 18),
          ),
        ),
        OutlinedButton(
          onPressed: () {
            Get.back();
          },
          child: const Text('Close'),
        ),
      ],
    ),
    backgroundColor: Colors.white,
    elevation: 0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  );
}

그럼 다음과 같이 BottomSheet가 표시되는 것을 확인할 수 있다.

Flutter - GetX bottom sheet

BottomSheet 닫기

화면에 표시된 BottomSheet를 닫기 위해서는 다음과 같이 Get.back() 함수를 사용합니다.

Get.back();

예제에서는 다음과 같이 닫기 버튼에 Get.back() 함수를 사용하도록 하였습니다.

Get.bottomSheet(
  Column(
    children: [
      ...
      OutlinedButton(
        onPressed: () {
          Get.back();
        },
        child: const Text('Close'),
      ),
    ],
  ),
  ...
);

BottomSheet 확인

GetX에서는 다음과 같이 BottomSheet가 열려있는지 열려있지 않은지 확인할 수 있습니다.

Get.isBottomSheetOpen

이를 확인하기 위해서 openBottonSheet() 함수를 다음과 같이 수정합니다.

void openBottomSheet() {
  Future.delayed(const Duration(seconds: 1), () {
    // ignore: avoid_print
    print(Get.isBottomSheetOpen);
  });

  Get.bottomSheet(
    ...
  );
}

이를 실행하면 1초후에 true가 출력되는 것을 확인할 수 있습니다.

flutter: true

완료

이것으로 GetX를 사용하여 Flutter에서 BottomSheet를 표시하는 방법에 대해서 알아보았습니다. 또한 BottomSheet를 닫기 위한 방법과 열려있는지 확인하는 방법들에 대해서도 알아보았습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts