flutter_keyboard_actions
flutter_keyboard_actions copied to clipboard
diegoveloper
Empty and white Keyboard Actions Bar on iOS
I have been using Keyboard actions since my project began but somehow it has broken and now I cannot see KeyboardActions anymore. Only I can see a white bar over keyboard and I can not change this behavior. Here is the screenshot.
I am using version 4.1.0 and flutter doctor output is below
bahadirarslan@Bahadirs-MacBook-Pro mylog % flutter doctor -v
[✓] Flutter (Channel stable, 3.3.4, on macOS 12.6 21G115 darwin-arm, locale en-TR)
• Flutter version 3.3.4 on channel stable at /Users/bahadirarslan/Development/SDKS/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision eb6d86ee27 (12 days ago), 2022-10-04 22:31:45 -0700
• Engine revision c08d7d5efc
• Dart version 2.18.2
• DevTools version 2.15.0
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/bahadirarslan/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14A400
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
[✓] VS Code (version 1.72.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.50.0
[✓] Connected device (3 available)
• iPhone 14 (mobile) • 00D2C3B6-8810-4D42-9C1B-E3F863293A14 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 106.0.5249.119
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Here is how I use it
@override
Widget build(BuildContext context) {
nameFieldController = useTextEditingController(text: isEdit ? widget.limitation!.name : null);
durationFieldController = useTextEditingController(text: isEdit ? widget.limitation!.duration.toString() : null);
valueFieldController = useTextEditingController(text: isEdit ? widget.limitation!.value : null);
final focusName = useFocusNode();
final focusDurationType = useFocusNode();
final focusDuration = useFocusNode();
final focusTimeType = useFocusNode();
final focusValueType = useFocusNode();
final focusLimitType = useFocusNode();
final focusValue = useFocusNode();
return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold(
appBar: AppBar(
title: Text(L.of(context).addLimitation),
),
body: KeyboardActions(
isDialog: false,
config: KeyboardActionsConfig(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
keyboardBarColor: Colors.grey[200],
defaultDoneWidget: Text(
"DONE",
style: TextStyle(color: Colors.black),
),
nextFocus: true,
actions: [
KeyboardActionsItem(
focusNode: focusName,
),
KeyboardActionsItem(focusNode: focusDurationType),
KeyboardActionsItem(focusNode: focusDuration),
KeyboardActionsItem(focusNode: focusTimeType),
KeyboardActionsItem(focusNode: focusLimitType),
KeyboardActionsItem(focusNode: focusValueType),
KeyboardActionsItem(focusNode: focusValue),
]),
child: SafeArea(
child: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(kPadding),
child: Column(
children: [
FormTextField(
controller: nameFieldController,
hintText: L.of(context).enterNameForLimitation,
prefixText: L.of(context).name,
useStandartSuffixClearButton: true,
focusNode: focusName,
textCapitalization: TextCapitalization.sentences,
validator: (value) {
if (value == null || value.isEmpty) {
return L.of(context).enterNameForLimitation;
}
return null;
},
),
// The parenthesis may be wrong, I just copied a part of my code and completed the parenthesis as fas as I can see.
],),),),),),),),),); }
Is there any bug or am I doing something wrong?
I think you don't need
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Form(
and use KeyboardActions on top of your Column, check the examples of this package.
Unfortunately it didn't help currently it is like below
@override
Widget build(BuildContext context) {
nameFieldController = useTextEditingController(text: isEdit ? widget.limitation!.name : null);
durationFieldController = useTextEditingController(text: isEdit ? widget.limitation!.duration.toString() : null);
valueFieldController = useTextEditingController(text: isEdit ? widget.limitation!.value : null);
final focusName = useFocusNode();
final focusDurationType = useFocusNode();
final focusDuration = useFocusNode();
final focusTimeType = useFocusNode();
final focusValueType = useFocusNode();
final focusLimitType = useFocusNode();
final focusValue = useFocusNode();
return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold(
appBar: AppBar(
title: Text(L.of(context).addLimitation),
),
body: SafeArea(
child: SingleChildScrollView(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(kPadding),
child: KeyboardActions(
isDialog: false,
config: KeyboardActionsConfig(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
keyboardBarColor: Colors.grey[200],
defaultDoneWidget: Text(
"DONE",
style: TextStyle(color: Colors.black),
),
nextFocus: true,
actions: [
KeyboardActionsItem(
focusNode: focusName,
),
KeyboardActionsItem(focusNode: focusDurationType),
KeyboardActionsItem(focusNode: focusDuration),
KeyboardActionsItem(focusNode: focusTimeType),
KeyboardActionsItem(focusNode: focusLimitType),
KeyboardActionsItem(focusNode: focusValueType),
KeyboardActionsItem(focusNode: focusValue),
]),
child: Column(
children: [
FormTextField(
controller: nameFieldController,
hintText: L.of(context).enterNameForLimitation,
prefixText: L.of(context).name,
useStandartSuffixClearButton: true,
focusNode: focusName,
textCapitalization: TextCapitalization.sentences,
validator: (value) {
if (value == null || value.isEmpty) {
return L.of(context).enterNameForLimitation;
}
return null;
},
),
],),),),),),),),),); }
And the result is same, only white bar on top of my keyboard.
Also if I don't use that SizedBox, I got exception below
FlutterError (BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderFlex's layout() function by the following function, which probably computed the invalid constraints in question:
RenderBox.layout (package:flutter/src/rendering/box.dart:2418:11)
The offending constraints were:
BoxConstraints(w=350.0, h=Infinity))
Did you run the examples, what's the result?
On Tue, Oct 18, 2022, 6:03 AM bahadir arslan @.***> wrote:
Unfortunately it didn't help currently it is like below
@override Widget build(BuildContext context) { nameFieldController = useTextEditingController(text: isEdit ? widget.limitation!.name : null); durationFieldController = useTextEditingController(text: isEdit ? widget.limitation!.duration.toString() : null); valueFieldController = useTextEditingController(text: isEdit ? widget.limitation!.value : null); final focusName = useFocusNode(); final focusDurationType = useFocusNode(); final focusDuration = useFocusNode(); final focusTimeType = useFocusNode(); final focusValueType = useFocusNode(); final focusLimitType = useFocusNode(); final focusValue = useFocusNode(); return GestureDetector( onTap: () => FocusManager.instance.primaryFocus?.unfocus(), child: Scaffold( appBar: AppBar( title: Text(L.of(context).addLimitation), ), body: SafeArea( child: SingleChildScrollView( child: SizedBox( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: Form( key: _formKey, child: Padding( padding: const EdgeInsets.all(kPadding), child: KeyboardActions( isDialog: false, config: KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.ALL, keyboardBarColor: Colors.grey[200], defaultDoneWidget: Text( "DONE", style: TextStyle(color: Colors.black), ), nextFocus: true, actions: [ KeyboardActionsItem( focusNode: focusName, ), KeyboardActionsItem(focusNode: focusDurationType), KeyboardActionsItem(focusNode: focusDuration), KeyboardActionsItem(focusNode: focusTimeType), KeyboardActionsItem(focusNode: focusLimitType), KeyboardActionsItem(focusNode: focusValueType), KeyboardActionsItem(focusNode: focusValue), ]), child: Column( children: [ FormTextField( controller: nameFieldController, hintText: L.of(context).enterNameForLimitation, prefixText: L.of(context).name, useStandartSuffixClearButton: true, focusNode: focusName, textCapitalization: TextCapitalization.sentences, validator: (value) { if (value == null || value.isEmpty) { return L.of(context).enterNameForLimitation; }
return null; }, ),],),),),),),),),),); }
And the result is same, only white bar on top of my keyboard.
Also if I don't use that SizedBox, I got exception below
FlutterError (BoxConstraints forces an infinite height. These invalid constraints were provided to RenderFlex's layout() function by the following function, which probably computed the invalid constraints in question: RenderBox.layout (package:flutter/src/rendering/box.dart:2418:11) The offending constraints were: BoxConstraints(w=350.0, h=Infinity))
— Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_keyboard_actions/issues/209#issuecomment-1282208528, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UAJJ7EN2R5CGUROQMDWDZ7Z3ANCNFSM6AAAAAARG7D6UU . You are receiving this because you commented.Message ID: @.***>
Examples are fine, probably my widget design is ruining something but the problem is how can I find it? Do you have a suggestion?