Flutter Toggle - A switch widget that toggles/switches between true and false states

Flutter Toggle - A switch widget that toggles/switches between true and false states
Flutter Toggle Switch Button

Flutter Toggle is a switch that has two state user interface elements to choose between checked or unchecked states.‌‌‌‌ This also rejuvenates the content.

So, are you ready to make use of this widget package in the Flutter application? If so, then let's quickly jump into the usage and the ways a toggle can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this toggle widget in Flutter.

‌Flutter Toggle Widget in GetWidget Library

GFToggle is a Flutter Toggle that typically has a button with a thumb slider where the user can use it to drag back and forth corresponding to the state. Its functionalities are as similar as the house electricity switches.

In Flutter, we can define toggle in any of the widgets. By using its customization properties we can mold it according to our requirements.

GFToggle allows you to speed up your Flutter app development by 20-30%. It has almost all widget that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.

Now here is i am going to talk about what is GetWidget Toggle widget and how we implement this on Flutter app to build awesome Flutter Toggle widget for an app.

How to Start:

Now here is the guide about how we should start developing the GFToggle Widget with the use of the GetWidget UI Library.

First, Let go with Getting started, It will guide you on how to start building a beautiful flutter application UI with the GetWidget UI library. Now, we have to install the GetWidget package from the pub.dev and use our 1000+ inbuilt Widget. To import the package in your Flutter project follow the below guide.

Install Package from pub.dev :

https://pub.dev/packages/getwidget - Check the details about GetWidget Package.

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 2.0.4

Keep playing with the pre-built UI components.

GetWidget Toggle shows us the two states of a component, between them we have to choose one as per our convenience as it is a yes/no option. It simply toggles between yes and no values It can be of four types as android, ios, square, and custom.

Simple Flutter Toggle Button with GFToggle Widget

This is basically of type android that triggers between yes and no options. Below is the given code to show a basic GFToggle. ‌‌‌

 import 'package:getwidget/getwidget.dart';

 GFToggle(
    onChanged: (val){},
    value: true,
 )

Flutter IOS Switch Toggle Design with GFToggle Widget

IOS GFToggle is having rounded corners as shown in the image below and also has yes and no switches options. This is of type ios, we can use this in our android applications also. Here is the code to display the ios GFToggle.‌‌‌

Flutter IOS Switch Toggle
Flutter IOS Switch Toggle 
 import 'package:getwidget/getwidget.dart';
 
 GFToggle(
    onChanged: (val){},
    value: true,
    enabledThumbColor:Colors.red,
    type: GFToggleType.ios,
 )
Flutter IOS Switch Toggle 

Flutter Square Switch Toggle Button

This is of type square. The tumb and the track of the switch will be of square shape without any border-radius as shown in the below image.  Here is the code to develop the square type GFToggle.‌‌‌

Flutter Square Switch Toggle Button
Flutter Square Switch Toggle Button 
 import 'package:getwidget/getwidget.dart';
 
GFToggle(
    onChanged: (val){},
    value: true,
    disabledThumbColor:Colors.black,
    type: GFToggleType.square,
 )
Flutter Square Switch Toggle Button 

Custom Flutter Switch Toggle Button Design

In this custom type GFToggle, we can use text to show the states as shown in the below image. In enabled or disabled states the text will be ON or OFF or it can even be yes or no depending upon the requirement. We can customize it by using its properties. The below code is used to get a custom GFToggle

Custom Flutter Switch Toggle Button
Custom Flutter Switch Toggle Button
import 'package:getwidget/getwidget.dart';

GFToggle(
   onChanged: null,
   value: true,
   enabledThumbColor:Colors.black,
   enabledTrackColor:Colors.black38,
   type: GFToggleType.custom,
 ),
Custom Flutter Switch Toggle Button

Custom Properties

Check out the custom properties list of Flutter GFToggle Widget listed below.

enabledTexttype of [String] used to add custom text i.e, ON, ENABLE
disabledTexttype of [String] used to add custom text i.e, OFF, DISABLE
enabledTextStyletype of [TextStyle] used to define the style properties of enabled text
disabledTextStyletype of [TextStyle] used to define the style properties of disabled text
enabledThumbColorcolor used for the active thumb color
disabledThumnbColorcolor used for the disabled thumb color
enabledTrackColorcolor used for the active track color
disabledTrackColorcolor used for the disabled track color
boxShapetype of [BoxShape] ie , circle, rectangle used to change the shape of the thumb, default shape is circle
borderRadiusborderRadius should be given zero for a ios toggle to make it a square toggle with boxshape as rectangle
durationanimation duration called when the switch animates during the specific time elapse

Can we use IOS type toggle in android applications?

Yes, as it is a type so we can use all types of toggles in android and ios applications.‌

How Can we add styles to text widgets used in it?

We can customize it according to the property given. For example, enabledText and its style, disabledText and its style can be used here.‌

What is the use of duration property here?

Duration is the animation duration. The animation will last up to the given duration time.

Flutter Get Widget Docs

Flutter GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

Flutter Forum: if any Find any questions let's discuss them on Forum.

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository: Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

Conclusion:

Here we discuss, what Flutter Toggle Widget is? And how we can use and implement it into our Flutter app through the GetWidget Toggle component. Here, there are options to customize and use other types of Toggle.

About Our Team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as after successful delivery of enterprise and SAAS applications that have been used by more than 500+ businesses around the 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we are trying to give a small contribution to the Flutter Dev Community.