Is there any way to put custom toolbar on the keypad?

Question

I want to put a custom toolbar on the keypad like the image above. Is it possible in flutter? or should I write code on the iOS or Android side?

score 1 · Answer 1 · answered Feb 18 '21 at 05:23

Yes there is a way around in the flutter to achieve this.

Create a widget of the toolbar you want to add.
Set it visible on input focus.

For reference I am sharing the code how I achieve that.

class InputDoneView extends StatelessWidget {


@override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Style.lightGrey,
      child: Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.only(top: 1.0, bottom: 1.0),
          child: CupertinoButton(
            padding: EdgeInsets.only(right: 24.0, top: 2.0, bottom: 2.0),
            onPressed: () {
              FocusScope.of(context).requestFocus(new FocusNode());
            },
            child: Text(
              "Done",
              style: TextStyle(color: Style.primaryColor,fontWeight: FontWeight.normal)
            ),
          ),
        ),
      ),
    );
  }
}

To call this in your main view when input field is focused in and out.

showOverlay(BuildContext context) {
    if (overlayEntry != null) return;
    OverlayState overlayState = Overlay.of(context);
    overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom, right: 0.0, left: 0.0, child: InputDoneView());
    });

    overlayState.insert(overlayEntry);
  }

  removeOverlay() {
    if (overlayEntry != null) {
      overlayEntry.remove();
      overlayEntry = null;
    }
  }

score 1 · Accepted Answer · answered Feb 18 '21 at 06:58

You can copy paste run full code below
Please see working demo below
You can use package https://pub.dev/packages/keyboard_overlay
Step 1: Use with HandleFocusNodesOverlayMixin
Step 2: Use FocusNodeOverlay for focusNode
Step 3: Use GetFocusNodeOverlay and set _focusNodeOverlay = GetFocusNodeOverlay(
Step 4: TextField use TextField(focusNode: _focusNodeOverlay,
code snippet

class _MyHomePageState extends State<MyHomePage>
    with HandleFocusNodesOverlayMixin {
  FocusNodeOverlay _focusNodeOverlay;

  @override
  void initState() {
    _focusNodeOverlay = GetFocusNodeOverlay(
      child: TopKeyboardUtil(
        Container(
          color: Colors.white,
          height: 45,
          width: MediaQueryData.fromWindow(ui.window).size.width,
          child: Row(
            children: [
              GestureDetector(
                child: Icon(Icons.save),
                onTap: () => print("click"),
              ),
             ...
              Spacer(),
              Container(
                width: 60,
                child: Center(
                  child: DoneButtonIos(
                    backgroundColor: Colors.white,
                    textColor: Colors.green,
                    label: 'Post',
                    onSubmitted: () {
                      print("submit");
                    },
                    platforms: ['android', 'ios'],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

working demo

full code

import 'package:flutter/material.dart';
import 'package:keyboard_overlay/keyboard_overlay.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with HandleFocusNodesOverlayMixin {
  FocusNodeOverlay _focusNodeOverlay;

  @override
  void initState() {
    _focusNodeOverlay = GetFocusNodeOverlay(
      child: TopKeyboardUtil(
        Container(
          color: Colors.white,
          height: 45,
          width: MediaQueryData.fromWindow(ui.window).size.width,
          child: Row(
            children: [
              GestureDetector(
                child: Icon(Icons.save),
                onTap: () => print("click"),
              ),
              GestureDetector(
                child: Icon(Icons.computer),
                onTap: () => print("click"),
              ),
              GestureDetector(
                child: Icon(Icons.home),
                onTap: () => print("click"),
              ),
              Spacer(),
              Container(
                width: 60,
                child: Center(
                  child: DoneButtonIos(
                    backgroundColor: Colors.white,
                    textColor: Colors.green,
                    label: 'Post',
                    onSubmitted: () {
                      print("submit");
                    },
                    platforms: ['android', 'ios'],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              focusNode: _focusNodeOverlay,
              style: TextStyle(color: Colors.grey),
              decoration: InputDecoration(
                labelText: 'Type Something',
                labelStyle: TextStyle(color: Colors.black),
                fillColor: Colors.orange,
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.black, width: 1.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

this is great answer. thanks. One disappointment is that the toolbar hides the text field.Do you know how to fix it? — Haedong-Jeon, Feb 18 '21 at 09:23
you can use SingleChildScrollView wrap column wrap textfield. — chunhunghan, Feb 18 '21 at 09:27
Glad to help. please upvote or mark this as answer if it help you. thanks. — chunhunghan, Feb 18 '21 at 09:27

Is there any way to put custom toolbar on the keypad?

2 Answers2