Flutter Google Maps resized when keyboard popup

Question

I was using a Stack widget for me to overlay the google_maps_flutter and the TextField. However when I focus on TextField and when the keyboard input popups, the Google Maps seems to resize into small.

I tried to wrap with SingleChildScrollView widget to ignore the resize but it gives me error when implementing it.

class _DashboardState extends State<Dashboard> {
  // Google maps
  Completer<GoogleMapController> _controller = Completer();
  // remove this and use gps system instead
  CameraPosition _initialPosition =
      CameraPosition(target: LatLng(26.8206, 30.8025));
  final String tagLineFamily = 'Gafata';
  final Color _baseColor = Color.fromRGBO(101, 200, 208, 1.0);
  final Color _darkBlue = Color.fromRGBO(44, 88, 113, 1.0);

  // search text controller
  var _searchText = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          _ayudaMap(),
          _appBar(),
        ],
      ),
    );
  }

  Widget _appBar() {
    return SingleChildScrollView(
      physics: const NeverScrollableScrollPhysics(),
      child: Container(
        height: 120,
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              _baseColor,
              Colors.transparent,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
          boxShadow: [BoxShadow(color: Colors.transparent)],
        ),
        child: Center(
          child: _searchTextField(),
        ),
      ),
    );
  }

  Widget _searchTextField() {
    return Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      alignment: Alignment.center,
      height: 40,
      width: MediaQuery.of(context).size.width / 1.5,
      decoration: BoxDecoration(
        color: _baseColor.withOpacity(0.5),
        borderRadius: BorderRadius.all(
          Radius.circular(20),
        ),
        border: Border.all(
          width: 2.0,
          color: _darkBlue,
        ),
      ),
      child: TextField(
        cursorColor: _darkBlue,
        style: TextStyle(
          fontFamily: tagLineFamily,
          fontSize: 14,
          color: _darkBlue,
          fontWeight: FontWeight.w600,
        ),
        controller: _searchText,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'Need Assistance? Find here!',
          hintStyle: TextStyle(
            color: _darkBlue,
          ),
          icon: Icon(
            Icons.search,
            color: _darkBlue,
          ),
        ),
      ),
    );
  }

  Widget _ayudaMap() {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: _initialPosition,
    );
  }

  // Google Maps controller
  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }
}

What I want to achieve is to ignore the resize when the keyboard input popups up.

Avaunt

Answer 1

Try editing your scaffold to include this parameter

resizeToAvoidBottomInset : false,

Scheming

Use resizeToAvoidBottomInset : false, resizeToAvoidBottomPadding is deprecated. – Tracheostomy

Answer 2

resizeToAvoidBottomPadding is deprecated use

 resizeToAvoidBottomInset: false

Peursem