• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Developers

      • Home
      • Blog
      • Developers
      • Flutter switch widget
      Imageedit 4 7110556930 | Flutter Switch Widget

      Flutter switch widget

      • Posted by Shivam Srivastava
      • Categories Developers, Flutter
      • Date September 16, 2019
      • Comments 0 comment
      Spread the love

      Introduction

      In this tutorial, I show you how to use Switch Widget in flutter using Stream Builder.

      Switch Widget

      If you are a programmer, and so I think you well know about switch if you don’t know then don’t worry I will tell you.
      The switch is a widget in flutter who returns a value in Boolean form means true or false.
      You don’t have a need to include any third-party library for use a Switch Widget it is already provided by flutter.

      Start

      First, we have created a file and initialize Stream Controller

      import 'package:rxdart/rxdart.dart';
      
      class Bloc{
      
        //initialize bool type controller
        final _switchController = BehaviorSubject<bool>();
      
        /// Add data to the stream
        Function(bool) get setSwitch => _switchController.sink.add;
      
        /// Validate and retrieve data from the stream
        Stream<bool> get getSwitch => _switchController.stream;
      
      }

      Then import Bloc.dart file in your class where you want to add Switch Widget

      import 'package:bloc_flutter_switch/Bloc.dart';

      Create an object of Bloc.dart file

        Bloc bloc=Bloc();

      Add below code where you want to add a switch

      StreamBuilder(
                    stream: bloc.getSwitch,
                    builder: (context,snapshot){
                        return Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text("${snapshot.data??false}"),
                      Switch(
                      value: snapshot.data??false,
                      activeColor: Colors.green,
                      onChanged: (b) {
                      bloc.setSwitch(b);
                      },
                      )
                          ],
                        );
                })

      Output

      Imageedit 27 8234290517 | Flutter Switch Widget

      Get complete code click here

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter custom switch, flutter switch example, flutter widgets

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Flutter Hero Animation
      September 16, 2019

      Next post

      HTC VIVE COSMOS VR HEADSET ANNOUNCED
      September 16, 2019

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now