CODEWITHSUNDEEP
flutter
user2570135
user2570135

Reputation: 2989

Flutter: increase the size of the SwitchListTile icon

I am using SwitchListTile in my app and it works good. However, I need to style it.. I would like to make the switch icon bigger..

How do this?

enter image description here

SwitchListTile(
  dense: true,
  onChanged: (value) {
    setState(() {
       agreeSmsAlerts = value;
    });
 },
 value: agreeSmsAlerts,
 title: Text(
   "sign up for job alerts",
    style: TextStyle(fontSize: 16.0),
 ),
),

Upvotes: 1

Views: 2883

Answers (2)

Delmontee
Delmontee

Reputation: 2364

Very late to the party, but just adding to @Darshan 's solution above (which works but would result in the user not being able to click on the text in order to change the switch), you can just wrap the text portion of the switch widget in a Transform widget:

SwitchListTile(
  dense: true,
  onChanged: (value) {
    setState(() {
       agreeSmsAlerts = value;
    });
 },
 value: agreeSmsAlerts,
 title: Transform.scale(
           scale: 1.8,
           child: Text(
             "sign up for job alerts",
             style: TextStyle(fontSize: 16.0),
           ),
        ),
 ),

),

Upvotes: 0

Darshan
Darshan

Reputation: 11634

If you only want to increase the size of the switch icon, you can wrap SwitchListTile with Transform.scale, but the scale would be applied to entire widget, ie, to the text as well, that messes up the size of entire SwitchListTile widget, as shown below:

enter image description here

To avoid this, you can use Switch widget instead of SwitchListTile and wrap it in Row widget and provide mainAxisAlignment to MainAxisAlignment.spaceBetween, to properly align the text and increased icon size. Here's how:

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children:
                <Widget>[
                  Text('Sign up for job alerts'),
                  Transform.scale(
                    scale: 1.8,
                    child: Switch(
                      onChanged: (value) {
                        setState(() {
                          agreeSmsAlerts = value;
                        });
                      },
                      value: agreeSmsAlerts,
                    ),
                  ),

                ],
              ),

And the output is:

enter image description here

You can provide the scale value per your requirement, depending on how big you want it. Hope this answers your question.

Upvotes: 1

Related Questions