CODEWITHSUNDEEP
fluttermaterial-design
Peter Wilson
Peter Wilson

Reputation: 4319

Flutter | remove extra space from Switch widget

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.

enter image description here enter image description here

How can I get rid of the extra space

Note: same issue also using Radio button or Checkbox

Upvotes: 17

Views: 7616

Answers (6)

Ronik Limbani
Ronik Limbani

Reputation: 917

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) { },
                                     ) 
                                      ),
               ),

switch look like

Upvotes: 1

vishnu reji
vishnu reji

Reputation: 398

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/

Upvotes: 10

kartik
kartik

Reputation: 191

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,
                ),
              ),

Upvotes: 0

AmirMasoud Fallahi
AmirMasoud Fallahi

Reputation: 75

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

Upvotes: 1

Mark Pitt
Mark Pitt

Reputation: 51

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

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

Upvotes: 5

Yogesh Chawla
Yogesh Chawla

Reputation: 723

enter image description here

You could try to wrap your Switch widget in Container

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

Upvotes: 7

Related Questions