Flutter | remove extra space from Switch widget

Question

I'm working on the below screen in a flutter app, but when I use Switch widget it breaks the alignment, because there is hardcoded height and width already defined in flutter.

How can I get rid of the extra space

Note: same issue also using Radio button or Checkbox

Despot

paste code to understand issue better. Please tell your required screen in a image. – Whiteside

Of course you can do it by changing theme but It against Material Design guideline(current size is finger touch size). material.io/design/guidelines-overview/#addition – Infertile

@RahulKhatri it's a common issue whenever Switch widget used. – Despot

How did you display the borderlines of those widgets in you second image? – Phenosafranine

@Phenosafranine when you run the project using vscode it's open a browser tab where you can inspect the widgets and check their borders – Despot

Answer 1

SizedBox(
  width: 50,
  height: 20,
  child: Switch(
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
  value: value,
  onChanged: (bool newvalue) {
    onChangeMethod(newvalue);
  },
  activeTrackColor: Colors.grey,
  activeColor: Colors.black,
  ),
);

You can refer https://flutterwebbies.com/flutter/how-to-remove-extra-space-from-switch-widget/

Ephemerality

This one was the most complete answer, the combination of SizedBox() and MaterialTapTargetSize.shrinkWrap allowed me to resize the Switch widget – Spoken

Answer 2

You could try to wrap your Switch widget in Container

Container(
  height: 20,
  width: 50,
  child: Switch(
   value: _value,
   onChanged: (value){
    setState((){
      _value = value
    });
   }
  )
);

Minute

Unfortunately still the same issue – Despot

@Yogesh Chawla worked for me. – Ananna

Answer 3

To remove the padding from the Switch widget you need to set the materialTapTargetSize to shrinkWrap.

Switch(
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
  onChanged: (bool value) {},
)

Tramontane

This is much cleaner than hard coding a random height – Ablative

MaterialTapTargetSize.shrinkWrap "Shrinks the tap target size to the minimum provided by the Material specification." It does NOT remove all the padding. – Cool

Answer 4

You should wrap the Switch with SizedBox and set your width and height.

Melli

Answer 5

We Can use Container With Transform.scale widget and set max Constraints according to requirements

Container(
                constraints: const BoxConstraints(maxHeight: 6.0),
                child: Transform.scale(
                       scale: 0.6,
                       child: Switch(
                                materialTapTargetSize:MaterialTapTargetSize.shrinkWrap,
                                activeColor: Colors.red,
                                onChanged: (bool value) { },
                                     ) 
                                      ),
               ),

Dike

Answer 6

We can use Container with constraints to set maxHeight

      Container(
                constraints: const BoxConstraints(maxHeight: 5.0),
                child: Switch(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  value: true,
                  activeColor: kAccentColor,
                  onChanged: (p0) => p0,
                ),
              ),

Surreptitious