drogel / keyboard_attachable Goto Github PK

View Code? Open in Web Editor NEW

58.0 58.0 21.0 19.11 MB

A Flutter package to build widgets that can be attached to the soft keyboard.

License: MIT License

Dart 82.83% Kotlin 0.62% Swift 2.03% Objective-C 0.19% HTML 7.54% Ruby 6.79%

keyboard_attachable's People

Contributors

Stargazers

Watchers

Forkers

mrhungnq95 gr33k01 jjagg b3nni97 kozhuhar pooyahrtn ttyiiii woodjobber cooldude53 delfme presence-app fakhry-alnaffar peyman-se

keyboard_attachable's Issues

How to add floating button?

Hey thanks for the library.

But i want to use a floating button with this library but unable to do so. Can you guide me?

Exception when using KeyboardAttachable widget

Hey @drogel,
Thank you for your great efforts on this, really appreciate it!

I'm trying to use keyboard_attachable in my app and looks like I found the bug.

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building SizeTransition(animation: AnimationController#e3d5d(▶
flutter: 0.852)➩Interval(-2.1699839633447886⋯1.0), dirty, state: _AnimatedState#c78fd):
flutter: 'package:flutter/src/animation/curves.dart': Failed assertion: line 180 pos 12: 'begin >= 0.0': is
flutter: not true.

Looks like the problem is in this line: https://github.com/drogel/keyboard_attachable/blob/master/lib/src/keyboard_attachable.dart#L143

The _animationBegin is calculated to -2.1699839633447886 (that's why it fails), _bottomInset to 877.3479066666666.

This is the actual screenshot.

And this is how it should be.

Could you please take a look?

Thanks in advance.

Footer do not stick to iOS Keyboard

When I try the repo example on iOS physical device, I have the keyboard & footer that shows at a different speed.
How can I please fix this?

RPReplay_Final1650598264.mov

Migrating to null safety

I was wondering if there is already a roadmap for migrating this library to null safety?
https://dart.dev/null-safety/migration-guide

offset incorrect with `bottomNavigationBar` in scaffold

To reproduce:

Clone the example
add bottomNavigationBar: Container(height: 20,), to the scaffold
observe the textbox floating 20 units above the keyboard (see screenshot)
Notice that the added container is still on the bottom of the screen, where it should be - it's just for whatever reason, the KeyboardAttachable uses it's height (in this case, 20) to calculate it's position when the keyboard is up.

Intended behavior:

The keyboard goes over the bottom navigation bar and the text box is still stickied above the keyboard.

This is blocking me from using this (otherwise incredibly helpful!) package. I have a footer in my app and want to use this package to solve a bug where the text box is not stickied properly.

Add an example for transitionBuilder

Hey,

Thanks for the great library. Can you just add an example on how to use transitionBuilder, because currently i am trying to but it hides my ui instead of showing the beginning.

I used this for transitionBuilder

transitionBuilder: (
          Widget child,
          Animation<double> animation,
          double keyboardHeight,
        ) {
          return FadeTransition(
            child: child,
            opacity: animation,
          );
        },

hi, I think this is very good, thank you very much, but I think the current use is limited, maybe it can be done like this:
KeyboardAttachable (builder: (double keyboardHeight) {
return someWidget (...);
})
What do you think?

How to use with SafeArea widget?

Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: appBar(),
    body: SafeArea(
      child: Obx(
        () => FooterLayout(
          footer: ...,
          child: ...
        ),
      ),
    ),
  );
}

https://share.getcloudapp.com/L1uB1wwD

How fix it?

[Question] Animation while sliding the keyboard out

I have a common messaging screen layout.

This package works expected. (Thanks!)

And I tried to enhance the behaviour with flutter_interactive_keyboard

The result is not bad. But obviously what I need here is snapping the footer widget to the bottom while keyboard position updates rather than animated between two values when focus changed.

Is there any idea?

if there is multiple textfield in same page, the attachable toolbar will response to all textfield focus/unfocuse events..

because the KeyboardVisibilityController is binding to global keyboard, instead of binding to a specified TextFiled instance.

How can I reduce the space taken by the widget inside KeyboardAttachableFooter

I only have a TextField inside the KeyboardAttachableFooter widget:

  keyboardAttachableFooter() => KeyboardAttachable(
        child: Container(
          padding: const EdgeInsets.all(10),
          child: const TextField(
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search_rounded),
              hintText: 'Find',
              border: OutlineInputBorder(),
            ),
          ),
        ),
      );

