Keyboard "Done" not displaying when wrap on Material App in Flutter

Question

I am using this library keyboard_actions to display Done button when keyboard displays. Everything was working fine but when i wrap MediaQuery above on MaterialApp then that done button doesn't display when keyboard pops up. Note: I use this MediaQuery for to Restrict the bold text and font size in the app. So is there any way to fix this issue ?

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'FirstPage.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
          .copyWith(boldText: false),
      child: MaterialApp(
        builder: (context, child) {
          return MediaQuery(
            child: child!,
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          );
        },
        useInheritedMediaQuery: true,
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App'),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            SizedBox(height: 50),
            Text(
              'textArea',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 35),
            ),
            TextButton(
                onPressed: () {
                  Navigator.push(context,
                      CupertinoPageRoute(builder: (context) => FirstPage()));
                },
                child: Text('Click'))
          ],
        ),
      ),
    );
  }
}

FirstPage.dart

import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
import 'package:flutter/services.dart';

class FirstPage extends StatefulWidget {
  const FirstPage({Key? key}) : super(key: key);

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

class _FirstPageState extends State<FirstPage> {
  final FocusNode _nodeText1 = FocusNode();

  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.grey[200],
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstPage'),
      ),
      body: KeyboardActions(
        config: _buildConfig(context),
        child: Container(
          child: Column(
            children: <Widget>[
              TextField(
                  keyboardType: TextInputType.number, focusNode: _nodeText1),
            ],
          ),
        ),
      ),
    );
  }
}

@JeelBhatti Yes, like this https://stackoverflow.com/questions/45415852/how-to-change-done-button-title-of-uiwebview-keyboard-toolbar — Mohammed Nabil, Dec 14 '21 at 11:20

score 0 · Answer 1 · answered Dec 14 '21 at 11:37

0

Add This Line on top:-

import 'package:flutter/services.dart';

I hope this solution is useful for you and if you want to use a keyboard done button like this.

You have to add this line on TextField Widget.

keyboardType: TextInputType.numberWithOptions(
              decimal: true,
              signed: true,
             ),

And you can also add input for matters for restricted symbols you don't want.

answered Dec 14 '21 at 11:37

Jeel Bhatti

651
3
15

`import 'package:flutter/services.dart';` I add this line at top in `main.dart` and `FirstPage.dart` but still doesn't work. – Mohammed Nabil Dec 14 '21 at 12:14
restart your application this code working in my mac. – Jeel Bhatti Dec 14 '21 at 12:16
Yes i also restarted but still doesn't work By the if i use this line `import 'package:flutter/services.dart';` at the top it says unused import. I also updated my code hope you find the solution – Mohammed Nabil Dec 14 '21 at 12:26
update your package. – Jeel Bhatti Dec 14 '21 at 12:30
I updated that package to `keyboard_actions: ^3.4.5` but still doesn't work. – Mohammed Nabil Dec 14 '21 at 12:55
can you upload code in github. – Jeel Bhatti Dec 14 '21 at 12:55
Did you checked ? – Mohammed Nabil Dec 14 '21 at 15:19

Keyboard "Done" not displaying when wrap on Material App in Flutter

1 Answers1