Switch Button-Custom Switch-Flutter

Published February 29, 2020

In This post we are going to learn about Custom Switch in Flutter.

Let's Start

Step 1: Create Flutter Application

Step 2: Add Dependencies

dev_dependencies:
  flutter_test:
    sdk: flutter
  toggle_switch: "^0.1.4"
  font_awesome_flutter: ^8.7.0

Step 3: Create dart file and add below code

import 'package:flutter/material.dart';
import 'package:toggle_switch/toggle_switch.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class CustmSwitch extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 35.0, bottom: 15.0),
                child: Text('Choose Ice Cream Flvaour: ',
                    style:
                    TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0)),
              ),
              ToggleSwitch(
                minWidth: 90.0,
                initialLabelIndex: 2,
                activeBgColor: Colors.pink,
                activeTextColor: Colors.white,
                inactiveBgColor: Colors.grey,
                inactiveTextColor: Colors.grey[900],
                labels: ['Blue Moon', 'Grape-Nut', 'Pistachio'],
                onToggle: (index) {
                  print('switched to: $index');
                },
              ),
              Padding(
                padding: const EdgeInsets.only(top: 35.0, bottom: 15.0),
                child: Text('Are you Interested ',
                    style:
                    TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0)),
              ),
              ToggleSwitch(
                  minWidth: 90.0,
                  cornerRadius: 20,
                  activeBgColor: Colors.green,
                  activeTextColor: Colors.white,
                  inactiveBgColor: Colors.grey,
                  inactiveTextColor: Colors.white,
                  labels: ['YES', 'NO'],
                  icons: [FontAwesomeIcons.check, FontAwesomeIcons.times],
                  onToggle: (index) {
                    print('switched to: $index');
                  }),
              Padding(
                padding: const EdgeInsets.only(top: 35.0, bottom: 15.0),
                child: Text('Select Geneder ',
                    style:
                    TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0)),
              ),
              ToggleSwitch(
                  minWidth: 90.0,
                  cornerRadius: 20,
                  activeBgColor: Colors.green,
                  activeTextColor: Colors.white,
                  inactiveBgColor: Colors.grey,
                  inactiveTextColor: Colors.white,
                  labels: ['Male', 'Female'],
                  icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],
                  activeColors: [Colors.blue, Colors.pink],
                  onToggle: (index) {
                    print('switched to: $index');
                  })
            ],
          ),
        ),
      ),
    );
  }
}

Step 4: Update main dart file

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: CustmSwitch(),
    );
  }

}

Step 5: Run Application

Custom Switch

Article Contributed By :

9184 Views