This is how my scaffold looks like:

      Scaffold(
        appBar: _appBar(context),
        body: SafeArea(
          maintainBottomViewPadding: true,
          child: FooterLayout(
            footer: keyboardAttachableFooter(),
            child: body,
          ),
        ),
        persistentFooterButtons: _persistentFooter(context),
        bottomNavigationBar: _bottomToolBelt(context),
        resizeToAvoidBottomInset: false,
      );

On widget build, it looks fine (I see the TextField at the bottom, above the persistentFooterButtons and the bottomNavigationBar).

When I click/tap the text-field, the soft-keyboard shows up and the TextField transitions above it. However, there is too much space below the TextField. See this:

Any idea what is causing it, and how can I remove the extra spacing? According to Flutter widget inspector, this space is occupied by the KeyboardAttachableFooter widget.

The child element is not rendered

My code:

Scaffold( resizeToAvoidBottomInset: false, body: FooterLayout( footer: Container( child: InputField(controller: null, placeholder: 'Type Here'), ), child: Text('PRUEBA'), ), ), );

The result:

The text widget with PRUEBA is not shown

Flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.5, on Microsoft Windows [Version 10.0.18363.1016], locale es-AR)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[√] VS Code, 64-bit edition (version 1.48.2)
[√] Connected device (2 available)

• No issues found!

KeyboardAttachable widget overlaps System Navigation Bar

Hi, I'm trying to use keyboard attachable in landscape orientation (left & right), but seems like the KeyboardAttachable widget overlaps the system navigation bar as below images:

This happens in both Android simulator & real device.

I have tried wrapping the FooterLayout & KeyboardAttachable inside a SafeArea, but no luck. Any chance I'm missing a configuration for the widget?

Thank you.

Ferry

KeyboardAttachable throws RenderBox exception on Navigator pop.

So basically I am using the using the package as so:

@override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return FooterLayout(
      footer: KeyboardAttachable(
        child: _backButton(context),
      ),
      child: SizedBox(
        height: size.height,
        width: size.width,
        child: const Body(),
      ),
    );
  }

  Widget _backButton(BuildContext context) {
    return TextButton(
      onPressed: () {
        FocusManager.instance.primaryFocus?.unfocus();
        Navigator.of(context).pop();
      },
      child: Text('Go back'),
    );
  }

For some reason, the ``Navigator.of(context).pop();` cause this exception to be thrown:

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building KeyboardAttachable(dirty, dependencies: [MediaQuery], state: _KeyboardAttachableState#8173b(ticker inactive)):
RenderBox was not laid out: RenderFittedBox#193dd NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1979 pos 12: 'hasSize'

2

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
KeyboardAttachable

I am really not sure why this is occurring. I have tried to specify a size for the back button the error still occurs.

How can I fix this?

[Question]footer does not move when the keyboard moves up and down

hi
footer does not move when the keyboard moves up and down.

I don't know what's wrong
If you know anything, please tell me

class InputUserNameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StateNotifierProvider<InputUserNameScreenController, InputUserNameScreenState>(
        create: (_) => InputUserNameScreenController(),
        builder: (context, _) {
          return KeyboardDismisser(
            gestures: [GestureType.onTap],
            child: FooterLayout(
              child: Scaffold(
                backgroundColor: Colors.white,
                body: Column(
                  children: <Widget>[
                    SizedBox(height: 142),
                    Text(
                      '名前を教えて！',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Color(0xFF102B7C),
                          fontWeight: FontWeight.bold,
                          fontSize: 22
                      ),
                    ),
                    SizedBox(height: 57),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 34),
                      child: LargeTextField(
                        hintText: 'あなたの名前',
                        onChanged: (text) {
                          context.read<InputUserNameScreenController>()
                              .onChangeName(text);
                        },
                      ),
                    )
                  ],
                ),
              ),
              footer: Container(
                color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.only(left: 92, bottom: 26, right: 92),
                  child: Button(
                    title: '次へ',
                    onPressed: () {
                      context.read<InputUserNameScreenController>().onTapNext(
                          onComplete: (draft) {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                  builder: (context) => InputAddressIDScreen(draft: draft)
                              ),
                            );
                          },
                          onError: (error) {
                            showDialog(
                              context: context,
                              builder: (_) {
                                return NormalDialog(
                                  title: '名前の入力',
                                  message: error,
                                  onOkPressed: () {
                                    Navigator.pop(context);
                                  },
                                );
                              },
                            );
                          },
                      );
                    },
                  ),
                ),
              ),
            ),
          );
        },
    );
  }
}