[GetX] BottomSheet

2022-01-24 hit count image

Let's see how to use BottomSheet with GetX in Flutter.

Outline

In this blog post, I will show you how to use BottomSheet with GetX in Flutter. You can see full source code of this blog post on the link below.

Blog series

This blog post is made in the series about how to use GetX in Flutter. If you want to see the other features of the GetX, please check out the following blog posts.

GetX installation

To check how to use GetX in Flutter, execute the following command to create a new Flutter project.

flutter create bottom_sheet

And then, execute the following command to install the GetX package.

flutter pub add get

Now, let’see how to use GetX to show BottomSheet.

Open BottomSheet

To open the BottomSheet by GetX, you can use Get.bottomShee function like the below.

Get.bottomSheet(
  Widget(),
);

To check this, open the lib/main.dart file and modify it like the below.

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'),
            )
          ],
        ),
      ),
    );
  }
}

When you execute the above code, you will see the following result.

Flutter - GetX bottom sheet open button

When you press the Open button, Get.bottomSheet will be called like the below.

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),
    ),
  );
}

And then, you can see the BottomSheet is shown like the below.

Flutter - GetX bottom sheet

Close BottomSheet

To Close the opend BottomSheet, you can use Get.back() function.

Get.back();

In the example, Get.back() is used in the close button like the below.

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

Check BottomSheet

You can check the BottomSheet is opend or not by GetX like the below.

Get.isBottomSheetOpen

To check this, modify the openBottonSheet() function like the below.

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

  Get.bottomSheet(
    ...
  );
}

When you run the code, you can see the true is printed after 1 second.

flutter: true

Completed

Done! we’ve seen how to show BottomSheet by GetX in Flutter. Alos, we’ve seen how to close the BottomSheet and how to check the BottomSheet is opend or not.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku. 지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts