CODEWITHSUNDEEP
imageflutterkeyboardwidgethide
Nehry Dedoro
Nehry Dedoro

Reputation: 41

How can i hide image widget when keyboard pops in flutter?

Hello guys i need your help , I just want to hide the image widget when the keyboard pops, but when i click the textfield and open a keyboard it keeps closing, can you help me with this i attach my code thank you !

import 'package:flutter/material.dart';
import 'package:ovsursadmin/screens/authentication/login_card.dart';

class Login extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.blue[900],
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: ExactAssetImage('assets/bg-admin.png'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(Colors.blue[900].withOpacity(0.1), BlendMode.dstATop),
          )
        ),
        child: SafeArea(
          child: Container(
            child : Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 10.0,),
// this code i want to fix it keeps closing the keyboard when pops
                MediaQuery.of(context).viewInsets.bottom != 0 ? Container() : Image.asset('assets/urs.png',
                height: 100,
                width: 100,),
                SizedBox(height: 25.0,),
                Text('Admin Login', style: TextStyle(color: Colors.white),),
                Text('Online Voting System', style: TextStyle(color: Colors.white),),
                LoginCard(),
              ],
            )
          ),
        ),
      ),
    );
  }

}

This is my problem it keeps closing when you click the text field and open the keyboard

Upvotes: 3

Views: 1649

Answers (1)

Jitesh Mohite
Jitesh Mohite

Reputation: 34250

Using

Add Dependency:

dependencies: keyboard_visibility: ^0.5.6

Code:

   bool _isKeyboardOpen = false;
    @protected
    void initState() {
      super.initState();

      KeyboardVisibilityNotification().addNewListener(
        onChange: (bool visible) {
        setState(() {
          _isKeyboardOpen = visible;
          });

        },
      );
    }

Use code in build widget Like:

Option1:

_isKeyboardOpen ? Container() : Image.asset('assets/urs.png',
                height: 100,
                width: 100,)

Option2:

  if(!_isKeyboardOpen)
      Image.asset('assets/urs.png', height: 100, width: 100,)

Upvotes: 3

Related Questions