Skip to content

Components

Jump to bottom
Ratnadeep Bhattacharyya edited this page Feb 9, 2024 · 81 revisions

TUIAccordion

Usage

Parameters

  • subtitle: (Required) The text which is displayed in the expanded state.
  • title: (Required) Title of the Accordion.

Example

const TUIAccordion(
    title: "Is this an accordion row?",
    subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
);

TUIAnchor

TUIAnchor

Usage

Parameters

  • title: (Required) Title of the TUIAnchor.
  • onPressed: The callback when the anchor is tapped.

Example

TUIAnchor(
    title: "Link Text",
    onPressed: () {
        print("Anchor tapped");
    },
);

TUIAppTopBar

TUIAppTopBar is a view that acts as a navigation bar for a screen. The view can be customized with title, left and right bar button items and with search

Usage

Parameters

  • currentIndex: (Required) Currently selected index.
  • items: (Required) List of items List.
  • showLabels: (Required) Show or hide the label.
  • onTap: Selection changed callback.

Example

Scaffold(
    bottomNavigationBar: TUIAppTopBar(
        items: [
          TUIAppBarItem(
              iconData: FluentIcons.bookmark_24_regular, label: "Saved"),
          TUIAppBarItem(
              iconData: FluentIcons.search_24_regular, label: "Discover"),
          TUIAppBarItem(iconData: FluentIcons.home_24_regular, label: "Home"),
          TUIAppBarItem(
              iconData: FluentIcons.person_24_regular, label: "Profile"),
          TUIAppBarItem(
              iconData: FluentIcons.settings_24_regular, label: "Settings"),
        ],
        currentIndex: selectedBottomNavBarItem,
        onTap: (value) => {
          setState(() {
            print("On tap, item selected: $value");
            selectedBottomNavBarItem = value;
          })
        },
    ),
    body: body: const Center(child: Text("hello")),
);

TUIAttachmentUpload

Represent file and document attachments with TUIAttachmentUpload. Supports title, image preview and actions to download and delete attachments.

TUIAttachmentUpload

Usage

Parameters

  • isIconUsed: (Required) Show or hide the icon.
  • title: (Required) Title of the attachment upload widget.
  • deleteTapped: Callback when the delete is tapped.
  • description: Description of the widget.
  • downloadTapped: Callback when the download icon is tapped.
  • icon: Icon to be used inside the widget.
  • image: Image to be used inside the widget.

Example

TUIAttachmentUpload(
    title: "Title",
    isIconUsed: false,
    image: TUIImage(
        imageUrl: "https://images.unsplash.com/photo-1579353977828-2a4eab540b9a",
        height: TUIMediaThumbnailSize.large.height,
        width: TUIMediaThumbnailSize.large.width,
        fit: BoxFit.fill,
    ),
);

TUIAvatar

Displays user avatar pics or initials.

TUIAvatar

Usage

Parameters

  • avatarContent: (Required) Avatar content. This can contain either the icon, image, or text.
    • type (Required)
      • image
      • icon
      • text
    • icon
    • image
    • text
  • avatarSize: (Required) Defines the size of the avatar.
    • xxs
    • xs
    • s
    • m
    • l
    • xl
    • xxl
  • isBadged: (Required) Show or hide the badge.
  • backgroundColor: Background Color of the widget, default value is Color(0xff924F92).
  • foregroundColor: Foreground color, default value is Color(0xffFFFFFF).
  • textColor: Text color of the Avatar text, default value is Color(0xffFFF5FF).

Example

Avatar with text

TUIAvatar(
    avatarSize: TUIAvatarSize.xxl,
    avatarContent: TUIAvatarContent(
        text: "TUI",
        type: TUIAvatarContentType.text,
    ),
);

Avatar with Icon and badge

TUIAvatar(
    avatarSize: TUIAvatarSize.m,
    avatarContent: TUIAvatarContent(
        type: TUIAvatarContentType.icon,
        icon: Symbol.export.value,
    ),
    isBadged: true,
);

Avatar with Image and badge

TUIAvatar(
    avatarSize: TUIAvatarSize.xxl,
    backgroundColor: Colors.grey[200],
    avatarContent: TUIAvatarContent(
        type: TUIAvatarContentType.image,
        image: const TUIImage(imageUrl: "https://avatars.githubusercontent.com/u/8043494?v=4"),
    ),
    isBadged: true,
);

