Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Prevent Widget Shrink or Resize on Keyword Popup in Flutter

You may experience shrinking or resizing of your app widgets while the keyboard is active in your app, in this example we are going to show how to prevent such widget shrink or resize on keyboard popup, see the example below:

How to Prevent Wiget Shrink or Resize on Keyboard Popup:

Simply add "resizeToAvoiceBottomInset" to "false" to prevent widget resizing on the keyboard popup.

Scaffold(
  resizeToAvoidBottomInset: false
)

When you don't keep this property to false, you may experience like below:

When Keyboard is not active Shrinked Widgets on Keyboard popup

Full Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
       home: Home()
  ));
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         resizeToAvoidBottomInset: false,
         appBar: AppBar(
            title: Text("Prevent Resize of Widget"),
            backgroundColor: Colors.deepPurpleAccent,
         ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
               children: [

                   TextField(),
                   
                   Expanded( 
                     child:Container(
                        color: Colors.red.withOpacity(0.4),
                        child: Center(
                          child: Text("Box One"),
                        ),
                    ),
                   ),

                   Expanded( 
                     child:Container(
                      color: Colors.deepPurpleAccent.withOpacity(0.4),
                      child: Center(
                         child: Text("Box One"),
                      ),
                     )
                   )
               ],
             ),
          )
      );
  }
}

In this way, you can prevent shrinking or resizing of widgets while the keyboard is active on the Flutter app.

No any Comments on this Article


Please Wait...