Flutter 2: Remove additional margin from ElevatedButton / TextButton

Question

I would like to know how to remove the margin around the ElevatedButton and TextButton.

Here in detail how it looks:

Column(
  children: [
    ElevatedButton(
        onPressed: () {
        },
        child: Text('Login')
    ),

    TextButton(
        onPressed: () {
        },
        child: Text('Login')
    ),
  ],
)

How would you do ?

Answer 1

Here is the solution :

ElevatedButton(
    onPressed: () {
    },
    style: ElevatedButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.shrinkWrap
    ),
    child: Text('Login')
),

TextButton(
    onPressed: () {
    },
    style: TextButton.styleFrom(
      padding: EdgeInsets.zero,
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      minimumSize: Size(0, 0)
    ),
    child: Text('Login')
),

tapTargetSize: MaterialTapTargetSize.shrinkWrap

MaterialTapTargetSize: Configures the tap target and layout size of certain Material widgets. Changing the value in ThemeData.materialTapTargetSize will affect the accessibility experience.

shrinkWrap: Shrinks the tap target size to the minimum provided by the Material specification.

See more on the official flutter documentation

Hope this helps! If you have a better solution tell me!