Skip to main content

🧩 Field Widget

A stylized, reusable search or input field widget designed for dark backgrounds, featuring a customizable icon, hint text, and styling color.

The Field Widget is ideal for use in search bars or input fields embedded in headers, toolbars, or filters, and adapts easily through theming and props.

🧱 Parameters:​

  • [hintText] – Text to display when the field is empty. Defaults to "Search products, categories, brands, etc.".
  • [icon] – The icon displayed at the beginning of the field. Defaults to [Icons.search].
  • [iconColor] – The color applied to both the icon and hint text. Defaults to [Colors.lightBlueAccent].
  • [controller] – Optional [TextEditingController] to control the input text.
  • [onChanged] – Callback triggered whenever the input text changes.

🎯 Usage Example:​

 Field(
   hintText: "Search items...",
   icon: Icons.shopping_cart,
   iconColor: Colors.orangeAccent,
   controller: myController,
   onChanged: (value) {
     print("Search: $value");
   },
 )

🎨 Styling Details:​

  • Background color: #0F1F2C (dark blue)
  • Rounded corners: 30px
  • Padding: symmetric horizontal (20)
  • Text color: Matches [iconColor]

📌 Notes:​

  • This widget is wrapped inside an Expanded by default, so use inside a Row or Flex layout.
  • For dark-themed apps, this field blends nicely with the background.
  • You can override styling or wrap it in another container to adjust width or alignment.