Question 75490 in Flutter Question posted in
The official Flutter documentation can be found here.

I am not understanding why there is padding in this sign in button – Flutter

I am getting this white border in my button and how do I remove it.

My Text button

TextButton(
                onPressed: () {},
                child: Container(
                  color: Colors.green,
                  height: 51,
                  width: 113,
                  child: const Center(
                    child: Text('Sign Up!'),
                  ),
                ))

My Theme class

  static var darkModeAppTheme = ThemeData.dark().copyWith(
      scaffoldBackgroundColor: backgroundColor,
      cardColor: greyColor,
      textButtonTheme: const TextButtonThemeData(
          style: ButtonStyle(
              backgroundColor: MaterialStatePropertyAll(whiteColor),
              foregroundColor: MaterialStatePropertyAll(blackColor))),
      inputDecorationTheme: const InputDecorationTheme(
        fillColor: Colors.green,
        filled: true,
      ));

enter image description here

How to remove that white padding

Tags:

2

Answers


  1. 0

    To remove this padding u can do it in ButtonStyle()

     style: ButtonStyle(
              padding: MaterialStatePropertyAll(EdgeInsets.zero),// to remove that padding
                backgroundColor: MaterialStatePropertyAll(Colors.green),
                foregroundColor: MaterialStatePropertyAll(Colors.black)),

    you can achieve this 2 ways.

    1. by removing the padding.

             TextButton(
       style: ButtonStyle(
         padding: MaterialStatePropertyAll(EdgeInsets.zero),// to remove padding
           backgroundColor: MaterialStatePropertyAll(Colors.red),
           foregroundColor: MaterialStatePropertyAll(Colors.black)),
       onPressed: () {},
       child: Container(
         decoration: BoxDecoration(
           color: Colors.green,
           borderRadius: BorderRadius.circular(5)
         ),

         height: 51,
         width: 113,
         child: Center(child: Text('Sign Up!')),
       ),),

    2. By swapping the container

               Container(
         width: 113,
          height: 51,
     child: TextButton(
         style: ButtonStyle(

             backgroundColor: MaterialStatePropertyAll(Colors.green),
             foregroundColor: MaterialStatePropertyAll(Colors.black)),
         onPressed: () {},
         child: Center(child: Text('Sign Up!')),),
   ),
    Login or Signup to reply.
  2. 0

    There is two possible way to fixes

    1. You can remove backgroundColor from ButtonStyle

    2. Add style to your Text Button

      TextButton(
     onPressed: () {},
     style: TextButton.styleFrom(
       padding: EdgeInsets.zero,
     ),
     child: Container(
       color: Colors.green,
       height: 51,
       width: 113,
       child: const Center(
         child: Text('Sign Up!'),
       ),
     ),
 ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search