jld3103
2 years ago
committed by
GitHub
3 changed files with 32 additions and 507 deletions
@ -1,493 +0,0 @@
|
||||
// Copyright 2014 The Flutter Authors. All rights reserved. |
||||
// Use of this source code is governed by a BSD-style license that can be |
||||
// found in the LICENSE file. |
||||
|
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter/scheduler.dart'; |
||||
import 'package:flutter/services.dart'; |
||||
|
||||
class CustomAutocomplete<T extends Object> extends StatelessWidget { |
||||
const CustomAutocomplete({ |
||||
required this.optionsBuilder, |
||||
this.displayWidgetForOption = CustomRawAutocomplete.defaultWidgetForOption, |
||||
this.fieldViewBuilder = _defaultFieldViewBuilder, |
||||
this.onSelected, |
||||
this.optionsMaxHeight = 200.0, |
||||
this.optionsViewBuilder, |
||||
this.initialValue, |
||||
super.key, |
||||
}); |
||||
|
||||
final AutocompleteOptionToWidget<T> displayWidgetForOption; |
||||
|
||||
final AutocompleteFieldViewBuilder fieldViewBuilder; |
||||
|
||||
final AutocompleteOnSelected<T>? onSelected; |
||||
|
||||
final AutocompleteOptionsBuilder<T> optionsBuilder; |
||||
|
||||
final AutocompleteOptionsViewBuilder<T>? optionsViewBuilder; |
||||
|
||||
final double optionsMaxHeight; |
||||
|
||||
final TextEditingValue? initialValue; |
||||
|
||||
static Widget _defaultFieldViewBuilder( |
||||
final BuildContext context, |
||||
final TextEditingController textEditingController, |
||||
final FocusNode focusNode, |
||||
final VoidCallback onFieldSubmitted, |
||||
) => |
||||
_CustomAutocompleteField( |
||||
focusNode: focusNode, |
||||
textEditingController: textEditingController, |
||||
onFieldSubmitted: onFieldSubmitted, |
||||
); |
||||
|
||||
@override |
||||
Widget build(final BuildContext context) => CustomRawAutocomplete<T>( |
||||
displayWidgetForOption: displayWidgetForOption, |
||||
fieldViewBuilder: fieldViewBuilder, |
||||
initialValue: initialValue, |
||||
optionsBuilder: optionsBuilder, |
||||
optionsViewBuilder: optionsViewBuilder ?? |
||||
( |
||||
final context, |
||||
final onSelected, |
||||
final options, |
||||
) => |
||||
_CustomAutocompleteOptions<T>( |
||||
displayWidgetForOption: displayWidgetForOption, |
||||
onSelected: onSelected, |
||||
options: options, |
||||
maxOptionsHeight: optionsMaxHeight, |
||||
), |
||||
onSelected: onSelected, |
||||
); |
||||
} |
||||
|
||||
// The default Material-style Autocomplete text field. |
||||
class _CustomAutocompleteField extends StatelessWidget { |
||||
const _CustomAutocompleteField({ |
||||
required this.focusNode, |
||||
required this.textEditingController, |
||||
required this.onFieldSubmitted, |
||||
}); |
||||
|
||||
final FocusNode focusNode; |
||||
|
||||
final VoidCallback onFieldSubmitted; |
||||
|
||||
final TextEditingController textEditingController; |
||||
|
||||
@override |
||||
Widget build(final BuildContext context) => TextFormField( |
||||
controller: textEditingController, |
||||
focusNode: focusNode, |
||||
onFieldSubmitted: (final value) { |
||||
onFieldSubmitted(); |
||||
}, |
||||
); |
||||
} |
||||
|
||||
// The default Material-style Autocomplete options. |
||||
class _CustomAutocompleteOptions<T extends Object> extends StatelessWidget { |
||||
const _CustomAutocompleteOptions({ |
||||
required this.displayWidgetForOption, |
||||
required this.onSelected, |
||||
required this.options, |
||||
required this.maxOptionsHeight, |
||||
super.key, |
||||
}); |
||||
|
||||
final AutocompleteOptionToWidget<T> displayWidgetForOption; |
||||
|
||||
final AutocompleteOnSelected<T> onSelected; |
||||
|
||||
final Iterable<T> options; |
||||
final double maxOptionsHeight; |
||||
|
||||
@override |
||||
Widget build(final BuildContext context) => Align( |
||||
alignment: Alignment.topLeft, |
||||
child: Material( |
||||
elevation: 4, |
||||
child: ConstrainedBox( |
||||
constraints: BoxConstraints(maxHeight: maxOptionsHeight), |
||||
child: ListView.builder( |
||||
padding: EdgeInsets.zero, |
||||
shrinkWrap: true, |
||||
itemCount: options.length, |
||||
itemBuilder: (final context, final index) { |
||||
final option = options.elementAt(index); |
||||
return InkWell( |
||||
onTap: () { |
||||
onSelected(option); |
||||
}, |
||||
child: Builder( |
||||
builder: (final context) { |
||||
final highlight = AutocompleteHighlightedOption.of(context) == index; |
||||
if (highlight) { |
||||
SchedulerBinding.instance.addPostFrameCallback((final timeStamp) async { |
||||
await Scrollable.ensureVisible(context, alignment: 0.5); |
||||
}); |
||||
} |
||||
return Container( |
||||
color: highlight ? Theme.of(context).focusColor : null, |
||||
padding: const EdgeInsets.all(16), |
||||
child: displayWidgetForOption(option), |
||||
); |
||||
}, |
||||
), |
||||
); |
||||
}, |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
typedef AutocompleteOptionToWidget<T extends Object> = Widget Function(T option); |
||||
|
||||
class CustomRawAutocomplete<T extends Object> extends StatefulWidget { |
||||
const CustomRawAutocomplete({ |
||||
required this.optionsViewBuilder, |
||||
required this.optionsBuilder, |
||||
this.displayWidgetForOption = defaultWidgetForOption, |
||||
this.fieldViewBuilder, |
||||
this.focusNode, |
||||
this.onSelected, |
||||
this.textEditingController, |
||||
this.initialValue, |
||||
super.key, |
||||
}) : assert( |
||||
fieldViewBuilder != null || (key != null && focusNode != null && textEditingController != null), |
||||
'Pass in a fieldViewBuilder, or otherwise create a separate field and pass in the FocusNode, TextEditingController, and a key. Use the key with RawAutocomplete.onFieldSubmitted.', |
||||
), |
||||
// ignore: prefer_asserts_with_message |
||||
assert((focusNode == null) == (textEditingController == null)), |
||||
assert( |
||||
!(textEditingController != null && initialValue != null), |
||||
'textEditingController and initialValue cannot be simultaneously defined.', |
||||
); |
||||
|
||||
final AutocompleteFieldViewBuilder? fieldViewBuilder; |
||||
|
||||
final FocusNode? focusNode; |
||||
|
||||
final AutocompleteOptionsViewBuilder<T> optionsViewBuilder; |
||||
|
||||
final AutocompleteOptionToWidget<T> displayWidgetForOption; |
||||
|
||||
final AutocompleteOnSelected<T>? onSelected; |
||||
|
||||
final AutocompleteOptionsBuilder<T> optionsBuilder; |
||||
|
||||
final TextEditingController? textEditingController; |
||||
|
||||
final TextEditingValue? initialValue; |
||||
|
||||
static void onFieldSubmitted<T extends Object>(final GlobalKey key) { |
||||
(key.currentState! as _CustomRawAutocompleteState<T>)._onFieldSubmitted(); |
||||
} |
||||
|
||||
static Widget defaultWidgetForOption(final dynamic option) => Text(option.toString()); |
||||
|
||||
@override |
||||
State<CustomRawAutocomplete<T>> createState() => _CustomRawAutocompleteState<T>(); |
||||
} |
||||
|
||||
class _CustomRawAutocompleteState<T extends Object> extends State<CustomRawAutocomplete<T>> { |
||||
final GlobalKey _fieldKey = GlobalKey(); |
||||
final LayerLink _optionsLayerLink = LayerLink(); |
||||
late TextEditingController _textEditingController; |
||||
late FocusNode _focusNode; |
||||
late final Map<Type, Action<Intent>> _actionMap; |
||||
late final _CustomAutocompleteCallbackAction<AutocompletePreviousOptionIntent> _previousOptionAction; |
||||
late final _CustomAutocompleteCallbackAction<AutocompleteNextOptionIntent> _nextOptionAction; |
||||
late final _CustomAutocompleteCallbackAction<DismissIntent> _hideOptionsAction; |
||||
Iterable<T> _options = Iterable<T>.empty(); |
||||
T? _selection; |
||||
bool _userHidOptions = false; |
||||
String _lastFieldText = ''; |
||||
final ValueNotifier<int> _highlightedOptionIndex = ValueNotifier<int>(0); |
||||
|
||||
static const Map<ShortcutActivator, Intent> _shortcuts = <ShortcutActivator, Intent>{ |
||||
SingleActivator(LogicalKeyboardKey.arrowUp): AutocompletePreviousOptionIntent(), |
||||
SingleActivator(LogicalKeyboardKey.arrowDown): AutocompleteNextOptionIntent(), |
||||
}; |
||||
|
||||
// The OverlayEntry containing the options. |
||||
OverlayEntry? _floatingOptions; |
||||
|
||||
// True iff the state indicates that the options should be visible. |
||||
bool get _shouldShowOptions => !_userHidOptions && _focusNode.hasFocus && _selection == null && _options.isNotEmpty; |
||||
|
||||
// Called when _textEditingController changes. |
||||
Future<void> _onChangedField() async { |
||||
final value = _textEditingController.value; |
||||
final options = await widget.optionsBuilder( |
||||
value, |
||||
); |
||||
_options = options; |
||||
_updateHighlight(_highlightedOptionIndex.value); |
||||
if (_selection != null && value.text != _selection!.toString()) { |
||||
_selection = null; |
||||
} |
||||
|
||||
// Make sure the options are no longer hidden if the content of the field |
||||
// changes (ignore selection changes). |
||||
if (value.text != _lastFieldText) { |
||||
_userHidOptions = false; |
||||
_lastFieldText = value.text; |
||||
} |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
} |
||||
|
||||
// Called when the field's FocusNode changes. |
||||
void _onChangedFocus() { |
||||
// Options should no longer be hidden when the field is re-focused. |
||||
_userHidOptions = !_focusNode.hasFocus; |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
} |
||||
|
||||
// Called from fieldViewBuilder when the user submits the field. |
||||
void _onFieldSubmitted() { |
||||
if (_options.isEmpty || _userHidOptions) { |
||||
return; |
||||
} |
||||
_select(_options.elementAt(_highlightedOptionIndex.value)); |
||||
} |
||||
|
||||
// Select the given option and update the widget. |
||||
void _select(final T nextSelection) { |
||||
if (nextSelection == _selection) { |
||||
return; |
||||
} |
||||
_selection = nextSelection; |
||||
final selectionString = nextSelection.toString(); |
||||
_textEditingController.value = TextEditingValue( |
||||
selection: TextSelection.collapsed(offset: selectionString.length), |
||||
text: selectionString, |
||||
); |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
widget.onSelected?.call(_selection!); |
||||
} |
||||
|
||||
void _updateHighlight(final int newIndex) { |
||||
_highlightedOptionIndex.value = _options.isEmpty ? 0 : newIndex % _options.length; |
||||
} |
||||
|
||||
void _highlightPreviousOption(final AutocompletePreviousOptionIntent intent) { |
||||
if (_userHidOptions) { |
||||
_userHidOptions = false; |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
return; |
||||
} |
||||
_updateHighlight(_highlightedOptionIndex.value - 1); |
||||
} |
||||
|
||||
void _highlightNextOption(final AutocompleteNextOptionIntent intent) { |
||||
if (_userHidOptions) { |
||||
_userHidOptions = false; |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
return; |
||||
} |
||||
_updateHighlight(_highlightedOptionIndex.value + 1); |
||||
} |
||||
|
||||
Object? _hideOptions(final DismissIntent intent) { |
||||
if (!_userHidOptions) { |
||||
_userHidOptions = true; |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
return null; |
||||
} |
||||
return Actions.invoke(context, intent); |
||||
} |
||||
|
||||
void _setActionsEnabled(final bool enabled) { |
||||
// The enabled state determines whether the action will consume the |
||||
// key shortcut or let it continue on to the underlying text field. |
||||
// They should only be enabled when the options are showing so shortcuts |
||||
// can be used to navigate them. |
||||
_previousOptionAction.enabled = enabled; |
||||
_nextOptionAction.enabled = enabled; |
||||
_hideOptionsAction.enabled = enabled; |
||||
} |
||||
|
||||
void _updateActions() { |
||||
_setActionsEnabled(_focusNode.hasFocus && _selection == null && _options.isNotEmpty); |
||||
} |
||||
|
||||
bool _floatingOptionsUpdateScheduled = false; |
||||
// Hide or show the options overlay, if needed. |
||||
void _updateOverlay() { |
||||
if (SchedulerBinding.instance.schedulerPhase == SchedulerPhase.persistentCallbacks) { |
||||
if (!_floatingOptionsUpdateScheduled) { |
||||
_floatingOptionsUpdateScheduled = true; |
||||
SchedulerBinding.instance.addPostFrameCallback((final timeStamp) { |
||||
_floatingOptionsUpdateScheduled = false; |
||||
_updateOverlay(); |
||||
}); |
||||
} |
||||
return; |
||||
} |
||||
|
||||
_floatingOptions?.remove(); |
||||
if (_shouldShowOptions) { |
||||
final newFloatingOptions = OverlayEntry( |
||||
builder: (final context) => CompositedTransformFollower( |
||||
link: _optionsLayerLink, |
||||
showWhenUnlinked: false, |
||||
targetAnchor: Alignment.bottomLeft, |
||||
child: AutocompleteHighlightedOption( |
||||
highlightIndexNotifier: _highlightedOptionIndex, |
||||
child: Builder( |
||||
builder: (final context) => widget.optionsViewBuilder( |
||||
context, |
||||
_select, |
||||
_options, |
||||
), |
||||
), |
||||
), |
||||
), |
||||
); |
||||
Overlay.of(context, rootOverlay: true)!.insert(newFloatingOptions); |
||||
_floatingOptions = newFloatingOptions; |
||||
} else { |
||||
_floatingOptions = null; |
||||
} |
||||
} |
||||
|
||||
// Handle a potential change in textEditingController by properly disposing of |
||||
// the old one and setting up the new one, if needed. |
||||
void _updateTextEditingController(final TextEditingController? old, final TextEditingController? current) { |
||||
if ((old == null && current == null) || old == current) { |
||||
return; |
||||
} |
||||
if (old == null) { |
||||
_textEditingController |
||||
..removeListener(_onChangedField) |
||||
..dispose(); |
||||
_textEditingController = current!; |
||||
} else if (current == null) { |
||||
_textEditingController.removeListener(_onChangedField); |
||||
_textEditingController = TextEditingController(); |
||||
} else { |
||||
_textEditingController.removeListener(_onChangedField); |
||||
_textEditingController = current; |
||||
} |
||||
_textEditingController.addListener(_onChangedField); |
||||
} |
||||
|
||||
// Handle a potential change in focusNode by properly disposing of the old one |
||||
// and setting up the new one, if needed. |
||||
void _updateFocusNode(final FocusNode? old, final FocusNode? current) { |
||||
if ((old == null && current == null) || old == current) { |
||||
return; |
||||
} |
||||
if (old == null) { |
||||
_focusNode |
||||
..removeListener(_onChangedFocus) |
||||
..dispose(); |
||||
_focusNode = current!; |
||||
} else if (current == null) { |
||||
_focusNode.removeListener(_onChangedFocus); |
||||
_focusNode = FocusNode(); |
||||
} else { |
||||
_focusNode.removeListener(_onChangedFocus); |
||||
_focusNode = current; |
||||
} |
||||
_focusNode.addListener(_onChangedFocus); |
||||
} |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
_textEditingController = widget.textEditingController ?? TextEditingController.fromValue(widget.initialValue); |
||||
_textEditingController.addListener(_onChangedField); |
||||
_focusNode = widget.focusNode ?? FocusNode(); |
||||
_focusNode.addListener(_onChangedFocus); |
||||
_previousOptionAction = |
||||
_CustomAutocompleteCallbackAction<AutocompletePreviousOptionIntent>(onInvoke: _highlightPreviousOption); |
||||
_nextOptionAction = _CustomAutocompleteCallbackAction<AutocompleteNextOptionIntent>(onInvoke: _highlightNextOption); |
||||
_hideOptionsAction = _CustomAutocompleteCallbackAction<DismissIntent>(onInvoke: _hideOptions); |
||||
_actionMap = <Type, Action<Intent>>{ |
||||
AutocompletePreviousOptionIntent: _previousOptionAction, |
||||
AutocompleteNextOptionIntent: _nextOptionAction, |
||||
DismissIntent: _hideOptionsAction, |
||||
}; |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
} |
||||
|
||||
@override |
||||
void didUpdateWidget(final CustomRawAutocomplete<T> oldWidget) { |
||||
super.didUpdateWidget(oldWidget); |
||||
_updateTextEditingController( |
||||
oldWidget.textEditingController, |
||||
widget.textEditingController, |
||||
); |
||||
_updateFocusNode(oldWidget.focusNode, widget.focusNode); |
||||
_updateActions(); |
||||
_updateOverlay(); |
||||
} |
||||
|
||||
@override |
||||
void dispose() { |
||||
_textEditingController.removeListener(_onChangedField); |
||||
if (widget.textEditingController == null) { |
||||
_textEditingController.dispose(); |
||||
} |
||||
_focusNode.removeListener(_onChangedFocus); |
||||
if (widget.focusNode == null) { |
||||
_focusNode.dispose(); |
||||
} |
||||
_floatingOptions?.remove(); |
||||
_floatingOptions = null; |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(final BuildContext context) => Container( |
||||
key: _fieldKey, |
||||
child: Shortcuts( |
||||
shortcuts: _shortcuts, |
||||
child: Actions( |
||||
actions: _actionMap, |
||||
child: CompositedTransformTarget( |
||||
link: _optionsLayerLink, |
||||
child: widget.fieldViewBuilder == null |
||||
? const SizedBox.shrink() |
||||
: widget.fieldViewBuilder!( |
||||
context, |
||||
_textEditingController, |
||||
_focusNode, |
||||
_onFieldSubmitted, |
||||
), |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
class _CustomAutocompleteCallbackAction<T extends Intent> extends CallbackAction<T> { |
||||
_CustomAutocompleteCallbackAction({ |
||||
required super.onInvoke, |
||||
this.enabled = true, |
||||
}); |
||||
|
||||
bool enabled; |
||||
|
||||
@override |
||||
bool isEnabled(covariant final T intent) => enabled; |
||||
|
||||
@override |
||||
bool consumesKey(covariant final T intent) => enabled; |
||||
} |
||||
Loading…
Reference in new issue