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

Flutter – Show TextField above keyboard

I know there are many opened questions on this, I’ve tried many, but none worked in my case.. So I want to have the TextField pop up above the keyboard, then go back to its original position, when keyboard is not showing.

Original position:

Original position

When the keyboard pops up, my screen overflows like so:

Overflowed screen

Code:


    @override
      Widget build(BuildContext context) {
        return Scaffold(
          resizeToAvoidBottomInset: true,
          appBar: AppBar(
            title: Text(
              'Chat',
              style: TextStyle(
                  fontFamily: 'Chalet',
                  fontWeight: FontWeight.w300,
                  fontSize: widget.deviceWidth * 0.06),
            ),
          ),
          backgroundColor: whitePrimary,
          body: Column(
            children: [
              SizedBox(
                height: widget.deviceHeight * 0.8,
                child: ListView.builder(
                    itemCount: _messages.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ListView(
                        children: [Text(_messages[index])],
                      );
                    }),
              ),
              const Divider(height: 1.0),
              _buildTextComposer()
            ],
          ),
        );
      }
    
      Widget _buildTextComposer() {
        return SizedBox(
          width: widget.deviceWidth,
          child: TextField(
            controller: _textFieldController,
            decoration: InputDecoration(
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              enabledBorder: InputBorder.none,
              errorBorder: InputBorder.none,
              disabledBorder: InputBorder.none,
              filled: true,
              fillColor: whitePrimary,
              suffixIcon: IconButton(
                icon: const Icon(
                  Icons.send_rounded,
                  color: orangePrimary,
                ),
                onPressed: () {},
              ),
              hintStyle: TextStyle(fontSize: widget.deviceWidth * 0.03),
              hintText: 'Write a message...',
            ),
          ),
        );
      }

where deviceHeight
and deviceWidth

    final size = MediaQuery.of(context).size;
    
        double deviceWidth = size.width;
        double deviceHeight = size.height;
Tags:

2

Answers


  1. 0

    You can fix it with signleChildScrollView. Wrap your root widget with signleChildScrollView. I’ll update with full sources code.

    Login or Signup to reply.
  2. 0

    Don’t use device height from MediaQuery to set the ListView height, but instead, wrap the ListView with Expanded.

    Column(
  children: [
    Expanded(
      child: ListView.builder(
        // ...
      ),
    // ... other children
  ],
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search