TUIBadge

A view that displays a badge with an optional count. The badge is a pill shape with a background color of error and a text color of onError. The count is displayed in the center of the badge and is optional.

Can be used standalone, or as a view modifier to apply a badge on any view.

TUIBadge

Usage

Parameters

  • badgeSize: (Required) Defines the size of the badge.
    • xs
    • s
    • l
  • isNumbered: (Required) Is the badge number.
  • content: Text of the badge.

Example

TUIBadge(
    isNumbered: true,
    content: "1",
    badgeSize: TUIBadgeSize.xs,
);

TUIBreadCrumb

TUIBreadcrumb

Usage

Parameters

  • onTap: (Required) Callback for tap.
  • titles: (Required) Titles of the items.

Example

TUIBreadCrumb(
    titles: const [
        "one",
        "two",
        "three",
        "four",
        "five",
        "six",
        "seven",
        "eight",
        "nine",
        "ten"
    ],
    onTap: (index) {
        print("The tapped index is ${index}");
    },
);

TUIButton

Buttons with a variety of styles and sizes.

TUIButton

Usage

Parameters

  • type: (Required) Button type, possible values are
    • primary
    • secondary
    • outlined
    • ghost
    • danger
  • onPressed: (Required) Callback for button pressed.
  • height: Height of the icon.
  • iconData: Icon of the button.
  • iconPosition: Position of the icon, possible values are:
    • left
    • right
  • label: Title of the button.
  • onLongPress: Callback for long press of the button.
  • size: Button size.
    • xs
    • s
    • m
    • l

Example

TUIButton(
    type: TUIButtonType.outlined,
    label: "Success",
    onPressed: () {
        print ("Button pressed");
    },
);

TUICheckBox

TUICheckBox

Usage

Parameters

  • enableMixedState: Enable mixed state, default is false.
  • onChanged: Callback for checkbox selection state.
  • state: Checkbox state, default is unchecked.
    • unchecked
    • mixed
    • checked

Example

TUICheckBox(
    enableMixedState: true,
    onChanged: (state) {
        print("The tapped index is ${state}");
    },
);

TUICheckBoxRow

Component that displays a title and optional description, with a checkbox. Useful for displaying in lists with selectable items.

TUICheckboxRow

Usage

Parameters

  • title: (Required) Title of the widget.
  • backgroundDark: To show dark background, uses themes background color.
  • description: Description of the widget.
  • enableMixedState: Enables the mixed state.
  • onChanged: Callback when checkbox selection is changed.
  • state: State of the widget.
    • unchecked
    • mixed
    • checked

Example

TUICheckBoxRow(
    enableMixedState: true,
    title: "Title",
    description: "Description",
    state: TUICheckBoxRowState.checked,
    onChanged: (state) {
        print("The tapped index is $state");
    }
);

TUIChip

Small button-like component, useful for displaying contextual information.

TUIChip

Usage

Parameters

  • title: (Required) Title of the chip.
  • size: Size of the chip, default size is m.
    • m
    • l
  • badgeValue: String value of the badge.
  • highlighted: Is the chip highlighted.
  • leftIcon: Left icon for the widget.
  • leftIconImage: Left image for the widget.
  • onRightIconTap: Callback when the right icon is tapped.
  • rightIcon: Right icon of the widget.

Example

TUIChip(
    leftIcon: Icons.abc_outlined,
    title: "Chip",
    size: TUIChipSize.m,
    rightIcon: Icons.access_alarm,
    onRightIconTap: () {
        print("Right Icon Tapped");
    },
    badgeValue: "4",
);

TUIDivider

Display a divider in either horizontal or vertical orientation, with specified padding.

TUIDivider

Usage

