Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
focus_widget cover
Package detailsv1.0.5+2

focus_widget

When tap outside of the widget, let the FocusNode lose focus.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
26
Likes
20
Pub points
140

Install package

flutter pub add focus_widget

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The focus_widget package provides a convenient way to automatically remove focus from a FocusNode when the user taps outside the widget. It enhances form usability by ensuring that focus is properly managed, preventing lingering focus states that can disrupt user experience. Ideal for input fields and interactive forms, it simplifies handling focus loss across multiple platforms. The package integrates seamlessly with Flutter's focus system and supports all major platforms including mobile, web, and desktop.

Use cases

  • Form input management
  • Preventing lingering focus states
  • Improving UX in interactive forms
  • Handling focus loss on tap outside
  • Cross-platform form widgets

Key features

  • Automatic focus loss on tap outside
  • Simple integration with FocusNode
  • Supports all Flutter platforms
  • Lightweight and minimal overhead
  • Works with existing form components

Suitable for

  • Developers building forms
  • Apps requiring clean focus behavior
  • Cross-platform Flutter applications
  • UIs with multiple input fields
  • Teams prioritizing user experience

Considerations

  • Requires proper FocusNode setup
  • May interfere with custom focus logic
  • Not suitable for always-focused widgets
  • Limited to tap-based focus loss
  • Depends on gesture detection accuracy

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Flutter Focus Widget

一个可以让FocusNode失去焦点的Widget
A focusable and blurable widget of based on the FocusNode.

  • 新增的参数：

    • bool showFocusArea

      使用一个半透明的红色方框显示焦点区域，主要用于调试。

    • void Function(Widget widget, FocusNode focusNode) onLostFocus

      失去焦点后会调用这个function。

  • New Parameters:

    • bool showFocusArea

      Display a translucent red box to show the focus area, it's for debug.

    • void Function(Widget widget, FocusNode focusNode) onLostFocus

      When lost focus invoke this function.

  • 当FocusWidget获得焦点后

    在FocusWidget区域外点击

    会调用FocusNode.unfocus()并且触发FocusNode的listener

  • When the FocusWidget had focus

    Tap outside the FocusWidget area

    Will call the FocusNode's unfocus method and trigger the FocusNode's listener

GIF

gif

Categories

Form

Source repository

Projects using this package

No data available yet.