Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding Switch
  • Switch Initial Value
  • Is Switch Enabled?
  • Active Color
  • Inactive Thumb Color
  • Active Track Color
  • Inactive Track Color
  1. BUILDING UI
  2. Widgets
  3. Base Widgets

Switch

The Switch widget allows users to turn on or off any setting in your app. For example, you could use it on a settings page to enable/disable push notifications, location services, etc.

Adding Switch

To add a Switch widget, select the Switch widget from the Add Widget Button or add it directly from the widget tree.

Switch Initial Value

You might want to show the switch with a default status, i.e., ON or OFF. For example, showing the notification setting with a default switch OFF.

To set the initial value:

  1. Select the Switch widget, move to the properties panel, and see the Switch Initial Value property.

  2. Use the toggle button to set this value manually, or click Variable Icon to set it based on the value from API Calls. If you choose Set from Variable, ensure you pass the boolean value from the source (e.g., API response).

Is Switch Enabled?

If for some reason, you want to display the Switch but not save its action, then you can turn this toggle to OFF. This will ensure that no action takes place when the Switch is disabled.

Active Color

Change the Color of the Switch when it is Toggled On.

Inactive Thumb Color

You can change the Color used for the thumb area of the Switch when the Switch is in off state.

Active Track Color

This is the Color used for the track area of the switch when the switch is on. The track area is the horizontal bar that appears behind the thumb.

Inactive Track Color

This is the Color used for the track area of the switch when the switch is off. The track area is the horizontal bar that appears behind the thumb.

PreviousIconNextSized Box

Last updated 1 month ago