A brief talk on shutter button

As a common component that can no longer be used ,material In the library button The components are a little strange —— There are internal and external margins that cannot be set , Let's make a simple presentation , Select several common button, Unified use Text do child, Plus a red one Container Components , Observe margin and padding.

You'll find that , except InkWell, Even if padding Set to 0, Still can not eliminate up and down padding, It's not padding Property is not valid , Instead, these buttons are constrained by the default size . This can be done through the source code and without setting child Of UI To prove .

MaterialButton Set its height property , Look at the use of source code , Is to modify the height constraint , But it cannot be modified to a certain extent , Because there are further restrictions in other places , This is what I find strange . This will cause inconvenience to the user , So one of my basic principles in designing basic components is not to interfere with the use of the outside world , For example, I made one Card Components , I will not give it a default margin.

MaterialButton(
  onPressed: () {

  },
  // child: Text("MaterialButton"),
  padding: EdgeInsets.all(0),
  height: 10,
)

The solution

In fact, it is the only normal component mentioned above ,Inkwell, In fact, all the above button Are further encapsulation of it , It contains click effects （ Water ripple ）, And gesture recognition , And its essence is also in GestureDetector An animation layer is added on the basis of , So if you don't need animation , You can use it directly GestureDetector. A little more advanced is to create your own... Based on these two Button.

InkWell Of build Part of the source code （ink_well.dart）

  Code tested

Column(children: [
        SizedBox(width: double.infinity,),

        addSpacer(),

        InkWell(child: Text("InkWell"), onTap: () {

        },).addRedBackground(),

        addSpacer(),

        TextButton(
          onPressed: () {}, 
          child: Text("TextButton"),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero)
          ),
        ).addRedBackground(),

        addSpacer(),

        MaterialButton(
          onPressed: () {

          },
          child: Text("MaterialButton"),
          padding: EdgeInsets.all(0),
        ).addRedBackground(),
        
        addSpacer(),
        
        OutlinedButton(
            onPressed: () {},
            child: Text("OutlinedButton"),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero),
          ),
        ).addRedBackground(),
      ],
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
      ),


// empty button
Column(children: [
        SizedBox(width: double.infinity,),

        addSpacer(),

        InkWell(child: Text(""), onTap: () {

        },).addRedBackground(),

        addSpacer(),

        TextButton(
          onPressed: () {}, 
          child: Text(""),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero)
          ),
        ).addRedBackground(),

        addSpacer(),

        MaterialButton(
          onPressed: () {

          },
          // child: Text("MaterialButton"),
          padding: EdgeInsets.all(0),
        ).addRedBackground(),
        
        addSpacer(),
        
        OutlinedButton(
            onPressed: () {},
            child: Text(""),
          style: ButtonStyle(
            padding: MaterialStateProperty.all(EdgeInsets.zero),
          ),
        ).addRedBackground(),
      ],
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
      )