Parameters

  • type: Type of TUIDivider, default is horizontal.
    • horizontal
    • vertical
  • color: Color of the divider.
  • horizontalPadding: Horizontal padding of the divider, default value is `none.
    • none
    • s
    • m
    • l
    • xl
  • verticalPadding: Vertical padding of the divider.
    • none
    • s

Example

const TUIDivider(horizontalPadding: TUIDividerHorizontalPadding.s);

TUIDraggableCard

Component with a built-in drag handle, that can be used to contain components meant to be dragged, such as for re-ordering.

TUIDraggableCard

Usage

Parameters

  • backgroundDark: To show dark background, uses themes background color.
  • child: Widget to be displayed inside TUIDraggableCard.

Examples

  • Without Dark Background
TUIDraggableCard(
  child: Text("Hello"),
),
  • With Dark Background
TUIDraggableCard(
  backgroundDark: true,
  child: Text("Hello"),
),

Full Example

import 'package:flutter/material.dart';
import 'package:tarka_ui/components/draggable_card/draggable_card.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            TUIDraggableCard(
              child: Text("Hello"),
            ),
            TUIDraggableCard(
              backgroundDark: true,
              child: Text("Hello"),
            ),
          ],
        ),
      ),
    );
  }
}

TUIEmailField

Displays email addresses for use in email form to/cc fields.

TUIEmailField

Usage

Parameters

  • emails: (Required) List of emails.
  • label: email type cc, bcc, or to.
  • onAdd: Callback when add is tapped.
  • onRemove: Callback when remove is tapped.

Example

TUIEmailField(
    emails: [],
    showSuffix: true,
    onAdd: () {
        print("Hello");
    },
);

TUIEmailSubjectField

Useful for entering email subject lines.

TUIEmailSubjectField

Usage

Parameters

  • onTextChanged: (Required) Callback for the text changes with the current string content.

Example

TUIEmailSubjectField(
    onTextChanged: (String text) {
        print("text changed: ${text}");
    },
);

TUIFloatingActionButton

Floating action button with customisable sizes, colors and icons.

TUIFloatingActionButton

Usage

Parameters

  • iconData: (Required) Icon for the floating action button.
  • size: (Required) Size of the Floating action button.
    • large
    • regular
    • small
  • onPressed: Callback when the floating action button is tapped.

Example

Scaffold(
    floatingActionButton: TUIFloatingActionButton(
    iconData: Symbol.map.value,
    onPressed: () {},
    ),
    body: const Center(child: Text("Example")),
);

TUIIconButton

Buttons containing only icons, to be used in toolbars and other places where space is a premium.

TUIIconButton

Usage

Parameters

  • iconData: (Required) Icon for the Button.
  • size: (Required) TUIIconButtonSize is used to define the size of button.
    • px20
    • px24
    • px32
    • px40
    • px48
  • type: (Required) TUIIconButtonType is used to define the type of button.
    • primary
    • secondary
    • outlined
    • ghost
  • onLongPress: Called when the button is long-pressed.
  • onPressed: Called when the button is tapped or otherwise activated.

Example

TUIIconButton(
    type: TUIIconButtonType.primary,
    size: TUIIconButtonSize.px20,
    onPressed: () {},
    iconData: Symbol.documentDownload.value
);

TUIInputField

Component for text input, with a title and multiple configuration options - including trailing action buttons, focus highlighting, error or other helper text, and more.

TUIInputField

Usage

Parameters

  • enabled: Defaults to true.
  • readOnly: Defaults to false.
  • hintText: Defaults to null.
  • labelText: Defaults to "label".
  • errorText: Defaults to null.
  • prefixText: Defaults to null.
  • suffixText: Defaults to null.
  • textAlign: Defaults to TextAlign.start.
  • textAlignVertical: Defaults to TextAlignVertical.center.
  • textCapitalization: Defaults to TextCapitalization.none.
  • textDirection: Defaults to TextDirection.ltr.
  • maxLines: Defaults to 1.
  • minLines: Defaults to null.
  • expands: Defaults to false.
  • maxLength: Defaults to null.
  • prefixIcon: Defaults to null.
  • prefixIconColor: Defaults to Color(0xff1A1B1F).
  • suffixIcon Defaults to null.
  • suffixIconColor: Defaults to Color(0xff1A1B1F).
  • obscureText: Defaults to false.
  • obscuringCharacter: Defaults to "*".
  • controller: TextEditingController defaults to null.
  • keyboardType: Defaults to null.
  • textInputAction: Defaults to null.
  • onChanged: Callback for the text change event with the current string.
  • onEditingComplete: Callback when the editing is completed.
  • onSubmitted: Callback when the submit button is pressed.
  • onTap: Callback when the widget is tapped.

Example

const TUIInputField(
    hintText: "Label",
    labelText: "Hello World",
    errorText: "Error message goes here.",
);

TUIMediaThumbnail

TUIMediaThumbnail

Usage

Parameters

  • mediaType: (Required) Media type photo, video, document, audio.
    • photo
    • video
    • document
    • audio
  • size: (Required) Size of the media thumbnail. It can be large or regular.
    • large
    • regular
  • customThumbnailImage: Image for the thumbnail.
  • isSelectable: Is the media thumbnail selectable, default is true.
  • onPressed: Callback when the thumbnail is tapped.

Example

TUIMediaThumbnail(
    size: TUIMediaThumbnailSize.large,
    mediaType: TUIMediaThumbnailType.video,
    onPressed: () {
        print("Video thumbnail tapped.");
    },
    customThumbnailImage: TUIImage(
        imageUrl:"https://images.unsplash.com/photo-1579353977828-2a4eab540b9a",
        height: TUIMediaThumbnailSize.large.height,
        width: TUIMediaThumbnailSize.large.width,
        fit: BoxFit.fill,
    ),
);

TUIMenuItem

Use TUIMenuItem for individual menu options in a TUIMobileOverlayMenu.

TUIMenuItem

Usage

Parameters

  • item: (Required)
    • title: (Required) Title of the menu item.
    • style: (Required) Menu item style - none, onlyLeft, onlyRight and both.
      • none
      • onlyLeft
      • onlyRight
      • both
    • state: Default is unchecked.
      • unchecked
      • leftChecked
      • rightChecked
      • bothChecked
  • backgroundDark: Is the dark theme used, default value is false.
  • action: Callback when the menu item is tapped.
  • onLeftTap: Callback when the left icon is tapped.
  • onRightTap: Callback when the right icon is tapped.

Example

TUIMenuItem(
    item: TUIMenuItemProperties(
        title: "Item",
        style: TUIMenuItemStyle.none,
    ),
    action: (state) {
        print("hello");
    },
);

TUIMobileOverlayHeader

Use TUIMobileOverlayFooter to display the title at the top of an overlay.

TUIMobileOverlayHeader

Usage

Parameters

  • style (Required):
    • style: (Required)
      • handle
      • onlyTitle
      • left
      • right
    • title: Title of the overlay header.
    • action: Callback for the header tapped.
    • icon: Right icon for the header.

Example

TUIMobileOverlayHeader(
    style: TUIOverlayMobileStyle(
    style: TUIOverlayMobileStyleType.left,
        title: "Hello",
        action: () {
            print("hello tapped");
        },
    ),
);

TUINavigationRow

Depicts items that navigate to other screens when tapped.

TUINavigationRow

Usage

Parameters

  • title: (Required) Title of the widget.
  • accessoryView: Right side widget.
  • icon: Left Icon for the widget.

Example

TUINavigationRow(
    title: "hello world, hello world, hello world, hello world, hello world, hello world, hello world, ",
    icon: FluentIcons.fluent_20_filled,
    accessoryView: Container(
        width: 80,
        height: 60,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
            color: Colors.yellow, 
            borderRadius: BorderRadius.circular(8.0), 
            ),
    ),
);

TUIRadioButton

When presenting the user with multiple choices requiring a single selection, TUIRadioRow can be used.

TUIRadioButton

Usage Parameters

  • onPressed: Callback when the radio button is pressed.
  • isSelected: Defines if the Radio Button is selected programatically or not, defaults to false.

Example

TUIRadioButton(
    onPressed: () {
        print("Anchor tapped");
    },
);

TUIRangeSlider

TUIRangeSlider

Usage

Parameters

  • max: (Required) Maximum value of the slider.
  • min: (Required) Minimum value of the slider.
  • values: (Required) Contains the range of the Slider type RangeValues.
  • onChanged: Callback when the value of the slider changes.
  • onChangeEnd: Callback that is called when a value change is complete.
  • onChangeStart: Callback that is called when a value change begins.

Example

TUIRangeSlider(
    values: rangeSliderValue,
    onChanged: (value) {
        updateRangeSliderValue(value);
    },
    onChangeStart: (value) => {print("Range change Started $value")},
    onChangeEnd: (value) => {print("Range change Ended $value")},
    max: 1,
    min: 0,
);

TUISelectionCard

TUISelectionCard

Usage

Parameters

  • isSelected - Default: false, Sets background color to selected. Uses theme color surface if isHovered false and primaryAltHover if isHovered is true.
  • isHovered - Default: false, Sets background color to hovered. Uses theme color surfaceHover if isSelected false and primaryAltHover if isSelected is true.
  • showChevron - To hide or show chevron on right.
  • icon - Custom icon for card.
  • badgeCount - Count to show on badge. If nothing passed it will hidden.
  • badgeColor - Background Color of show on badge.
  • action - Custom action or function on tap.
  • style - (Required). TUISelectionCardStyle
    • title - (Required). Title to display.
    • description - List of strings to be displayed as description.
    • footer - String to display in footer.

Example

TUISelectionCard(
  style: TUISelectionCardStyle(
    title: "Label",
    description: ["Description", "Description"],
    footer: "Label",
  ),
  icon: FluentIcons.guest_24_regular,
  badgeColor: Colors.green,
  badgeCount: 4,
  action: () {
    print("hello");
  },
);

TUISnackBar

A view that displays a message for a brief period of time and then disappears automatically. Use a snackbar to display a brief message at the bottom of the screen. Snackbars appear above all other elements on screen and only one can be displayed at a time.

TUISnackBar

Usage Parameters

  • type: Type of the snack bar, possible types: success, information, warning, and error.
  • message: String content of the snack bar.
  • action:
    • label
    • onActionPressed
  • duration: Callback that is called when a value change begins.
  • onVisible: Callback when the snack bar is visible.

Example

TUISnackBar(
    context: context,
    type: TUISnackBarType.error,
    message: "This is an error Snackbar with action",
    action: TUISnackBarAction(
    label: "Retry",
    onActionPressed: () {
         print("Snackbar Retry onPressed");
    }),
);

TUISlider

TUISlider

Usage

Parameters

  • max: (Required) Maximum value of the slider.
  • min: (Required) Minimum value of the slider.
  • value: (Required) Current value of the slider.
  • onChanged: Callback when the value changes.
  • onChangeStart: Callback when the value change begins.
  • onChangeEnd: Callback when the value change ends.

Example

TUISlider(
    value: sliderValue,
    onChanged: (value) {
        updateSliderValue(value);
    },
    max: 1,
    min: 0,
);

TUISuccessCheckMark

TUISuccessCheckmark

Usage

Example

const TUISuccessCheckMark(),

TUIToggleRow

Divider

Usage

Parameters

  • title - (Required) Title text
  • description - Long Text as description
  • icon - Icon to show on left, if nothing passed it be treated as hidden
  • value - Value of switch
  • onChanged - Callback when switch selection changed.
  • backgroundDark - To show dark background, uses themes background color.

Example

TUIToggleRow(
  title: "Title",
  description:
      "Descrption for this menu item that goes upto two lines",
  value: false,
  icon: const Icon(FluentIcons.guest_24_filled),
  backgroundDark: true,
  onChanged: (value) {
    setState(() {
      _enable = value;
    });
  },
);

TUIToggleSwitch

Customised switch control matching the Tarka UI Kit theme, with enabled and disabled styles

Usage

Parameters

  • value: (Required) Value of the switch.
  • onChanged: Callback when the switch state is changed.

Example

TUISwitch(
    value: _enable,
    onChanged: (bool val) {
        setState(() {
            _enable = val;
        });
    },
);

TUITag

Useful for showing contextual information that is read-only.

TUITag

Usage

Parameters

  • tagIconType: (Required) TUITagIconType is used to define the position of the icon in the tag.
    • none
    • left
    • right
  • tagSize: (Required) IconSize, leftPadding, rightPadding, space between icon and text, tag height, text style, and vertical padding are computed based on tag size.
  • tagText: (Required) Content of the tag.
  • tagContrast: The text color and icon color are computed based on contrast, default value is TUITagContrast.low.
    • low
    • high

Example

TUITag(
    tagSize: TUITagSize.s,
    tagText: "Label",
    tagIconType: TUITagIconType.none,
);
Clone this wiki locally