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
  1. Actions

Drawer

PreviousWait (delay)NextToast

Last updated 3 months ago

Using this action, you can integrate a navigation drawer into your mobile app, providing users with a convenient way to access various app features and navigation options.

Adding the Drawer Action

In the Drawer Action Dropdown, choose whether you want to open a Open drawer, open an end drawer, or close the drawers.

  1. Open Drawer (Left Side)

    • Description: This action opens a drawer that slides in from the left side of the screen. It can be used to display navigation menus, settings, or additional content.

    • Use Cases:

      • Main navigation for an application.

      • Displaying filters or settings that the user can modify.

      • Showing contextual information related to the current view.

  2. Open End Drawer

    • Description: This action opens a drawer from the right side of the screen. Similar to the left-side drawer, it is used for displaying menus, settings, or additional content, but from the opposite side.

    • Use Cases:

      • Supplementary navigation or options that are secondary to the main content.

      • Tools or utilities that the user might need while interacting with the main content.

      • Quick access to user profile settings or notifications.

  3. Close Drawers

    • Description: This action closes any open drawers on the screen, whether they are on the left or right side. It is useful for returning to the main content without distractions.

    • Use Cases:

      • When the user wants to focus solely on the main content.

      • After the user has made selections or viewed information in the drawer and wants to hide it.

      • To declutter the interface and provide a clean view.

Examples of Drawer Usage

  • Open Drawer (Left Side Drawer )

    • A common example is the navigation drawer in many mobile apps. It typically contains links to different sections of the app, like Home, Profile, Settings, etc.

  • Open End Drawer ( Right Side Drawer)

    • This can be seen in applications where the right drawer might show notifications, chat messages, or additional tools like a text editor's format options.

  • Close Drawers

    • Implemented as an overlay or a swipe gesture that allows users to close the drawer by tapping outside of it or swiping it back to its original position.

1.

Add The Action