The major seen usage of the switch is in switching between dark and light theme of app. It depends upon UI what kind of switch is required. In Flutter, with flutter_switch we can create from simple to customized switch with custom height, width, colors, text, etc. Let us see its usage and implementation in this article.
Install-Package:
To add it to the project, run the following command in the terminal of IDE:
flutter pub add flutter_switch
Or add it manually under the dependencies section, and then configure it through pub get.
Dart
flutter_switch: ^0.3.2 |
Import the dependency:
In main.dart file, import the flutter_switch dependency.
Dart
import 'package:flutter_switch/flutter_switch.dart';
|
Implementation:
To create a switch we need to use FlutterSwitch() widget that includes properties like:
- toggleSize
- showOnOff
- onToggle
- activeColor
- inactiveColor
- inactiveIcon, etc
Let us create different types of switches using the FlutterSwitch() widget.
Simple Switch:
Dart
FlutterSwitch( activeColor: Colors.green,
width: 125.0,
height: 55.0,
valueFontSize: 25.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 8.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
|
Output:
Switch with Borders:
Dart
FlutterSwitch( width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
toggleColor: Colors.black12,
switchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
toggleBorder: Border.all(
color: Colors.white,
width: 5.0,
),
activeColor: Colors.green,
inactiveColor: Colors.black38,
onToggle: (val) {
setState(() {
status = val;
});
},
),
|
Output:
Switch with Custom Text:
Dart
FlutterSwitch( activeText: "I am Active",
inactiveText: "I am Inactive",
value: status,
valueFontSize: 16.0,
width: 140,
height: 80,
borderRadius: 30.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
|
Output:
Switch with Icon:
Dart
FlutterSwitch( width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
activeToggleColor: Colors.purple,
inactiveToggleColor: Colors.black,
activeSwitchBorder: Border.all(
color: Colors.orange,
width: 6.0,
),
inactiveSwitchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
activeColor: Colors.deepPurpleAccent,
inactiveColor: Colors.white,
activeIcon: Icon(
Icons.nightlight_round,
color: Colors.white,
),
inactiveIcon: Icon(
Icons.wb_sunny,
color: Color(0xFFFFDF5D),
),
onToggle: (val) {
setState(() {
status = val;
});
},
),
|
Output:
Full Source Code:
Dart
import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
Color _textColor = Colors.green;
Color _appBarColor = Colors.green;
bool status = false;
bool isSwitchOn = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GeeksForGeeks"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 30,
),
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
toggleColor: Colors.black12,
switchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
toggleBorder: Border.all(
color: Colors.white,
width: 5.0,
),
activeColor: Colors.green,
inactiveColor: Colors.black38,
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 20.0),
FlutterSwitch(
width: 125.0,
height: 55.0,
valueFontSize: 25.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 8.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 20.0),
FlutterSwitch(
activeText: "I am Active",
inactiveText: "I am Inactive",
value: status,
valueFontSize: 16.0,
width: 140,
height: 80,
borderRadius: 30.0,
showOnOff: true,
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 10.0),
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
activeToggleColor: Colors.purple,
inactiveToggleColor: Colors.black,
activeSwitchBorder: Border.all(
color: Colors.orange,
width: 6.0,
),
inactiveSwitchBorder: Border.all(
color: Colors.black,
width: 6.0,
),
activeColor: Colors.deepPurpleAccent,
inactiveColor: Colors.white,
activeIcon: Icon(
Icons.nightlight_round,
color: Colors.white,
),
inactiveIcon: Icon(
Icons.wb_sunny,
color: Color(0xFFFFDF5D),
),
onToggle: (val) {
setState(() {
status = val;
});
},
),
SizedBox(height: 20.0),
FlutterSwitch(
width: 100.0,
height: 55.0,
toggleSize: 45.0,
value: status,
borderRadius: 30.0,
padding: 2.0,
activeToggleColor: Colors.purple,
inactiveToggleColor: Colors.white,
activeSwitchBorder: Border.all(
color: Colors.green,
width: 6.0,
),
inactiveSwitchBorder: Border.all(
color: Colors.deepPurple,
width: 6.0,
),
activeColor: Colors.greenAccent,
inactiveColor: Colors.blueAccent,
activeIcon: Image.network(
inactiveIcon: Image.network(
"https://img2.pngio.com/functional-bits-in-flutter-flutter-community-medium-flutter-png-1000_1000.png"),
onToggle: (val) {
setState(() {
status = val;
});
},
),
],
),
),
),
);
}
} |
Output: