Try   HackMD

Makepad Widgets (UI Elements Toolkit)

Makepad Widgets is a set of commonly used UI elements toolkit that works with the Makepad ecosystem as part of the Makepad Framework. It is integrated wtih the Makepad Live Designer and Code Editor, as well as the rest of the Makepad Framework.

It allows application developers to easily use these UI widget components to build and compose their UI application.

Overview

A modern GUI application framework should provide a basic set of easy to use widgets or UI components that allow the developers to quickly build the application user interface by combining these widgets.

The basic widgets usually contain, at the minimal, support for HTML elements, with additioanl layout support.

Additional components are usually provided as well from either the frameworks or via community development. The number of supported widgets for a mature GUI framework will usually be in the hundreds.

Also common are 3rd party widget "libraries" that provide "enhanced" sets of widgets which can expand and override the basic, standard widgets provided by the original framework.

Basic Widgets Set

A survey of the current popular cross-platform development platforms (React Native, Flutter, SwiftUI) indicates that the folowing are the most common basic set of widgets that the frameworks provide out of the box.

Makepad Framework includes all these basic widgets support as standard part of the framework.

  • Text
  • Image
  • Icon
  • Button
  • View / Container
    • Horizontal Layout
    • Vertical Layout
  • TextInput / TextField
  • ListView
  • ScrollView
  • Picker / DropdownButton
  • Switch / Toggle
  • Placeholder / Divider
  • TabBar / AppBar / TabView

Makepad Widgets

Additionally, to enhance the usability of the Makepad Framework, we will provide the following commonly used UI components as well to allow easier, more sophisticated UI application development.

  • Slider
  • Drawer
  • Checkbox
  • Radio
  • DatePicker

React Native UI Widgets

React Native provides a number of built-in Core Components ready for developers to use in their app. Their are categorized into the following:

  • Basic Components
  • User Interface
  • List Views
  • Android-specific
  • iOS-specific
  • Others

Basic Components

Most apps will end up using one of these basic components.

  • View - The most fundamental component for building a UI
  • Text - A component for displaying text.
  • Image - A component for displaying images.
  • TextInput - A component for inputting text into the app via a keyboard.
  • ScrollView - Provides a scrolling container that can host multiple components and views.
  • StyleSheet - Provides an abstraction layer similar to CSS stylesheets.

User Interface

These common user interface controls will render on any platform.

  • Button - A basic button component for handling touches that should render nicely on any platform.
  • Switch - Renders a boolean input.

List Views

Unlike the more generic ScrollView, the following list view components only render elements that are currently showing on the screen. This makes them a performant choice for displaying long lists of data.

  • FlatList - A component for rendering performant scrollable lists.
  • SectionList - Like FlatList, but for sectioned lists.

Android Components and APIs

Many of the following components provide wrappers for commonly used Android classes.

  • BackHandler - Detect hardware button presses for back navigation.
  • DrawerLayoutAndroid - Renders a DrawerLayout on Android.
  • PermissionsAndroid - Provides access to the permissions model introduced in Android M.
  • ToastAndroid - Create an Android Toast alert.

iOS Components and APIs

Many of the following components provide wrappers for commonly used UIKit classes.

  • ActionSheetIOS - API to display an iOS action sheet or share sheet.

Others

These components may be useful for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left (or menu above, if you are on a narrow screen).

  • ActivityIndicator - Displays a circular loading indicator.
  • Alert - Launches an alert dialog with the specified title and message.
  • Animated - A library for creating fluid, powerful animations that are easy to build and maintain.
  • Dimensions - Provides an interface for getting device dimensions.
  • KeyboardAvoidingView - Provides a view that moves out of the way of the virtual keyboard automatically.
  • Linking - Provides a general interface to interact with both incoming and outgoing app links.
  • Modal - Provides a simple way to present content above an enclosing view.
  • PixelRatio - Provides access to the device pixel density.
  • RefreshControl - This component is used inside a ScrollView to add pull to refresh functionality.
  • StatusBar - Component to control the app status bar.

