Flutter: Inconsistent column padding on Buttons between Android and Windows

Question

I have created a simple material app in flutter with:

flutter create --platforms=android,windows columntest

When I run the program on Android and Windows, I get some kind of padding between the ElevatedButtons on Android, but not on Windows. Do you know where this comes from and how I can make the design consistent?

The behavior seems to occur only with buttons (TextButton, OutlinedButton, ElevatedButton). I have also tested this with container (with border), there it does not occur.

Here the code from the small app:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(child: const Text("Foobar1"), onPressed: () {}),
              ElevatedButton(child: const Text("Foobar2"), onPressed: () {}),
            ],
          ),
        ),
      ),
    );
  }
}

Here is a screenshot at runtime:

Here my flutter version:

$ flutter --version
Flutter 3.10.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84a1e904f4 (3 weeks ago) • 2023-05-09 07:41:44 -0700
Engine • revision d44b5a94c9
Tools • Dart 3.0.0 • DevTools 2.23.1

My Android Emulator is an: Pixel_3a_API_33_x86_64 But the behaviour also occurs on my physical Pixel 6 (with android UpsideDownCake)

I look forward to your responses.

best regards Michael

score 1 · Accepted Answer · answered Jun 01 '23 at 18:12

So, this implementation is done by flutter.

This is behaviour is because of the ThemeData.materialTapTargetSize parameter for the MaterialApp. This feature decides what should be touchable dimensions of Material Button, in your case ElevatedButton.

You have 2 potential solutions

Change padding from ElevatedButton like below

    ElevatedButton(
              onPressed: () {},
              style: const ButtonStyle(padding: MaterialStatePropertyAll(EdgeInsets.zero)),
              child: const Icon(Icons.abc),
            ),

Change value from material app

    MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
      home: CupertinoPickerExample(),
    )

Reference : https://stackoverflow.com/a/67580951

Hey, thanks. Number 2 is the correct solution I was looking for. — capgeti, Jun 01 '23 at 18:28

Flutter: Inconsistent column padding on Buttons between Android and Windows

1 Answers1