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.
Please Wait...
No any Comments on this Article