š§© RaroUI ā Design System Flutter da RaroLabs
Sistema de design unificado e reutilizƔvel para aplicativos Flutter da RaroLabs.
š VisĆ£o Geral
O RaroUI fornece um conjunto de componentes visuais e temas centralizados que garantem consistĆŖncia e eficiĆŖncia no desenvolvimento de produtos mobile.
- š¦ Componentes reutilizĆ”veis
- š¤ Nomenclatura consistente
- š Suporte a tema claro e escuro
CompatĆvel com Flutter 3.32.x+.
š CatĆ”logo de Widgets
Visualize todos os componentes disponĆveis no RaroUI atravĆ©s do nosso catĆ”logo interativo:
š Acessar CatĆ”logo de Widgets
O catĆ”logo permite explorar todos os componentes, suas variaƧƵes e propriedades de forma interativa, facilitando a escolha e implementaĆ§Ć£o dos componentes em seus projetos.
Lista de componentes
Atomos
| Componente | DescriĆ§Ć£o |
|---|---|
| RAvatar | Elemento visual representando o usuƔrio. |
| RBadge | Indicador pequeno para mostrar contagem ou status. |
| RBalanceDisplay | Elemento para exibir saldo. |
| RCard | Container para exibir conteĆŗdo agrupado. |
| RCardFilled | Container prenchido para exibir conteĆŗdo agrupado. |
| RCardOutlined | Container realƧado para exibir conteĆŗdo agrupado. |
| RCheckbox | Caixa de seleĆ§Ć£o para formulĆ”rios. |
| RChipAssist | Pequeno bloco de informaĆ§Ć£o representando aƧƵes. |
| RChipFilter | Pequeno bloco de informaĆ§Ć£o para filtrar conteĆŗdo. |
| RChipInput | Pequeno bloco de informaĆ§Ć£o inseridos pelo usuĆ”rio. |
| RChipSuggestion | Pequeno bloco de informaĆ§Ć£o sugerida. |
| RDatePicker | Componente para seleĆ§Ć£o de datas. |
| RTimePicker | Componente para seleĆ§Ć£o de horĆ”rio. |
| RDivider | Linha separadora para conteĆŗdos. |
| RDropdownButton | BotĆ£o para seleĆ§Ć£o de opƧƵes. |
| RDropdownMenu | Menu suspenso para seleĆ§Ć£o de opƧƵes. |
| RIcon | Ćcone grĆ”fico. |
| RImage | Elemento visual para exibiĆ§Ć£o de imagens. |
| RLabel | Elemento para exibir textos. |
| RCircularProgressIndicator | Indicador de progresso de formato circular. |
| RLinearProgressIndicator | Indicador de progresso de formato linear. |
| RRadioButton | BotĆ£o de seleĆ§Ć£o exclusiva. |
| RRefreshIndicator | Elemento para representar atualizaĆ§Ć£o da pĆ”gina. |
| RRichText | Texto que pode incluir diferentes formatos, imagens, link, etc. |
| RSlider | Componente para seleĆ§Ć£o de valor. |
| RSliderRange | Componente para seleĆ§Ć£o a partir de uma faixa de valores. |
| RSwitch | Alterna a seleĆ§Ć£o de um item entre ativado ou desativado. |
| RTextField | Ćrea para entrada de texto. |
| RTextFormField | Ćrea para entrada de texto em um formulĆ”rio. |
| RTooltip | InformaĆ§Ć£o adicional a ser. |
Moleculas
| Componente | DescriĆ§Ć£o |
|---|---|
| RBottomSheet | Componente que desliza da parte de baixo da tela. |
| RElevatedButton | BotĆ£o de aĆ§Ć£o elevado. |
| RIconButton | BotĆ£o de aĆ§Ć£o em forma de Ćcone. |
| ROutlinedButton | BotĆ£o de aĆ§Ć£o com borda realƧada. |
| RTextButton | BotĆ£o de aĆ§Ć£o em forma de texto. |
| RFilledButton | BotĆ£o de aĆ§Ć£o com fundo preenchido. |
| RFilledButtonTonal | BotĆ£o de aĆ§Ć£o entre Filled e Outlined Button. |
| RFloatingActionButton | BotĆ£o de aĆ§Ć£o flutuante. |
| RFloatingActionButtonExtended | BotĆ£o de aĆ§Ć£o flutuante extendido. |
| RCardCarousel | Carrossel especĆfico de cards. |
| RCaroussel | Carrossel. |
| RDrawer | Container que se abre horizontalmente com conteĆŗdo. |
| RExpansionTile | Componente para exibir um item que se expande de uma lista. |
| RListTile | Componente para exibir um item de uma lista. |
| RModal | Janela modal para exibir conteĆŗdo adicional. |
| RMoneyInput | Componente para entrada de valor monetƔrio. |
| ROtpTimer | Componente para exibiĆ§Ć£o de cĆ³digo OTP. |
| RPinInput | Componente para entrada de senha ou cĆ³digo. |
| RSearchAnchor | Componente de pesquisa com sugestƵes. |
| RSearchBar | Componente de pesquisa. |
| RShortcut | Container de atalho para outras seƧƵes do app. |
| RSnackBar | Exibe pequenas atualizaƧƵes sobre processos do app na parte de baixo da tela. |
| RPrimaryTabBar | Interface principal de navegaĆ§Ć£o em abas. |
| RSecondaryTabBar | Interface secundĆ”ria de navegaĆ§Ć£o em abas. |
| RTitleSubtitle | Elemento para exibir tĆtulo e subtĆtulo. |
| RToast | NotificaĆ§Ć£o transitĆ³ria. |
Organismos
| Componente | DescriĆ§Ć£o |
|---|---|
| RAppBar | Elemento no topo da tela. |
| RBanner | Elemento visual para destaque de algo. |
| RCalendar | Componente de calendƔrio. |
| RDialog | Container que oferece informaƧƵes importantes ao usuƔrio. |
| RDialogFullscreen | Container que oferece informaƧƵes importantes ao usuƔrio e preenche toda a tela. |
| RSearchModal | Janela modal para pesquisa. |
| RSliverAppBar | Elemento no topo da tela flexĆvel. |
| RSliverAppBarMedium | Elemento no topo da tela flexĆvel de tamanho mĆ©dio. |
| RSliverAppBarLarge | Elemento no topo da tela flexĆvel de tamanho grande. |
| RTabPix | Interface de navegaĆ§Ć£o para ser usado no fluxo pix. |
Feito com ā¤ļø pela RaroLabs
Libraries
- components/atoms/atoms
- components/atoms/avatar/avatar
- components/atoms/badge/badge
- components/atoms/balance_display/balance_display
- components/atoms/cards/card
- components/atoms/cards/card_filled
- components/atoms/cards/card_outlined
- components/atoms/checkbox/checkbox
- components/atoms/chips/chip_assist
- components/atoms/chips/chip_filter
- components/atoms/chips/chip_input
- components/atoms/chips/chip_suggestion
- components/atoms/date_time_pickers/date_picker
- components/atoms/date_time_pickers/time_picker
- components/atoms/divider/divider
- components/atoms/icon/icon
- components/atoms/image/image
- components/atoms/label/label
- components/atoms/loading/circular_progress_indicator
- components/atoms/loading/linear_progress_indicator
- components/atoms/refresh_indicator/refresh_indicator
- components/atoms/rich_text/rich_text
- components/atoms/slider/slider
- components/atoms/slider/slider_range
- components/atoms/switch/switch
- components/atoms/text_field/text_field
- components/atoms/text_field/text_form_field
- components/atoms/tooltip/tooltip
- components/molecules/bottom_sheet/bottom_sheet
- components/molecules/card_carousel/card_carousel
- components/molecules/caroussel/caroussel
- components/molecules/drawer/drawer
- components/molecules/expansion_tile/expansion_tile
- components/molecules/list_tile/list_tile
- components/molecules/modal/modal
- components/molecules/molecules
- components/molecules/money_input/money_input
- components/molecules/otp_timer/otp_timer
- components/molecules/pin_input/pin_input
- components/molecules/search_anchor/search_anchor
- components/molecules/search_bar/search_bar
- components/molecules/shortcut/shortcut
- components/molecules/snack_bar/snack_bar
- components/molecules/tabs/primary_tab
- components/molecules/tabs/primary_tab_bar
- components/molecules/tabs/secondary_tab
- components/molecules/tabs/secondary_tab_bar
- components/molecules/title_subtitle/title_subtitle
- components/molecules/toast/toast
- components/organisms/app_bar/app_bar
- components/organisms/calendar/calendar
- components/organisms/dialogs/dialog
- components/organisms/dialogs/dialog_fullscreen
- components/organisms/multiple_selector_field/multiple_selector_field
- components/organisms/organisms
- components/organisms/search_modal/search_modal
- components/organisms/sliver_app_bar/sliver_app_bar
- components/organisms/sliver_app_bar/sliver_app_bar_large
- components/organisms/sliver_app_bar/sliver_app_bar_medium
- components/organisms/tab_pix/tab_pix
- components/organisms/tab_pix/tab_pix_list_tile_entity
- components/templates/demo/material_demo_page
- components/templates/demo/theme_demo_page
- components/templates/templates
- rarui
- utils/constants
- utils/enums/coin_type
- utils/enums/key_pix_type
- utils/extensions/money_formatter_extension
- utils/extensions/theme_extension