How to remove the space under the elevated button at the bottom of the screen?

Question

 import 'package:flutter/material.dart';

class AddPlaceScreen extends StatefulWidget {
  static const routeName = '/add-place';
  @override
  _AddPlaceScreenState createState() => _AddPlaceScreenState();
}

class _AddPlaceScreenState extends State<AddPlaceScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add new Place data'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('User Inputs'),
          ElevatedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),
        ],
      ),
    );
  }
}

Here I am getting a space under the elevated button located at the bottom of the page please provide any solution to remove it.

Answer 1

Please refer below code

Add this piece of code inside ElevatedButton.icon Widget

style: ButtonStyle( tapTargetSize: MaterialTapTargetSize .shrinkWrap, /* Please add this to avoid padding */ ),

class AddPlaceScreen extends StatefulWidget {
  static const routeName = '/add-place';
  @override
  _AddPlaceScreenState createState() => _AddPlaceScreenState();
}

class _AddPlaceScreenState extends State<AddPlaceScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add new Place data'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('User Inputs'),
          ElevatedButton.icon(
            style: ButtonStyle(
              tapTargetSize: MaterialTapTargetSize
                  .shrinkWrap, /* Please add this to avoid padding */
            ),
            onPressed: () {},
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),
        ],
      ),
    );
  }
}

Answer 2

Try below code hope its help to you. you can used BottomSheet also here

Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text('User Inputs'),
      ],
    ),
  ),
  bottomSheet: Container(
    width: double.infinity,
    child: ElevatedButton.icon(
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0),
             
          ),
        ),
      ),
      onPressed: () {
        // Add your button press function here
        print('Button Pressed');
      },
      icon: Icon(
        Icons.add,
      ),
      label: Text(
        'Add Place',
      ),
    ),
  ),
);

Your result screen->

Answer 3

To achieve this, remove the drop shadow and extra margin around the ElevatedButton.

For this set the elevation to 0, which removes the drop shadow.

To get rid of that extra margin around the button, use the material tab target size and set it to MaterialTapTargetSize.shrinkWrap. The MaterialTapTargetSize basically ensures that you have a bigger space you can hit with your finger and if we shrink that by setting it to .shrinkWrap, you get rid of the extra margin.

Add this code inside the ElevatedButton:

tapTargetSize: MaterialTapTargetSize.shrinkWrap,
elevation: 0,

So by setting this here, the button now really sits on the end of the screen.