SuggestionField class

A text input field with an attached dropdown menu for quick suggestions.

SuggestionField combines a text field with a dropdown button, allowing users to either type their own input or select from predefined suggestions. This is perfect for fields where you want to allow custom input while also offering common options.

Features

Dual Input: Type custom text or select from dropdown
Flexible Alignment: Customize dropdown position and text alignment
Custom Styling: Apply BoxDecoration for border, background, and more
Compact Design: Text field takes 75% width, dropdown button 25%
Submit on Enter: Pressing Enter submits the current text value

Quick Start

SuggestionField(
  items: ['Option 1', 'Option 2', 'Option 3'],
  onSelected: (value) {
    print('Selected or typed: $value');
  },
)

Constructor Parameters

Parameter	Type	Required	Default	Description
`items`	`List<dynamic>`	Yes	-	List of suggestion values for dropdown
`onSelected`	`Function(dynamic)`	Yes	-	Callback when value is selected or submitted
`height`	`double`	No	30	Height of the field
`width`	`double`	No	100	Total width of the field
`decoration`	`BoxDecoration`	No	White bg	Container decoration
`alignDropdown`	`AlignType`	No	`fill`	Dropdown width alignment
`alignDropdownText`	`TextAlign`	No	`left`	Text alignment in dropdown items

Alignment Options

The alignDropdown parameter controls how the dropdown menu is sized:

AlignType.fill - Dropdown fills the entire width of the field
AlignType.left - Dropdown aligns to left edge
AlignType.right - Dropdown aligns to right edge
AlignType.center - Dropdown centered below field

Example with Custom Styling

SuggestionField(
  items: ['Red', 'Green', 'Blue', 'Yellow'],
  height: 40,
  width: 200,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(8),
    color: Colors.white,
  ),
  alignDropdown: AlignType.fill,
  alignDropdownText: TextAlign.center,
  onSelected: (color) {
    print('Selected color: $color');
  },
)

Example with Theme Integration

SuggestionField(
  items: ['Arial', 'Times New Roman', 'Courier', 'Helvetica'],
  height: 35,
  width: 250,
  decoration: BoxDecoration(
    color: AppTheme.surface(context).colour,
    border: Border.all(
      color: AppTheme.outline(context).colour,
    ),
    borderRadius: BorderRadius.circular(4),
  ),
  onSelected: (font) {
    setState(() {
      selectedFont = font;
    });
  },
)

Example for Custom Units

// Perfect for entering measurements with unit suggestions
SuggestionField(
  items: ['px', 'em', 'rem', '%', 'vh', 'vw'],
  height: 30,
  width: 120,
  alignDropdown: AlignType.fill,
  onSelected: (unit) {
    // User either typed a custom value or selected a unit
    print('Unit: $unit');
  },
)

Usage Notes

The text field occupies 75% of the total width
The dropdown button occupies 25% of the total width
Pressing Enter in the text field triggers onSelected with current text
Clicking a dropdown item populates the text field and triggers onSelected
The dropdown uses MenuDropDown internally for the suggestion menu

When to Use

Use SuggestionField when:

You want to allow both custom input and predefined options
Common values should be easily selectable
Users might need to enter variations of standard options
Example use cases: units (px, em, %), file extensions, tags, categories

Use other menus instead when:

FilteredMenu - Only predefined options allowed, large list needs search
SimpleMenu - Only predefined options allowed, small list
TextField - No suggestions needed, completely free-form input

Constructors

SuggestionField({Key? key, required List items, required dynamic onSelected(dynamic value), double height = 30, double width = 100, String label = '', BoxDecoration decoration = const BoxDecoration(), InputDecoration inputDecoration = const InputDecoration(), AlignType alignDropdown = AlignType.fill, TextAlign alignDropdownText = TextAlign.left, String? initialValue}): const

Properties

alignDropdown → AlignType: final
alignDropdownText → TextAlign: final
decoration → BoxDecoration: final
hashCode → int: The hash code for this object.
no setterinherited
height → double: final
initialValue → String?: final
inputDecoration → InputDecoration: final
items → List: final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
label → String: final
makeRefreshable → Widget: Available on Widget?, provided by the WidgetExtension extension
Make your any widget refreshable with RefreshIndicator on top
no setter
onSelected → dynamic Function(dynamic value): final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
width → double: final

Methods

center({double? heightFactor, double? widthFactor}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set parent widget in center
cornerRadiusWithClipRRect(double radius) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add corner radius
cornerRadiusWithClipRRectOnly({int bottomLeft = 0, int bottomRight = 0, int topLeft = 0, int topRight = 0}) → ClipRRect: Available on Widget?, provided by the WidgetExtension extension
add custom corner radius each side
createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SuggestionField>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
expand({int flex = 1}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Expanded to parent widget
fit({BoxFit? fit, AlignmentGeometry? alignment}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add FittedBox to parent widget
flexible({int flex = 1, FlexFit? fit}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add Flexible to parent widget
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
opacity({required double opacity, int durationInSecond = 1, Duration? duration}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add opacity to parent widget
paddingAll(double padding) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding all
paddingBottom(double bottom) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding bottom
paddingDirectional({double start = 0.0, double top = 0.0, double end = 0.0, double bottom = 0.0}) → Widget: Available on Widget?, provided by the WidgetExtension extension
paddingLeft(double left) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding left
paddingOnly({double top = 0.0, double left = 0.0, double bottom = 0.0, double right = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return custom padding from each side
paddingRight(double right) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding right
paddingSymmetric({double vertical = 0.0, double horizontal = 0.0}) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding symmetric
paddingTop(double top) → Padding: Available on Widget?, provided by the WidgetExtension extension
return padding top
rotate({required double angle, bool transformHitTests = true, Offset? origin}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add rotation to parent widget
scale({required double scale, Offset? origin, AlignmentGeometry? alignment, bool transformHitTests = true}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add scaling to parent widget
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited
translate({required Offset offset, bool transformHitTests = true, Key? key}) → Widget: Available on Widget?, provided by the WidgetExtension extension
add translate to parent widget
validate({Widget value = const SizedBox()}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
visible(bool visible, {Widget? defaultWidget}) → Widget: Available on Widget?, provided by the WidgetExtension extension
set visibility
withHeight(double height) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height
withShaderMask(List<Color> colors, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget
withShaderMaskGradient(Gradient gradient, {BlendMode blendMode = BlendMode.srcATop}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Wrap with ShaderMask widget Gradient
withSize({double width = 0.0, double height = 0.0}) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom height and width
withTooltip({required String msg}) → Widget: Available on Widget?, provided by the WidgetExtension extension
Validate given widget is not null and returns given value if null.
withVisibility(bool visible, {Widget? replacement, bool maintainAnimation = false, bool maintainState = false, bool maintainSize = false, bool maintainSemantics = false, bool maintainInteractivity = false}) → Visibility: Available on Widget?, provided by the WidgetExtension extension
set widget visibility
withWidth(double width) → SizedBox: Available on Widget?, provided by the WidgetExtension extension
With custom width

Operators

operator ==(Object other) → bool: The equality operator.
inherited