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 the Future Builder Widget
  • Handling Different States
  1. BUILDING UI
  2. Widgets
  3. Layout Widgets

Future Builder

FutureBuilder is a versatile widget that simplifies the management of asynchronous operations within your app's UI. It effectively handles the different states (waiting, completed with data, or errored) associated with asynchronous data fetching, ensuring a smooth user experience.

Key Concepts and Keywords:

  • Asynchronous Operations: These are tasks initiated without blocking the main UI thread. Futures represent the eventual results (data or errors) of such operations. Common examples include database interactions.

  • Future: A class in Flutter that encapsulates the potential outcome of an asynchronous operation. It can be in three states:

    • Waiting: The operation is ongoing, and the result is not yet available.

    • Completed with Data: The operation has successfully finished, and the result (data) is accessible.

    • Errored: An error occurred during the operation.

Adding the Future Builder Widget

  1. Add the future Builder Widget form The Layout Widget .

  2. Choose Type from Properties Panel

    • Type Selection: In the properties panel, select the type of action you want. The dropdown will have two options:

      • API: Use this option if you want to call an API during the time.

      • Delay: Use this option if you want to introduce a delay in a process.

  3. Select Data Source

    • In the Data Source dropdown, choose the option from where you want to fetch the data.

  4. Handle Actions Based on Outcomes

    • On Success: Add any action to be performed when the operation is successful from the On Success dropdown menu.

    • On Error: Add any action to be performed if an error occurs from the On Error dropdown menu.

    • On Complete (Post Success): Add any action to be performed after the success action completes.

    • On Complete (Post Error): Add any action to be performed after the error action completes.

Handling Different States

Once added, Future Builder manages three key states within your app:

  1. Loading Widget

    • This appears while your app is actively fetching data or performing calculations. It acts as a placeholder, informing users that something is happening behind the scenes.

    • You can customize this widget to display a loading indicator, a progress bar, or even a simple message like "Fetching data..."

  2. Error Widget

    • If an issue arises during the waiting period, such as a network error or unexpected data format, an error widget will be displayed.

    • Use this widget to inform users about the problem in a clear and user-friendly way. You can offer options like "Retry" or provide instructions on how to troubleshoot the issue.

  3. Success Widget

    • The most satisfying state! Once the data or user input is successfully processed, the success widget takes center stage.

    • This widget uses the fetched data or received input to build and display the intended part of your app's interface. This is where users finally see the information or take the desired actions.

PreviousWeb ViewNextConditional Builder

Last updated 1 month ago