Skip to content
Related Articles

Related Articles

Switches in Flutter

Improve Article
Save Article
  • Last Updated : 31 Jan, 2022
Improve Article
Save Article

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(
                    "https://upload.wikimedia.org/wikipedia/commons/7/7e/Dart-logo.png"),
                inactiveIcon: Image.network(
                onToggle: (val) {
                  setState(() {
                    status = val;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!