0

I want to create a submitting button which will be always visible and above the keyboard. I tried to figure out that problem by several ways, such us using floating action button, bottom sheet, scroll padding or column with calculating size of button and column with another content size. When I calculated height manually problematic were very small and large devices. On the other hand when I tried to use floating button or bottom sheet, button cover up focused text field and error message from this textfield.

cover up textfield error text

cover up textfield error text

cover up part of textfield

cover up part of textfield

My goal is creating a button which will be visible above the keyboard all the time and won't cover up any part of textfield.

My actual code:

class KeyboardAvoidingViewport extends StatelessWidget {
  final PreferredSizeWidget? appBar;
  final List<Widget> bodyListWidget;
  final Widget floatingMemeButton;
  final bool isKeyboardVisible;

  const KeyboardAvoidingViewport({
    Key? key,
    this.appBar,
    required this.bodyListWidget,
    required this.floatingCustomButton,
    required this.isKeyboardVisible,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: appBar,
        body: SizedBox(
          height: isKeyboardVisible
              ? MediaQuery.of(context).size.height -
                  MediaQuery.of(context).viewInsets.bottom -
                  2 * Dimens.xxxl
              : null,
          child: Center(
            child: SingleChildScrollView(
              padding: EdgeInsets.symmetric(
                horizontal: Dimens.m,
                vertical: Dimens.xxxl,
              ),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: bodyListWidget),
            ),
          ),
        ),
        floatingActionButton: AnimatedSwitcher(
          duration: const Duration(milliseconds: 700),
          reverseDuration: const Duration(milliseconds: 100),
          child: isKeyboardVisible
              ? SizedBox(
                  width: MediaQuery.of(context).size.width - 2 * Dimens.m,
                  child: floatingCustomButton,
                )
              : null,
        ),
      );
}
DroidNa
  • 1
  • 1

1 Answers1

0

I guess floating actin button will work perfect here, you said you tried it what went wrong there?

Edit:

You can try -

return Scaffold(
    body: // Your body
    floatingActionButton: FloatingActionButton(
    child: Icon(Icons.check),
  ), 
)
Nikulsinh Sodha
  • 381
  • 3
  • 14
  • In scrollable widget when you tap on text field you are automatic focused on that. That behavior is good and I want it. But when you use Floating Action Button, then focused text field is cover up by them. – DroidNa May 27 '22 at 11:59
  • the floating action button is on the right hand side by default and relatively small how does it covers the textfield? – Nikulsinh Sodha May 27 '22 at 12:04
  • this button is reusable in my application, so it have to be wider – DroidNa May 27 '22 at 12:18