flutter_focus_watcher 0.0.1

  • Readme
  • Changelog
  • Installing
  • 76

Flutter Focus Watcher #

This widget is used to remove TextField focus if a tap occured somewhere else In order for this to work properly, it must be placed inside MaterialApp or WidgetsApp. This is necessary because this widget requires MediaQuery, which is supplied by those two.

The widget also keeps track of a keyboard space and moves the whole application up if a focused TextField gets obscured by the keyboard The only additional thing you need to do for it is to set your Scaffold's resizeToAvoidBottomInset to false (in case you use scaffold) and that's it. If you want to change the height of application lift, simply set your preferred value to the FocusWatcher's liftOffset variable. The default value is 15.0. This means the number of points above the keyboard's upper bound

Example #

It's very easy to use. You may add it as a library or simply copy flutter_focus_watcher.dart into your project. It doesn't have any external dependencies

Then simply do this. Notice that FocusWatcher is inside MaterialApp. That's because it inherits MediaQuery from that

IMPORTANT! You must wrap with the FocusWatcher every scaffold where you want this functionality

import 'package:flutter/material.dart';
import 'package:flutter_focus_watcher/flutter_focus_watcher.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
   Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Demo app',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page')
      );
    }
}

 @override
  Widget build(BuildContext context) {
    return FocusWatcher(
        child: Scaffold(
         // don't forget about this
         resizeToAvoidBottomInset: false,
         ...
       )
    );
     
  }

And it will do the rest.

alt watcher

And here is how it handles the keyboard

alt keyboard

In case you want to exclude some widget from this workflow, simply wrap that widget with

@override
Widget build(BuildContext context) {
    return IgnoreFocusWatcher(
      child: TextField("I will be ignored by FocusWatcher")
    );
}

And this widget will be ignored by FocusWatcher

There may also be some cases when a TextField (like material text field) does not apply a RenderEditable or RenderParagraph thus making this plugin useless. You can simply fix it by wrapping the TextField in a ForceFocusWatcher() widget. That's it

@override
Widget build(BuildContext context) {
    return ForceFocusWatcher(
      child: TextField("I'm forced to activate focus watcher")
    );
}

[0.0.1] - TODO: Add release date.

  • TODO: Describe initial release.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_focus_watcher: ^0.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_focus_watcher/flutter_focus_watcher.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
67
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
60
Overall:
Weighted score of the above. [more]
76
Learn more about scoring.

We analyzed this package on Dec 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.4

Health suggestions

Format lib/flutter_focus_watcher.dart.

Run flutter format to format lib/flutter_focus_watcher.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and flutter_focus_watcher.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test