Widgets

This page is mainly describe widgets shipped with themed package with screenshots from example project. There are two widgets offers which namely card and tile that card widget benefits for displaying completed information along with videos and audios playback support if raw file link offered and images preview carousel if no playback supported. On the other hands, tiles is another widget which limited detailness of metadata to minimize occupations of render screen.

Screenshots of example programmes

All screenshots are taken when Flutter native running on Windows 11 and context of the widgets will be difference depending on Bootstrap's breakpoints system. And this table will display all themed packages' example app context with showing metadata from official Flutter website.

Material	Material 2	Material 3
Fluent
Cupertino

Widgets descriptions

Card

Card widget allows reflecting all primary metadatas and display into widget in card form which isolates two major sections namely media and link tile frames for displaying context of multimedia and textual information accordingly. In media frame, it randers either media player when videos and audios resources provided as a single playlist or images carousel which all images fitting in contain mode otherwises. When the given metadatas does not provides any multimedia resources or encounter errors during downloading process, this frame will display broken image icon only. The link tile will display website's title or name of site as title and description as subtitle accordingly. When all textual data omitted, URL used for displaying metadata will be shown as title.

Requirement of activating videos and audios playbacks

To activate videos and audios playback supports, these requirments list must be fulfilled entirely or will fallback to display image carousel otherwise.

• Set multimedia parameter to true which default is false.
• Every content values in og:audio and og:video must be referred to audio and video file type resectfully.
  • OgHref only determines supported media type by making HTTP HEAD request to media resources URL and detects returned Content-Type is categorized in audio and video type. The actual file type supports should be followed supported format type in media_kit library to ensure video and audio playback functionally eventhough the resources passes conditions made from OgHref.
• If at least one audio and video metadatas linked to incorrect resources' file type, media player will no longer activated and display image carousel instead.
  • For example, all YouTube videos links will display image carousel only since the content of og:video:url is referred to embedded player which is HTML instead of video file:

    <meta property="og:video:url" content="https://www.youtube.com/embed/...">

  • However, as mentioned before, it is possible to activate media playback with unsupported file type. Although the playback still available and can be bypassed unsupported media by play next and previous media in playlist, it is preferred to choose common file type as metadata resources for playing video and audio.
    • For video file: .mp4, .avi
    • For audio file: .mp3, .ogg

Tile

Tile widget enables to display metadata in a limited space to display fundamental information of a link. It has the same layout of card which contains media and text section but ordered horizontally. The media section is restricted to display first index of image with cover fitting mode in a small square spaces that it makes impossible to provide media playback or image changing control. However, for the same reason, it makes entire widget is clickable for opening URL of website. For the text section, the context is shown with exact same condition made from card.