How to Move BottomSheet Along with Keyboard Which Has Textfield(autofocused is true)?

· 3 min read
How to Move BottomSheet Along with Keyboard Which Has Textfield(autofocused is true
How to Move BottomSheet Along with Keyboard Which Has Textfield(autofocused is true

The bottom sheet is a widget used to show the content on a screen.
You can create a bottom sheet using thesite() function, which is provided by Flutter.

context and builder are two required properties of this function.

Future<T?> showModalBottomSheet(
         {required BuildContext context,
         required WidgetBuilder builder,
         Color? backgroundColor,
         double? elevation,
         ShapeBorder? shape,
         Clip? clipBehavior,
         Color? barrierColor,
         bool isScrollControlled = false,
         bool useRootNavigator = false,
         bool isDismissible = true,
         bool enableDrag = true,
         RouteSettings? routeSettings,
        AnimationController? transitionAnimationController}
)

You can understand more about the bottomSheet also how to create a Bottomsheet in Flutter.

Based on User experience and device compatibility, it happens when you show TextField or TextFormField on the bottomSheet and when a user tries to add the data in the TextField. But the keyboard does not appear with the bottomSheet so in this article, we will show how to fix this issue. You can also consult our Flutter expert for smooth solutions and enterprise level mobile software development.

Add isScrollControlled = true to BottomSheetDialog it’ll allow the bottomSheet to take the full required height, which gives more assurance that TextField is not covered by the keyboard.

If your BottomSheetModel is column make sure you add mainAxisSize: MainAxisSize.min, otherwise the sheet will cover the whole screen.

Add Keyboard padding using MediaQuery.of(context).viewInsets.bottom

Padding( 
  padding: EdgeInsets.only( 
    bottom: MediaQuery.of(context).viewInsets.bottom),
  child : widget,
       ),

Let’s see an example of this widget.

Create a Scaffold Widget, which will contain an ElevatedButton at the center of the screen using the Center widget. This button will display a bottomSheet at the bottom of the screen.

By using the onPressed() function you can handle button press action.

Example:

Scaffold(
        body: Center(
      child: ElevatedButton(
        onPressed: () {
          showModalBottomSheet(
              shape: const RoundedRectangleBorder(
                  borderRadius:
                      BorderRadius.vertical(top: Radius.circular(25.0))),
              backgroundColor: Colors.grey,
              context: context,
              isScrollControlled: true,
              builder: (context) => Padding(
                    padding: EdgeInsets.only(top: 20,  right: 20,  left: 20,
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: const [
                        Center(
                          child: Text(
                            'Login',
                          ),
                        ),
                        SizedBox( height: 8.0),
                        TextField(
                          decoration: InputDecoration(hintText: 'enter email'),
                          autofocus: true,
                        ),
                        SizedBox(height: 10),
                        TextField(
                          decoration:
                              InputDecoration(hintText: 'enter password'),
                          autofocus: true,
                        ),
                        SizedBox(height: 10),
                      ],
                    ),
                  ));
        },
        child: const Text('Show Modal Bottom Sheet'),
      ),
    ));

Output Result

 

how to move bottomsheet along with keyboard which has textfieldautofocused
how to move bottomsheet along with keyboard which has textfieldautofocused

 

Conclusion:

So, in this article, we have been going through how to move the bottom sheet along with the keyboard. Hope you guys understand how to solve the problem of moving the bottom sheet using this article. Keep visiting Flutter Agency.

Leave a Reply