Search code examples
flutterdartnavigationkeyboard

Flutter Make Text Field go Up with keyboard


I have a Text Field in the bottom Navigation Bar. I am making a chat screen, so when the User taps on the text field the keyboard go up, but the text field stick down and don't go up with. I tried many solutions but nothing worked, I am really stuck. Flutter Version

Flutter 1.26.0-1.0.pre

return  Scaffold(
     resizeToAvoidBottomInset: false,
     backgroundColor: Palette.primary,
     appBar: MyAppBar(),
     body: MyBody(),
     bottomNavigationBar: TextField(
               maxLength: 255,
               decoration: InputDecoration(
                 hintText: " write here",
                 focusedBorder: InputBorder.none,
                 enabledBorder: InputBorder.none,
                 errorBorder: InputBorder.none,
                 disabledBorder: InputBorder.none,
                 border: null,
                 hintStyle: GoogleFonts.getFont('Tajawal',
                     color: Colors.white, fontWeight: FontWeight.w500),
                 counterText: "",
               ),
               style: GoogleFonts.getFont('Tajawal',
                   fontSize: 17, fontWeight: FontWeight.w500),
             ),
     ),

 );
}
}

ScreenShot 1

ScreenShot 2


Solution

  • you can wrap your text field in listview
    set the reverse named parameter to true and after that call the reversed getter and run the tolist function

     ListView(
              reverse: true,
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'I move!',
                  ),
                ),
              ].reversed.toList(),
            ), 
    

    result:

    enter image description here

    whole code

    import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          debugShowCheckedModeBanner: false,
          title: ' Demo',
          theme: new ThemeData(
            primaryColor: new Color(0xFFFF0000),
          ),
          home: new FormDemo(),
        );
      }
    }
    
    class FormDemo extends StatefulWidget {
      @override
      _FormDemoState createState() => _FormDemoState();
    }
    
    class _FormDemoState extends State<FormDemo> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(''),
          ),
          body: Container(
            padding: const EdgeInsets.all(20.0),
            child: new ListView(
              reverse: true,
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'I move!',
                  ),
                ),
              ].reversed.toList(),
            ),
          ),
        );
      }
    }