How to Align Switch to Left on SwitchListTile in Flutter

In this post, we are going to show you how to align the switch to the left on SwitchLeftTile in Flutter. By default, switch aligned to right, you have to pass small tweak to align it to the left side of the label. See the example below:

SwitchListTile(
  controlAffinity: ListTileControlAffinity.leading,
)

You have to pass controlAffinity: ListTileControlAffinity.leading to align switch to left on SwitchListTile in Flutter:

For Example:

SwitchListTile( //switch at left side of label
  value: false, 
  controlAffinity: ListTileControlAffinity.leading,
  onChanged: (bool value){

  },
  title: Text("Disable Daily Alarm")
)

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
   bool s1 = false;
   //true for enabled switch.
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("SwitchListTile in Flutter"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [  
                
                  SwitchListTile( //switch at left side of label
                    value: s1, 
                    controlAffinity: ListTileControlAffinity.leading,
                    onChanged: (bool value){
                            setState(() {
                              s1 = value; //update value when sitch changed
                            });
                    },
                    title: Text("Disable Daily Alarm")
                  ),

            ],)
          )
       );
  }
}

In this way, you can align the switch to the left side on SwitchListTile in Flutter.

No any Comments on this Article


Please Wait...