How to make widget stick to top of keyboard

Question

I'd like to make a widget that sticks to the bottom of the page, and then is pinned to the top of the keyboard (when it appears).

Note how the input textfield is pinned to the keyboard in the image below:

How would I do this? I tried putting it in the bottomNavigationBar , but this (obviously) didn't work. Is there a builtin way to do this?

Answer 1

This is a working example of the thing you want. I think! Just copy/paste/run

What's important in this example is the Expanded. A really nice widget that expands to as much space as it can get. And in result pushing the chat box down as much as possible
(Bottom of the screen or bottom of the keyboard)

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
                title: new Text('49715760 Stackoverflow'),
            ),
            body: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                    new Expanded(
                        child: new Material(
                            color: Colors.red,
                            child: new Text("Filled"),
                        ),
                    ),
                    new Container(
                        color: Colors.white,
                        padding: new EdgeInsets.all(10.0),
                        child: new TextField(
                            decoration: new InputDecoration(
                                hintText: 'Chat message',
                            ),
                        ),
                    ),
                ],
            ),
        );
    }
}

Answer 2

The best way to resolve this is to use a dedicated widget.

MediaQuery.of(context).viewInsets.bottom will give you the value of the height covered by the system UI(in this case the keyboard).

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var home = MyHomePage(title: 'Flutter Demo Home Page');
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: home,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _getBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _getBody() {
    return Stack(children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/sample.jpg"), fit: BoxFit.fitWidth)),
        // color: Color.fromARGB(50, 200, 50, 20),
        child: Column(
          children: <Widget>[TextField()],
        ),
      ),
      Positioned(
        bottom: MediaQuery.of(context).viewInsets.bottom,
        left: 0,
        right: 0,
        child: Container(
          height: 50,
          child: Text("Hiiiii"),
          decoration: BoxDecoration(color: Colors.pink),
        ),
      ),
    ]);
  }
}

Answer 3

there is a lib for that:

https://pub.dev/packages/keyboard_attachable

Widget build(BuildContext context) => FooterLayout(
    footer: MyFooterWidget(),
    child: PageMainContent(),
);

Answer 4

This worked for me,

showBottomSheet(
  context: context,
  builder: (context) => Container(
  height: // YOUR WIDGET HEIGHT
  child: // YOUR CHILD
)

showBottomSheet is a flutter inbuilt function.

Answer 5

mohammad byervand's solution is the best indeed. but keep in mind it would not work if you set android:windowSoftInputMode="adjustPan". as same as MediaQuery.of(context).viewInsets.bottom and resizeToAvoidBottomInset: false

Answer 6

use of bottomSheet option from Scaffold.

Scaffold(
    bottomSheet: chatBar(),
    body: Column(
           children: [
              Expanded(
               child: ListView()
              )
           ]
         )
    )

the chatBar is top of keyboard, when keyboard is open.

for transparent chatBar: can wrap Scaffold by

Theme(
          data: ThemeData.light().copyWith(
              bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
              
          ),