UI Building Blocks

Learn about the fundamental UI building blocks in Digia Studio: pages, widgets, and components.

Pages

Pages are the individual screens of your mobile application. Each page can contain multiple widgets and components arranged in a specific layout.

Page Types

• Home/Dashboard Pages: Main entry points

• Detail Pages: Show specific item information

• Form Pages: Collect user input

• List Pages: Display collections of data

Widgets

Widgets are the basic building blocks of your UI. Digia Studio provides a comprehensive library of pre-built widgets organized by category:

Layout & Structure Widgets

• Container, Row, Column, Stack

• Safe Area, Scaffold, AppBar

• Conditional Builder, Expandable

Content & Display Widgets

• Text, Image, Icon, Avatar

• Carousel, Progress Bars, Dividers

• Web View, Video Player, Story

Input & Interaction Widgets

• Button, Text Form Field, Checkbox

• Calendar, Range Slider, Switch

• State Container, Timer

Navigation Widgets

• Navigation Bar, Tab Bar, Page View

• Bottom Sheets, Dialogs

Components

Components are reusable combinations of widgets that you can create and use across multiple pages. Think of them as custom widgets you build yourself.

Types of Components

• UI Components: Pure visual elements

• Functional Components: Include logic and state

• Layout Components: Define page structures

Best Practices

• Modularity: Break complex UIs into smaller, reusable components

• Consistency: Use consistent naming and styling patterns

• Performance: Avoid deeply nested widget hierarchies

• Responsiveness: Test layouts on different screen sizes