Question 236086 in Flutter Question posted in
The official Flutter documentation can be found here.

Check if user close modal bottom sheet by draging down flutter

I am creating an app where user can add record. There is a modal bottom sheet which allow user to add their record. When they press add record the modal bottom sheet closes and I reset the text fields and tab Controller. But the issue is how to check if the user not added the record and just close the modal bottom sheet by dragging down without adding record. I am looking for solution to check if user drag the modal bottom sheet by dragging down

here is my code:

showModalBottomSheet(
                          isScrollControlled: true,
                          backgroundColor: Colors.white,
                          elevation: 15,
                          context: context,
                          builder: (BuildContext context) {
                            return StatefulBuilder(
                              builder:
                                  (BuildContext context, StateSetter setState) {
                                return SingleChildScrollView(
                                  padding: EdgeInsets.only(
                                      top: 10,
                                      bottom: MediaQuery.of(context)
                                          .viewInsets
                                          .bottom),
                                  child: Column(
                                    children: [
                                      const SizedBox(
                                        height: 10,
                                      ),
                                      Image.asset('assets/bottomSheetBar.png'),
                                      const SizedBox(
                                        height: 20,
                                      ),
                                      TabBar(
                                        indicatorSize: TabBarIndicatorSize.tab,
                                        indicatorColor: AppColors.mainColor,
                                        controller: _tabController,
                                        unselectedLabelColor:
                                            AppColors.lightTextColor,
                                        tabs: [
                                          Tab(
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                Image.asset(
                                                    'assets/expense_tab_logo.png'),
                                                const SizedBox(
                                                  width: 10,
                                                ),
                                                const Text(
                                                  'Expense',
                                                  style: TextStyle(
                                                      color: AppColors
                                                          .expenseColor),
                                                ),
                                              ],
                                            ),
                                          ),
                                          Tab(
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                Image.asset(
                                                    'assets/income_tab_logo.png'),
                                                const SizedBox(
                                                  width: 10,
                                                ),
                                                const Text(
                                                  'Income',
                                                  style: TextStyle(
                                                      color: AppColors
                                                          .incomeColor),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: 440,
                                        child: TabBarView(
                                          controller: _tabController,
                                          children: [
                                            showExpenseTabContent(setState),
                                            showIncomeTabContent(setState),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                );
                              },
                            );
                          },
                        );

Any solution to check if user close the modal bottom sheet by drag so i can perform the required action.

Tags:

2

Answers


  1. 0

    To detect if the user has closed the modal bottom sheet by dragging it down without adding a record, you can use the showModalBottomSheet function’s returned Future to track when the bottom sheet is dismissed. You can then check if the user added a record or not and take appropriate actions. Here’s how you can do that:

    Note: From future I am returning true when user pressed the close bottom sheet button which means user added a data. Otherwise user dismissed a bottom sheet.

    ElevatedButton(
    child: const Text(‘Close BottomSheet’),
    onPressed: () => Navigator.pop(context, true)),

    Example Code:

    import 'package:flutter/material.dart';

void main() => runApp(const BottomSheetApp());

class BottomSheetApp extends StatelessWidget {
  const BottomSheetApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample')),
        body: const BottomSheetExample(),
      ),
    );
  }
}

class BottomSheetExample extends StatelessWidget {
  const BottomSheetExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context, true),
                      ),
                    ],
                  ),
                ),
              );
            },
          ).then((result) {
            if (result == null) {
              print("User data not added");
              // If you want to keep the data do not reset the controller
            } else {
              print("User data added");
              //_textEditingController.clear();
              //_tabController.index = 0;
            }
          });
        },
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    showModalBottomSheet is Future function so you can do this

    showModalBottomSheet().then((value){
///whene bottom sheet closed this function run
///and you can check user add record
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search