Flutterでキーボードをカスタマイズする


### やりたいこと
- 「完了」ボタンを設置する
- 完了ボタンの対に、カスタマイズした何かを設置する

今回は、文字入力のカウントをツールバーに実装しようと思います。

### サンプル
![Simulator Screen Recording - iPhone 12 - 2022-05-01 at 14.18.03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530650/4292c1d5-759b-29a1-aba0-a4e206b7bc88.gif)

### 実装方法
完了ボタンを楽に実装できる、[keyboard_actions](https://pub.dev/packages/keyboard_actions)パッケージを使用します。

以下が、サンプルのコードです。

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

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  final FocusNode _nodeText1 = FocusNode();

  int charLength = 0;

  _onChanged(String value) {
    setState(() {
      charLength = value.length;
    });
  }

  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
      keyboardBarColor: Colors.black,
      nextFocus: false,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
          toolbarAlignment: MainAxisAlignment.start,
          displayArrows: false,
          toolbarButtons: [
            (node) {
              return Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: Stack(
                  children: [
                    Container(
                      child: Text(
                        "$charLength/10",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 330),
                      child: GestureDetector(
                        onTap: () => node.unfocus(),
                        child: Text(
                          "完了",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Container(
        child: KeyboardActions(
          config: _buildConfig(context),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  TextField(
                    onChanged: _onChanged,
                    maxLength: 10,
                    maxLengthEnforcement: MaxLengthEnforcement.none,
                    keyboardType: TextInputType.text,
                    focusNode: _nodeText1,
                    decoration: InputDecoration(
                      hintText: "入力してね",
                      counterText: '',
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```
デフォルトだと、サンプルで表示されているカウンターのの部分は↑、↓アイコンが設置されおり、boolで表示、非表示することが可能です。
ただ、これを非表示にするだけでは要素は残り続けてしまうので完全になきものにしてしまいましょう。
```dart 
KeyboardActionsItem(
          focusNode: _nodeText1,
          toolbarAlignment: MainAxisAlignment.start,
          displayArrows: false,
```
displayArrows: falseとすることで、消え去りました。
はい、あとは簡単です。
無理やり、完了ボタンとカウントに幅を広げてやればいいのです。（脳筋）


#### おまけ❤️
完了ボタンは他のページでも使えると思うので、使い回せようにしておくと便利かも！
```dart
import 'package:flutter/material.dart';

Widget customDoneButton(FocusNode _focusNode) {
  return GestureDetector(
    onTap: () {
      _focusNode.unfocus();
    },
      child: Text(
        '完了',
      ),
  );
}
```