A focusable and blurable TextField widget

Overview

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

You might also like...

A simple detailed flutter widget that looks almost the same as the real instagram mention widget.

A simple detailed flutter widget that looks almost the same as the real instagram mention widget.

Instagram Mention Widgets 'small details do matter' ❤️ This package provides simple and almost the same UI details that the real Instagram mention wid

Oct 10, 2022

A flutter widget which renders its child outside the original widget hierarchy.

 A flutter widget which renders its child outside the original widget hierarchy.

overlay_container A flutter widget which renders its child outside the original widget hierarchy. Demo. This demo is present as an example here. You c

Jun 10, 2022

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Flutter Tutorial - Inherited Widget The InheritedWidget helps you to easily dist

Dec 29, 2021

FT-Custom-Widget - A Custom Widget Built With Flutter

FT-Custom-Widget - A Custom Widget Built With Flutter

Custom Widget Watch it on YouTube Product Screen Sample when you implement compl

Mar 29, 2022

Flip widget - A Simple Flip widget For Flutter

Flip widget - A Simple Flip widget For Flutter

flip_widget Flip your widget. Usage FlipWidget( key: _flipKey, child: Co

Nov 13, 2022

Kullanmaya hazir widget cozumleri -Ready to use widget solutions

Ready to use widgets ( 🇹🇷 ) Projelerimde yararlı widget çözümleri kullanıyorum ve çoğu zaman orada kalıyor. Bunları hem ben hemde sizden gelenler il

Dec 27, 2022

This widget automatically scrolls the custom child widget to an infinite loop.

This widget automatically scrolls the custom child widget to an infinite loop.

Scroll Loop Auto Scroll This widget automatically scrolls the custom child widget to an infinite loop. Example Features Infinite Auto Scroll Custom ch

Dec 12, 2022

Widget that gives you the size of the widget in runtime.

Tailor Flutter widget that calculates the size of a widget in runtime. Usage Just wrap your widget with Tailor and get the size in the builder. The bu

Nov 2, 2022

A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released.

A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released.

pinch_zoom A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released

Dec 30, 2022
Comments
  • Add ability to add custom overlay

    Add ability to add custom overlay

    Just came across this project and it does almost everything that I needed it for. Only thing is that I want to have it render an overlay widget when focused. Played around with the ode and all it needs is this...

    Define callback

    typedef OverlayBuilder = Widget Function(
      BuildContext context,
      Rect parentRect,
    );
    

    Add a field in FocusWidget settable from the constructor and static builder

    final OverlayBuilder? overlayBuilder;
    

    Then where you have defined the children, it can be called.

         final overlayBuilder = widget.overlayBuilder;
          final children = <Widget>[
            Listener(
              <removed for brevity>
            ),
            if (overlayBuilder != null) overlayBuilder(context, rect),
          ];
    

    I am using it this way which seems to work...

    return FocusWidget.builder(
          context,
          overlayBuilder: (context, rect) {
            final offset = Alignment.bottomRight.withinRect(rect);
            return Positioned(
              top: offset.dy,
              left: offset.dx - 200,
              child: Material(
                child: Container(
                  color: Colors.yellow,
                  child: ConstrainedBox(
                    constraints: BoxConstraints(minWidth: 200),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('One'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Two'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Three'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          },
          builder: (context, focusNode) => GestureDetector(
            onTapDown: (_) async {
              FocusScope.of(context).requestFocus(focusNode);
            },
            child: Text('Open Overlay'),
          ),
        );
    

    This will open an overlay pinned to the bottom right of the widget

    Screen Shot 2021-04-14 at 2 58 36 PM
    opened by aqwert 3
Owner
yeoman
yeoman
Text and TextField highlighted with rounded corners

rounded_background_text Highlight text with rounded corners Features ✅ Highlight

Bruno D'Luka 39 Nov 6, 2022
A TextField flutter package with tagging functionality.

Flutter Tagging A flutter package with tagging or multi-select functionality. Useful for adding Tag or Label Selection Forms. List<Language> _selected

Sarbagya Dhaubanjar 149 Sep 6, 2022
Flutter-pinbox - UI for enter a PIN on flutter/dart, one digit per textField box.

flutter-pinbox This is a library for enter a PIN on flutter/dart. You can enter one digit per textField box. The detail The library locate at path lib

null 2 Feb 26, 2022
Allows tags to be entered inside textfield

textfield_tags This is a widget that allows your users to create tags by entering the tag's name inside of textfield and make the tags appear in the t

Eyoel Defare 75 Nov 2, 2022
Widget to count the amount of nested widget tree, useful in the dynamic construction of the interface when it is important to know the depth of widget.

widget_tree_depth_counter Widget Tree Depth Counter WidgetTreeDepthCounter is a simple widget to count the amount of nested widget tree, useful in the

Riccardo Cucia 4 Aug 1, 2022
MindInventory 15 Sep 5, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
Iridium-reader-widget - Plug and play reader widget allowing to easily integrate an Iridium viewer inside any app

Plug and play reader widget allowing to easily integrate an Iridium viewer insid

Mantano 15 Dec 31, 2022
A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget)

Use_Of_Card_And_Padding_Class A new Flutter project. Use of Padding Class(Widget) and Card Class (Widget) Getting Started This project is a starting p

Avinandan Bose 1 Mar 18, 2022