Check example Flutter Ui applications involving different widgets
Flutter widgets are inspired from React
User Interface in Flutter is centralised on the idea of widgets
Widgets are typically layout components which can be associated with states and describe what their view should look like given their current configuration and state
When a widget’s state changes, the framework finds the diff of its changed description to determine the minimal changes required to transition from one state to another
Flutter comes with a suite of basic widgets, of which the following are commonly used:
Text
The Text widget allows to create text for an application which can be styled
Row, Column
These flex widgets allow to create flexible layouts in both the horizontal (Row) and vertical (Column) directions
The design of these objects is based on the web’s flexbox layout model
Stack
Stacks are based on the web’s absolute positioning layout model and children of a Stack can be positioned relative to the top, right, bottom, or left edge of the stack by using Positioned widget
Container
The Container widget allows to create a rectangular visual element
A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow and can also have margins, padding, and constraints applied to its size
Following are some Ui related applications
Prompt a user with alert message, similar to a pop-up
Platform: Android & iOS
Check Alert Dialog Application
A floating action button (FAB) is a circular button that typically triggers a general functionaity or the primary action in an app's UI
Platform: Android & iOS
Check Floating Action Button
Progress indicators are used to indicate some work in progress like uploading, downloading files, registering a user etc
Platform: Android & iOS
Check Progress Indicator Application
Inbuilt widgets of Flutter can be used to blur an image
Platform: Android & iOS
Check Blur Background Application
An expandable list responds to user gesture by expanding and shrinking its size, typically to show and hide a sublist
Platform: Android & iOS
Check Expandable List Application example code
An overlay loading screen displays a progress indicator (also called modal progress HUD or head up display), which typicallysignifies that the app is loading or performing some work
Platform: Android & iOS
Check Application with Overlay Loading Screen
A refresh on swipe or pull to refresh application activity displays a progress indicator when a user pulls a view typically to indicate that new content is attempted to be loaded
Platform: Android & iOS
Check Application with refresh on swipe functionality
