Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter increase height and width of Switch?

I creating game with single and two players. for selection i want slide look so i have tried with switch method but its look very small. how to increase height and width of switch? is there any way creating look like this is welcome?

    new Center(
      child:
      new Padding(padding:EdgeInsets.all(50.00),
          child:
        new Column(
        mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Switch(value: _value, onChanged: (bool value1)

            {
              _value=value1;

            },
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              activeThumbImage: new AssetImage("assets/Images/1.png"),
              inactiveThumbImage: new AssetImage("assets/Images/1.png"),

            )
          ],
        )           ,
     ),
    )

enter image description here

like image 614
Kathir vtv Avatar asked Sep 29 '18 13:09

Kathir vtv


People also ask

How to get screen height and width in Flutter App?

For Detail about Screen Height and Width read this: How to get Device Screen Height and Width in Flutter App Add measured_size package on your project by adding the following lines on pubspec.yaml file. To Get Screen Height and Width on the build, and listen resize: MeasuredSize returns child widget size on resizing.

How to set minimum height or width of container() widget in flutter?

Are you trying to set minimum height or width of Container () widget in a Flutter, then use ’constraints’ attribute and apply BoxConstraints () on it like below. In this example, we are going to show you the way to get screen height and width and apply the sizing of child widgets according to the percentage of Screen height and width.

How to increase the height and width of a switch?

You should put your switch inside a container and give it both a height and a width as per your requirement. Show activity on this post. The accepted answer using a scale will increase both height and width, if you want to control both height and width

Does flutter support responsive design?

As we make every app as responsive, Flutter also supports responsive design with device screen’s or parent’s width and height. You can set the width and height of your widget depends to screen size.


2 Answers

You could wrap your Switch inside a Transform widget and change the scale.

        Transform.scale(scale: 2.0,
                 child: Switch(
                          value: true,
                          onChanged: (bool value1){},
                        ),
                 )

Scale = 1 is the default size , 0.5 half size , 2.0 double size, you can play with the values :)

UPDATE

Now you can also do it using SizedBox + FittedBox

SizedBox(
        width: 150,
        height: 40,
        child: FittedBox(
          fit: BoxFit.fill,
          child: Switch(
            value: true,
            onChanged: (bool value1) {},
          ),
        ),
      ),

Don't forget the BoxFit.fill value :)

like image 164
diegoveloper Avatar answered Oct 02 '22 03:10

diegoveloper


You can wrapper your Switch widget inside a SizedBox and set width and height to it.

SizedBox(
  width: 80,
  height: 40,
  child: Switch(
    value: isChecked,
    onChanged: (value) {
      //Do you things
    }
  )
)
like image 38
Dongsheng Sun Noah Avatar answered Oct 02 '22 02:10

Dongsheng Sun Noah