flutterandroid-keypadiphone-keypad

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


enter image description here

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?


Solution

  • 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

    enter image description here

    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),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }