ElevatedButton padding on all sides won't modify

user_11556193 0
Viewed 6453

I have a ElevatedButton with the following attributes: I attached a photo here: https://i.stack.imgur.com/oH3pO.png

ElevatedButton(
               clipBehavior: Clip.none,
               style: ElevatedButton.styleFrom(
               padding: EdgeInsets.zero,
               minimumSize: Size(0, 0),
               elevation: 0,
               ),

I modified the padding around and it still has a minimum padding (_InputPadding) of 48px by 48px. How can I solve this?

flutter
4 Answers

These paddings are because of tapTargetSize property. To remove them add tapTargetSize: MaterialTapTargetSize.shrinkWrap, to the button style.

For example:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    fixedSize: size,
    padding: const EdgeInsets.zero,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),

Additional info from the source code.

  /// MaterialTapTargetSize
  ///
  /// Expands the minimum tap target size to 48px by 48px.
  ///
  /// This is the default value of [ThemeData.materialTapTargetSize] and the
  /// recommended size to conform to Android accessibility scanner
  /// recommendations.
  padded,

  /// Shrinks the tap target size to the minimum provided by the Material
  /// specification.
  shrinkWrap,
user_71980060

This is how you can set 45 padding for your elevated button.

ElevatedButton(
      onPressed: () {},
      child: Text('hi'),
      style: ButtonStyle(
        padding: MaterialStateProperty.resolveWith<EdgeInsetsGeometry>(
          (Set<MaterialState> states) {
            return EdgeInsets.all(45);
          },
        ),
      ),
    );
user_52509730

it is not different in flutter 2 do it like this ,

      ElevatedButton(
       clipBehavior: Clip.none,
       style: ElevatedButton.styleFrom(
       padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.zero),
       minimumSize: Size(0, 0),
       elevation: 0,
               ),
user_148180330

Better way to do this is by creating a new ThemeData and inside that style your Button. By this all the ElavatedButton will be handled and you dont need to write same code everywhere

ThemeData lightTheme(BuildContext context) {
  return ThemeData.light().copyWith(
   
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.resolveWith<OutlinedBorder>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return ContinuousRectangleBorder(
                  borderRadius: BorderRadius.circular(10));
            }
            return ContinuousRectangleBorder(
                borderRadius: BorderRadius.circular(10));
          },
        ),
        padding: MaterialStateProperty.resolveWith<EdgeInsetsGeometry>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return EdgeInsets.zero;
            }
            return EdgeInsets.zero;
          },
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return greyColor;
            }
            return selectedPrimaryColor; // Defer to the widget's default.
          },
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.black;
            }
            return selectedPrimaryColor; // Defer to the widget's default.
          },
        ),
    ),
  );
}
user_121363190
Related