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
  • Add Column widget
  • Customizing Column Widget
  • Allow Scrolling
  • Main Axis Alignment
  • Cross Axis Alignment
  • Default Properties
  1. BUILDING UI
  2. Widgets
  3. Layout Widgets

Column

PreviousGridViewNextRow

Last updated 2 months ago

The widget arranges its child widgets vertically. It's commonly used to display multiple widgets, one below the other. For example, you might use this widget to show text, an image, and a button placed vertically in your app:

Here’s how the column arranges its children:

Add Column widget

To add a Column widget:

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

  2. Inside the Column, you can add various widgets, and display them in a vertical manner.

Customizing Column Widget

For a column widget, the main axis runs vertically and the cross axis runs horizontally.

Allow Scrolling

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

Main Axis Alignment

This determines how the child widgets are aligned along the main axis. You can choose from the following options:

  1. Start This places the children as close to the start of the main axis as possible.

  2. End This places the children as close to the end of the main axis as possible.

  3. Center This places the children as close to the middle of the main axis as possible.

  4. Space Between This places the free space evenly between the children.

  5. Space Around This places the free space evenly between the children as well as half of that space before and after the first and last child.

  6. Space Evenly This places the free space evenly between the children as well as before and after the first and last child.

Cross Axis Alignment

This determines how the child widgets are aligned along the cross axis. The following options are available:

  1. Start This places the children with their start edge aligned with the start side of the cross axis.

  2. End This places the children as close to the end of the cross axis as possible.

  3. Center This places the children so that their centers align with the middle of the cross axis.

  4. Stretch It requires the children to fill the cross axis.

  5. Baseline This places the children along the cross axis such that their baselines match.

Default Properties

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

Column
Widget Default Properties