chidori

Description:

chidori

What it does #
This package lets you to easily add an action bar over keyboard.
How to use it #
All you need is to wrap your app to KeyboardActionBarWrapper and provide defaultActionBar to it.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: KeyboardActionBarWrapper(
defaultActionBar: _buildDefaultBar,
child: const MyHomePage(),
),
);
}

Widget _buildDefaultBar(FocusNode focusNode) {
return Container(
height: 50,
color: Colors.blue,
padding: const EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () => focusNode.unfocus(),
child: const Text(
'Close',
style: TextStyle(color: Colors.black),
),
),
);
}
copied to clipboard
After that just use ActionFocusNode instead of default FocusNode.
TextField(
focusNode: ActionFocusNode(),
)
copied to clipboard
Custom action bar #
To use a custom action bar on a specific text field provide customBar to its ActionFocusNode.
ActionFocusNode(
customBar: _buildCustomBar,
);

Widget _buildCustomBar(FocusNode focusNode) {
final TextTheme textTheme = Theme.of(context).textTheme;

return Container(
height: 80,
color: Colors.red,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Text(
'This is custom action bar',
style: textTheme.bodyText1!.copyWith(color: Colors.white),
),
const Spacer(),
TextButton(
onPressed: () => focusNode.unfocus(),
child: Text(
'Unfocus',
style: textTheme.bodyText2!.copyWith(color: Colors.white),
),
),
],
),
);
}
copied to clipboard
Dismiss on tap outside #
To let focus be dismissed on tap outside the keyboard set unfocusOnTapOutside to true.
ActionFocusNode(unfocusOnTapOutside: true)
copied to clipboard