keyboard_avoider 0.1.2

keyboard_avoider #

A lightweight alternative to the Scaffold widget for avoiding the on-screen software keyboard. Automatically scrolls obscured TextField child widgets into view on focus.

In the video above, every colored area is wrapped in its own KeyboardAvoider.

Examples #

A basic Placeholder:

import 'package:keyboard_avoider/keyboard_avoider.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardAvoider(
      child: Placeholder(),
    );
  }
}

A ListView containing multiple TextFields, with auto-scroll enabled:

import 'package:keyboard_avoider/keyboard_avoider.dart';

class MyWidget extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return KeyboardAvoider(
      autoScroll: true,
      child: ListView.builder(
        controller: _scrollController,
        itemCount: 40,
        itemBuilder: (context, index) {
          return TextFormField(
            initialValue: 'TextFormField ${index + 1}',
          );
        },
      ),
    );
  }
}

Why not use a Scaffold? #

Flutter comes with a built-in Scaffold widget that automatically adjusts the bottom padding of its body widget to accomodate the on-screen keyboard. However, it comes with 2 major caveats:

  1. It pushes all content up, which you may not want.
  2. It assumes that it fills the whole screen, which it may not.

In contrast, you can apply the KeyboardAvoider selectively to only certain widgets, and it only insets its bottom padding by the actual amount obscured by the keyboard.

Auto Scroll #

To auto-scroll to a focused widget such as a TextField, set the autoScroll property to true. If child is not a ScrollView, it is automatically embedded in a SingleChildScrollView to make it scrollable.

0.1.2 #

  • Added null checks to post frame callbacks

0.1.1 #

  • Fixed an NPE in dispose()

0.1.0 #

  • Initial Open Source release

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Column(
              children: <Widget>[
                Flexible(flex: 2, child: _buildPlaceholder(Colors.red)),
                Flexible(flex: 1, child: _buildPlaceholder(Colors.pink)),
              ],
            ),
          ),
          Flexible(
            flex: 2,
            child: Column(
              children: <Widget>[
                Flexible(flex: 2, child: _buildForm(40, Colors.green)),
                Flexible(flex: 1, child: _buildPlaceholder(Colors.lightGreen),
                ),
              ],
            ),
          ),
          Flexible(
            flex: 1,
            child: Column(
              children: <Widget>[
                Flexible(flex: 1, child: _buildPlaceholder(Colors.blue)),
                Flexible(flex: 2, child: _buildPlaceholder(Colors.lightBlue)),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildForm(int rows, Color color) {
    return Container(
      color: color,
      child: KeyboardAvoider(
        autoScroll: true,
        child: ListView.builder(
          padding: EdgeInsets.zero,
          controller: _scrollController,
          itemCount: rows,
          itemBuilder: (context, index) {
            return Material(
              child: TextFormField(
                initialValue: 'TextFormField ${index + 1}',
                decoration: InputDecoration(fillColor: color, filled: true),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildPlaceholder(Color color) {
    return Container(
      color: color,
      child: KeyboardAvoider(
        child: Placeholder(),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  keyboard_avoider: ^0.1.2

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:keyboard_avoider/keyboard_avoider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
89
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
95
Learn more about scoring.

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

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/keyboard_avoider.dart.

Run flutter format to format lib/keyboard_avoider.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test