Flutter UI #6: Fun with Toggle Switch in Flutter


Tutorial and code of toggle switch in flutter. Copy and paste the below code as per your requirements.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_advanced_switch: ^2.1.0
  flutter_icons: ^1.1.0

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
import 'package:flutter_icons/flutter_icons.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  final _controller01 = AdvancedSwitchController();
  final _controller02 = AdvancedSwitchController();
  final _controller03 = AdvancedSwitchController();
  final _controller04 = AdvancedSwitchController();
  final _controller05 = AdvancedSwitchController();
  final _controller06 = AdvancedSwitchController();
  final _controller07 = AdvancedSwitchController();
  final _controller08 = AdvancedSwitchController();
  final _controller09 = AdvancedSwitchController();
  final _controller10 = AdvancedSwitchController();
  final _controller11 = AdvancedSwitchController();
  final _controller12 = AdvancedSwitchController();
  final _controller13 = AdvancedSwitchController();
  final _controller14 = AdvancedSwitchController();
  final _controller15 = AdvancedSwitchController();
  bool _enabled = false;
  bool isSwitched1 = false;
  bool isSwitched2 = false;
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(child: Text('Toggle Switch Demo'),)
        ),
        body: new Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(padding: EdgeInsets.fromLTRB(30, 10, 30, 0),
                  child: Transform.scale(scale: 2.0,
                    child:
                    Switch(
                      value: isSwitched1,
                      onChanged: (value) {
                        setState(() {
                          isSwitched1 = value;
                          print(isSwitched1);
                        });
                      },
                      activeTrackColor: Colors.deepPurple,
                      activeColor: Colors.purpleAccent,
                    ),
                  ),
                ),
                Padding(padding: EdgeInsets.fromLTRB(30, 10, 30, 0),
                  child: Transform.scale(scale: 2.0,
                    child:
                    Switch(
                      value: isSwitched2,
                      onChanged: (value) {
                        setState(() {
                          isSwitched2 = value;
                          print(isSwitched2);
                        });
                      },
                      activeTrackColor: Colors.deepPurple,
                      activeColor: Colors.purpleAccent,
                    ),
                  ),
                ),
              ],
            ),
            Container(
              width: double.infinity,
              child: SingleChildScrollView(
                padding: EdgeInsets.symmetric(
                  vertical: 40,
                ),
                physics: ClampingScrollPhysics(),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    _buildLabel('Default Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        AdvancedSwitch(
                          controller: _controller01,
                        ),
                        SizedBox(width: 25),
                        AdvancedSwitch(
                          controller: _controller01,
                          thumb: ValueListenableBuilder(
                            valueListenable: _controller01,
                            builder: (_, value, __) {
                              return Icon(value
                                  ? Icons.cloud_upload
                                  : Icons.cloud_download);
                            },
                          ),
                        ),
                      ],
                    ),
                    _buildLabel('Disabled Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        AdvancedSwitch(
                          enabled: _enabled,
                          controller: AdvancedSwitchController(false),
                        ),
                        SizedBox(width: 25),
                        AdvancedSwitch(
                          enabled: _enabled,
                          controller: AdvancedSwitchController(true),
                        ),
                        SizedBox(width: 25),
                        ElevatedButton(
                          onPressed: () => setState(() => _enabled = !_enabled),
                          child: Text('Enable/Disable'),
                        )
                      ],
                    ),
                    _buildLabel('Color/Icon/Image Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        AdvancedSwitch(
                          activeColor: Colors.yellow,
                          inactiveColor: Colors.indigo,
                          activeChild: Text('Yellow'),
                          inactiveChild: Text('Indigo'),
                          width: 80,
                          controller: _controller03,
                        ),
                        AdvancedSwitch(
                          activeChild: Icon(
                            MaterialCommunityIcons.weather_sunny,
                            color: Colors.blue,
                          ),
                          inactiveChild: Icon(MaterialCommunityIcons.weather_night),
                          activeColor: Colors.yellowAccent,
                          inactiveColor: Colors.deepPurple,
                          width: 60,
                          controller: _controller15,
                        ),
                      ],
                    ),
                    _buildLabel('ON/OFF Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        AdvancedSwitch(
                          activeChild: Text('1'),
                          inactiveChild: Text('0'),
                          width: 70,
                          controller: _controller02,
                        ),
                        AdvancedSwitch(
                          activeChild: Text('ON'),
                          inactiveChild: Text('OFF'),
                          borderRadius: BorderRadius.circular(5),
                          width: 76,
                          controller: _controller04,
                        ),
                        AdvancedSwitch(
                          activeChild: Text('true'),
                          inactiveChild: Text('false'),
                          borderRadius: BorderRadius.zero,
                          width: 76,
                          controller: _controller05,
                        ),
                      ],
                    ),
                    _buildLabel('XXS/XS Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        AdvancedSwitch(
                          width: 16,
                          height: 8,
                          controller: _controller06,
                        ),
                        AdvancedSwitch(
                          width: 32,
                          height: 16,
                          controller: _controller07,
                        ),
                      ],
                    ),
                    _buildLabel('S/M/L Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        AdvancedSwitch(
                          width: 48,
                          height: 24,
                          controller: _controller08,
                        ),
                        AdvancedSwitch(
                          width: 56,
                          height: 28,
                          controller: _controller09,
                        ),
                        AdvancedSwitch(
                          width: 72,
                          height: 36,
                          controller: _controller10,
                          borderRadius: BorderRadius.circular(18),
                        ),
                      ],
                    ),
                    _buildLabel('XL/XXL Switch'),
                    Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        AdvancedSwitch(
                          width: 96,
                          height: 48,
                          controller: _controller11,
                          borderRadius: BorderRadius.circular(24),
                        ),
                        AdvancedSwitch(
                          width: 112,
                          height: 56,
                          controller: _controller12,
                          borderRadius: BorderRadius.circular(29),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        )
    );
  }
  Widget _buildLabel(String value) {
    return Container(
      margin: EdgeInsets.only(
        top: 25,
        bottom: 5,
      ),
      child: Text(
        '$value',
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 16,
          color: Colors.grey,
        ),
      ),
    );
  }
  @override
  void dispose() {
    _controller01.dispose();
    _controller02.dispose();
    _controller03.dispose();
    _controller04.dispose();
    _controller05.dispose();
    _controller06.dispose();
    _controller07.dispose();
    _controller08.dispose();
    _controller09.dispose();
    _controller10.dispose();
    _controller11.dispose();
    _controller12.dispose();
    _controller13.dispose();
    _controller14.dispose();
    _controller15.dispose();

    super.dispose();
  }
}

Leave a Reply

Your email address will not be published.