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 GridView widget
  • Customizing GridView Widget
  • Allow Scroll
  • Shrink Wrap
  • Cross Axis Count
  • Cross Axis Spacing
  • Main Axis Spacing
  • Child Aspect Ratio
  • Default Properties
  1. BUILDING UI
  2. Widgets
  3. Layout Widgets

GridView

PreviousStream BuilderNextColumn

Last updated 1 month ago

The is used to display a list of items in a grid or two dimensions (Both vertically and horizontally at the same time).

For example, you can use GridView to show a list of photos or a list of products.

Adding GridView widget

To add the GridView widget to your project:

  1. Select the GridView widget from the Add Widget Button or add it directly from the widget tree.

  2. Inside the GridView, you can add various widgets, and display them in a grid.

Customizing GridView Widget

Allow Scroll

If you want to make the grid scrollable, turn this toggle to On. This is On by default, and must be turned Off if you want to make the grid unscrollable.

Shrink Wrap

By turning this On, you can change this behavior so that the GridView only occupies the space it needs (it will still scroll when there are more items).

Cross Axis Count

It is used to specify the number of columns in a grid view. You can modify the number of columns in the grid using this property.

Cross Axis Spacing

It is used to specify the number of pixels between each child widget listed in the cross axis. You can modify the spacing between the columns using this property.

Main Axis Spacing

It is used to specify the number of pixels between each child widget listed in the main axis. You can modify the spacing between the rows using this property.

To change the spacing between items in the grid:

  1. Select the GridView from the widget tree.

  2. Navigate to Widget Properties panel (on the right side of the tree).

  3. Change the value of the Cross Axis Spacing.

  4. Change the value of the Main Axis Spacing.

Child Aspect Ratio

Sometimes you may want to change the item's height instead of keeping it in a square box. The Child Aspect Ratio property of the GridView allows you to do that. By default, the value for the Child Aspect Ratio is set to 1. That means the item's height will be the same size as of width of the item on the main axis. If the value changes to 2, the height will be reduced by 50% in the main axis direction.

Default Properties

You can customize the appearance and behavior of this widget using the various properties available under the .

GridView widget
Widget Default Properties