CODEWITHSUNDEEP
flutterdartflutter-layout
BIS Tech
BIS Tech

Reputation: 19504

how to push all content up when open keyboard

Is it possible to push all content up when open keyboard? (not only textField area, whole page push up)

   showModalBottomSheet(
       context: context,
       builder: (BuildContext context) {
            return BottomSheet();
       },
   isScrollControlled: true);

BottomSheet class 

class BottomSheet extends StatefulWidget {
  @override
  _BottomSheetState createState() => _BottomSheetState();
}

class _BottomSheetState extends State<BottomSheet> {

  @override
  Widget build(BuildContext context) {
    return
      SingleChildScrollView(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
            child: Container(
                child: Column(
                  children: <Widget>[...

I want to like this push-up,

need to like this push-up, here

But Current output is,

current output here

Upvotes: 4

Views: 3743

Answers (7)

khan
khan

Reputation: 1150

In my case I am using the package flutter_screenutil, that now have a useInheritedMediaQuery field. I set it to true, and it is now working.

ScreenUtilInit(
      useInheritedMediaQuery: true,
      designSize: const Size(376, 812),
      builder: (context, child) {
        return const Scaffold(
          resizeToAvoidBottomInset: true,
          body: Column(
            children: [
              Spacer(),
              TextField(),
            ],
          ),
        );
      },
    );

Upvotes: 1

chanderprakash-malethia
chanderprakash-malethia

Reputation: 1

you can use this it will scroll content up when you type :

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        ****resizeToAvoidBottomInset: true, // set this to true****
        appBar: AppBar(
          title: Text('Flutter Keyboard Example'),
        ),
        body: SingleChildScrollView( // wrap your content in a SingleChildScrollView widget
          child: Center(
content )))

Upvotes: 0

Ali Wajdan
Ali Wajdan

Reputation: 13

Wrap your whole widget inside a container and provide that container padding like this, it will work.

child: Container(
      padding: EdgeInsets.only(
        top: 25.0,
        bottom: MediaQuery.of(context).viewInsets.bottom,
        left: 25.0,
        right: 25.0,
      ),
      child: Form(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextFormField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
              keyboardType: TextInputType.emailAddress,
              validator: (value) {
                return _isEmailValid(value);
              },
              textInputAction: TextInputAction.next,
              onSaved: (value) {},
              controller: _emailController,
            ),
            SizedBox(height: 10),
            TextFormField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: 'Password',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
              keyboardType: TextInputType.emailAddress,
              validator: (value) {
                return _isEmailValid(value);
              },
              textInputAction: TextInputAction.done,
              onSaved: (value) {},
              controller: _passwordController,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () {},
                  child: const Text('Forgot Password'),
                ),
              ],
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                side: const BorderSide(width: 1.3, color: Colors.white),
                shadowColor: Colors.white,
              ),
              onPressed: () {},
              child: const Text('Login'),
            ),
            TextButton(
              onPressed: () {},
              child: Text('Not have any Accoung? Sign Up'),
            ),
          ],
        ),
      ),
    ),

Upvotes: 0

Astik Anand
Astik Anand

Reputation: 13057

Simply putting reverse=true inside the SingleChildScrollView will suffice.

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        reverse: true,
        child: Container(
          ........
          ........

enter image description here

Upvotes: 4

Kelvin Mboto
Kelvin Mboto

Reputation: 370

You can simply give the widget a bottom position of MediaQuery.of(context).viewInsets.bottom if you are using a stack.

In your case, set margin : to MediaQuery.of(context).viewInsets.bottom instead of padding.

Upvotes: 1

Tharindu Weerasinghe
Tharindu Weerasinghe

Reputation: 25

showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return Container(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          child: //your code
        );
      }
)

This works for me. Maybe try moving your padding inside the container.

Upvotes: -1

Manas Gupta
Manas Gupta

Reputation: 104

Set resizeToAvoidBottomInset property of the Scaffold as true.

Upvotes: -1

Related Questions