Basic React Native UI Widgets List

React Native is a popular framework for building cross-platform mobile applications. Some of the basic UI components that React Native provides by default are:

  • View
  • Text
  • Image
  • TextInput
  • Button
  • TouchableHighlight
  • TouchableOpacity
  • TouchableWithoutFeedback
  • ScrollView
  • FlatList
  • SectionList
  • Picker
  • Switch
  • Slider
  • ActivityIndicator
  • StatusBar
  • WebView

These components can be combined and customized to create complex and interactive user interfaces for your React Native application. Additionally, React Native provides a rich set of APIs and libraries that can be used to access native device features and functionality.

Basic Flutter UI Widgets List

Flutter provides a rich set of basic widgets that can be used to create beautiful and responsive user interfaces. Some of the basic widgets provided by Flutter are:

  • Text - A run of text with a single style.
  • Image - A widget that displays an image.
  • Icon - A Material Design icon.
  • Container - A convenience widget that combines common painting, positioning, and sizing widgets.
  • Row - Layout a list of child widgets in the horizontal direction.
  • Column - Layout a list of child widgets in the vertical direction.
  • Scaffold - Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.
  • Placeholder - A widget that draws a box that represents where other widgets will one day be added.
  • AppBar - A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
  • ElevatedButton - A Material Design elevated button. A filled button whose material elevates when pressed.

Other common widgets include:

  • FloatingActionButton
  • TextField
  • Checkbox
  • Radio
  • Switch
  • DropdownButton
  • ListView
  • GridView
  • TabBar
  • Drawer

These widgets can be combined and customized to create complex and interactive UI elements for your Flutter application.

Additional widgets by categories

  • Accessibility - Make your app accessible.
  • Animation and Motion - Bring animations to your app.
  • Assets, Images, and Icons - Manage assets, display images, and show icons.
  • Async - Async patterns to your Flutter application.
  • Basics - Widgets you absolutely need to know before building your first Flutter app.
  • Cupertino (iOS-style widgets) - Beautiful and high-fidelity widgets for current iOS design language.
  • Input - Take user input in addition to input widgets in Material Components and Cupertino.
  • Interaction Models - Respond to touch events and route users to different views.
  • Layout -Arrange other widgets columns, rows, grids, and many other layouts.
  • Material Components - Visual, behavioral, and motion-rich widgets implementing the Material Design guidelines.
  • Painting and effects - These widgets apply visual effects to the children without changing their layout, size, or position.
  • Scrolling - Scroll multiple widgets as children of the parent.
  • Styling - Manage the theme of your app, makes your app responsive to screen sizes, or add padding.
  • Text - Display and style text.

Basic SwiftUI Widgets List

SwiftUI is a modern UI framework for building applications on Apple platforms. Some of the basic UI controls and views that SwiftUI provides by default are:

  • Text
  • Image
  • Button
  • TextField
  • Toggle
  • Stepper
  • Slider
  • DatePicker
  • List
  • ScrollView
  • NavigationView
  • TabView
  • Form
  • Group
  • VStack
  • HStack
  • ZStack
  • Spacer
  • Divider

These UI controls and views can be used to create a wide range of user interfaces, from simple screens to complex layouts with custom animations and transitions. Additionally, SwiftUI provides a range of modifiers and style options to customize the appearance and behavior of these basic views.

Last changed by 
 
Edward Tan
rust or bust
0
118

Read more

Makepad Architecture Benefits

Makepad’s architecture highlights can be summarized in 4 major designs choice

May 17, 2024
Automated Performance Benchmarking

The system should be able to perform automated performance benchmarking tests with minimal manual steps.

Feb 16, 2024
Makepad Examples Build Commands

Makepad is a cross-platform UI framework written in Rust.It is in active development, but is already usable to build quick prototypes and simple (or even complicated UI) applications.

Jan 6, 2024
Makepad Commands Quick Reference

+++title=“Makepad Commands Quick Reference”date=2023-11-09

Nov 10, 2023
Read more from Edward Tan
Published on HackMD