세 줄로

자체 입력 필드의 예

구현 포인트

1. FormField 빌더에서 입력 필드 조립

builder: (FormFieldState<String> field) {
  final effectiveDecoration = decoration.applyDefaults(
    Theme.of(field.context).inputDecorationTheme,
  );

  return InputDecorator(
    decoration: effectiveDecoration.copyWith(
      errorText: field.errorText,
    ),
    isEmpty: value?.isEmpty ?? true,
    child: Padding(
      padding: const EdgeInsets.only(right: 6),
      child: Text(
        value ?? '',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
  );
},

2. FormFieldState의 build에서 부모 클래스의 super.build를 호출하고 GestureDetector에서 탭을 감지합니다.

@override
Widget build(BuildContext context) {
  return GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => _handleTap(context),
    child: super.build(context),
  );
}

3. FormFieldState에서 탭한 후 입력 필드를 조립합니다.

void _handleTap(BuildContext context) {
  FocusScope.of(context).unfocus();
  final initText = widget.initialValue ?? '';
  _textChangedNotifier.value = initText;
  _textController.text = initText;

  showModalBottomSheet<String>(
    context: context,
    isScrollControlled: true,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(32),
        topRight: Radius.circular(32),
      ),
    ),
    builder: _textFieldModalSheet,
  ).whenComplete(() {
    // NOTE: 完了するボタンを押さずに選択画面を閉じた場合は選択前に戻す
    if (!_isTapDoneButton) {
      super.reset();
      super.save();
    }
  });
}

ValueListenableBuilder<String>(
  valueListenable: _textChangedNotifier,
  builder: (context, editingText, __) {
    final enableDoneButton =
        editingText.characters.length <= widget.maxLength;
    return FlatButton(
      textTheme: ButtonTextTheme.primary,
      child: Text(
        '完了する',
        style: TextStyle(
          fontWeight: enableDoneButton
              ? FontWeight.bold
              : FontWeight.normal,
        ),
      ),
      onPressed: enableDoneButton
          ? () {
              _isTapDoneButton = true;
              super.setValue(editingText);
              super.save();
              FocusScope.of(context).unfocus();
              Navigator.pop(context);
            }
          : null,
    );
  },

참고