Senior Design System
Projeto com a implementação dos componente do Senior Design System para aplicações móveis em Flutter. Disponibiliza uma série de componentes que podem ser usados na interfaces dos aplicativos.
Primeiros passos
Para adicionar o Senior Design System na sua aplicação você pode usar diretamente o nosso pacote publicado no Pub.dev. Adicione o pacote como uma dependência no seu arquivo pubspec.yaml ou utilize o comando flutter pub add senior_design_system.
Temos outro pacote para os nossos tokens que recomendamos adicionar no projeto também. Você pode encontrá-lo também no Pub.dev como senior_design_tokens.
Como usar
Para usar os nossos componentes no seu projeto você primeiramente precisa importar o nosso pacote e o pacote de tokens.
import 'package:senior_design_system/senior_design_system.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';
Após isso adicione o widget SeniorDesignSystem no ponto mais alto possível da sua árvore de widgets. Este widget irá adicionar configurações necessárias para os componentes na sua aplicações e também disponibilizará um gerenciamento de temas próprio dos componentes do Senior Design System.
void main() {
runApp(
SeniorDesignSystem(
theme: SENIOR_LIGHT_THEME,
child: MyApp(),
),
);
}
Agora você só precisa adicionar o componente que quiser onde precisar! No exemplo abaixo estamos adicionando o componente SeniorButton dentro de um componente chamado Panel, um componente genérico para este exemplo.
Panel(
title: 'Primary button',
child: SeniorButton(
label: 'Salvar',
onPressed: () => _showSnackbar(
context: context,
message: 'Clicou sobre o botão Salvar!',
),
disabled: _isDisabled,
fullLength: true,
size: SeniorButtonSize.big,
type: SeniorButtonType.primary,
),
),
Equipe e contribuições
Este projeto é desenvolvido e mantido pela equipe de design da Senior Sistemas e recebe contribuições de toda a equipe de desenvolvimento. Se desejar sugerir alguma implementação ou melhoria entre em contato com a nossa equipe 😉
Libraries
- components/senior_backdrop/themes/dark/_backdrop_dark
- components/senior_backdrop/themes/light/_backdrop_light
- components/senior_balance/themes/dark/_balance_dark
- components/senior_balance/themes/light/_balance_light
- components/senior_bottom_sheet/themes/dark/_bottom_sheet_dark
- components/senior_bottom_sheet/themes/light/_bottom_sheet_light
- components/senior_calendar/themes/dark/_calendar_theme_dark
- components/senior_calendar/themes/light/_calendar_theme_light
- components/senior_card/themes/dark/_card_dark
- components/senior_card/themes/light/_card_light
- components/senior_carousel_slider/themes/dark/_carousel_slider_dark
- components/senior_carousel_slider/themes/light/_carousel_slider_light
- components/senior_checkbox/themes/light/_checkbox._light
- components/senior_checkbox/themes/dark/_checkbox_dark
- components/senior_colorful_header_structure/themes/dark/_colorful_header_structure_dark
- components/senior_colorful_header_structure/themes/light/_colorful_header_structure_light
- components/senior_contact_book_item/themes/dark/_contact_book_item_theme_dark
- components/senior_contact_book_item/themes/light/_contact_book_item_theme_light
- components/senior_drawer/themes/dark/_drawer_dark
- components/senior_drawer/themes/light/_drawer_light
- components/senior_snackbar/themes/dark/_error_snackbar_dark
- components/senior_snackbar/themes/light/_error_snackbar_light
- components/senior_expandable_list/themes/dark/_expandable_list_dark
- components/senior_expandable_list/themes/light/_expandable_list_light
- components/senior_expansion_panel_list/themes/dark/_expansion_panel_list_theme_dark
- components/senior_expansion_panel_list/themes/light/_expansion_panel_list_theme_light
- components/senior_gradient_icon/themes/dark/_gradient_icon_theme_dark
- components/senior_gradient_icon/themes/light/_gradient_icon_theme_light
- components/senior_image_cropper/themes/dark/_image_cropper_theme_dark
- components/senior_image_cropper/themes/light/_image_cropper_theme_light
- components/senior_info_card/themes/dark/_info_card_theme_dark
- components/senior_info_card/themes/light/_info_card_theme_light
- components/senior_list/themes/dark/_list_theme_dark
- components/senior_list/themes/light/_list_theme_light
- components/senior_loading/themes/dark/_loading_dark
- components/senior_loading/themes/light/_loading_light
- components/senior_message_card/themes/dark/_message_card_theme_dark
- components/senior_message_card/themes/light/_message_card_theme_light
- components/senior_snackbar/themes/dark/_message_snackbar_dark
- components/senior_snackbar/themes/light/_message_snackbar_light
- components/senior_modal/themes/dark/_modal_dark
- components/senior_modal/themes/light/_modal_light
- components/senior_notification_list/themes/dark/_notification_list_theme_dark
- components/senior_notification_list/themes/light/_notification_list_theme_light
- components/senior_notification_snackbar/themes/dark/_notification_snackbar_dark
- components/senior_notification_snackbar/themes/light/_notification_snackbar_light
- components/senior_pin_code_field/themes/dark/_pin_code_field_dark
- components/senior_pin_code_field/themes/light/_pin_code_field_light
- components/senior_profile_picture/themes/dark/_profile_picture_dark
- components/senior_profile_picture/themes/light/_profile_picture_light
- components/senior_progress_bar/themes/dark/_progress_bar_dark
- components/senior_progress_bar/themes/light/_progress_bar_light
- components/senior_quotes/themes/dark/_quotes_dark
- components/senior_quotes/themes/light/_quotes_light
- components/senior_rating/themes/dark/_rating_dark
- components/senior_rating/themes/light/_rating_light
- components/senior_signature/themes/dark/_signature_dark
- components/senior_signature/themes/light/_signature_light
- components/senior_slide_to_act/themes/dark/_slide_to_act_theme_dark
- components/senior_slide_to_act/themes/light/_slide_to_act_theme_light
- components/senior_slider_dots/themes/dark/_slider_dots_theme_dark
- components/senior_slider_dots/themes/light/_slider_dots_theme_light
- components/senior_state_page/themes/dark/_state_page_theme_dark
- components/senior_state_page/themes/light/_state_page_theme_light
- components/senior_stepper/themes/dark/_stepper_dark
- components/senior_stepper/themes/light/_stepper_light
- components/senior_success_animation/themes/dark/_success_animation_dark
- components/senior_success_animation/themes/light/_success_animation_light
- components/senior_snackbar/themes/dark/_success_snackbar_dark
- components/senior_snackbar/themes/light/_success_snackbar_light
- components/senior_switch/themes/dark/_switch_dark
- components/senior_switch/themes/light/_switch_light
- components/senior_tab_bar/themes/dark/_tab_bar_dark
- components/senior_tab_bar/themes/light/_tab_bar_light
- components/senior_text/themes/dark/_text_dark
- components/senior_text_field/themes/dark/_text_field_dark
- components/senior_text_field/themes/light/_text_field_light
- components/senior_text/themes/light/_text_light
- components/senior_timeline/themes/dark/_timeline_dark
- components/senior_timeline/themes/light/_timeline_light
- components/senior_snackbar/themes/dark/_warning_snackbar_dark
- components/senior_snackbar/themes/light/_warning_snackbar_light
- components/senior_colorful_header_structure/models/action_notification
- components/senior_card/models/card_border_position
- components/senior_card/models/card_checkbox_config
- components/senior_card/models/card_checkbox_position
- components/senior_card/models/card_dismissible_action
- components/senior_card/models/card_dismissible_config
- components/senior_card/models/card_highlight_border
- components/senior_expandable_list/components/components
- components/senior_button/components/components
- components/components
- components/senior_calendar/components/components
- components/senior_text_field/components/components
- theme/themes/dark_theme
- components/senior_text_field/themes/dark/dark_themes
- components/senior_gradient_icon/themes/dark/dark_themes
- components/senior_card/themes/dark/dark_themes
- components/senior_square_buttons_menu/themes/dark/dark_themes
- components/senior_slider_dots/themes/dark/dark_themes
- components/senior_switch/themes/dark/dark_themes
- components/senior_balance/themes/dark/dark_themes
- components/senior_carousel_slider/themes/dark/dark_themes
- components/senior_image_cropper/themes/dark/dark_themes
- components/senior_slide_to_act/themes/dark/dark_themes
- components/senior_backdrop/themes/dark/dark_themes
- components/senior_stepper/themes/dark/dark_themes
- components/senior_modal/themes/dark/dark_themes
- components/senior_message_card/themes/dark/dark_themes
- components/senior_expandable_list/themes/dark/dark_themes
- components/senior_checkbox/themes/dark/dark_themes
- components/senior_rating/themes/dark/dark_themes
- components/senior_timeline/themes/dark/dark_themes
- components/senior_snackbar/themes/dark/dark_themes
- components/senior_bottom_navigation_bar/themes/dark/dark_themes
- components/senior_text/themes/dark/dark_themes
- components/senior_notification_snackbar/themes/dark/dark_themes
- components/senior_signature/themes/dark/dark_themes
- components/senior_button/themes/dark/dark_themes
- components/senior_progress_bar/themes/dark/dark_themes
- components/senior_quotes/themes/dark/dark_themes
- components/senior_menu_list_item/themes/dark/dark_themes
- components/senior_drawer/themes/dark/dark_themes
- components/senior_list/themes/dark/dark_themes
- components/senior_icon_button/themes/dark/dark_themes
- components/senior_state_page/themes/dark/dark_themes
- components/senior_info_card/themes/dark/dark_themes
- components/senior_pin_code_field/themes/dark/dark_themes
- components/senior_bottom_sheet/themes/dark/dark_themes
- components/senior_radio_button/themes/dark/dark_themes
- components/senior_loading/themes/dark/dark_themes
- components/senior_tab_bar/themes/dark/dark_themes
- components/senior_notification_list/themes/dark/dark_themes
- components/senior_circular_long_press_button/themes/dark/dark_themes
- components/senior_contact_book_item/themes/dark/dark_themes
- components/senior_colorful_header_structure/themes/dark/dark_themes
- components/senior_profile_picture/themes/dark/dark_themes
- components/senior_expansion_panel_list/themes/dark/dark_themes
- components/senior_calendar/themes/dark/dark_themes
- components/senior_success_animation/themes/dark/dark_themes
- components/senior_dropdown_button/themes/dark/dark_themes
- components/senior_calendar/components/header_chevron_icon
- components/senior_list/models/item_type
- theme/themes/light_theme
- components/senior_tab_bar/themes/light/light_themes
- components/senior_notification_snackbar/themes/light/light_themes
- components/senior_balance/themes/light/light_themes
- components/senior_notification_list/themes/light/light_themes
- components/senior_calendar/themes/light/light_themes
- components/senior_stepper/themes/light/light_themes
- components/senior_rating/themes/light/light_themes
- components/senior_list/themes/light/light_themes
- components/senior_carousel_slider/themes/light/light_themes
- components/senior_slide_to_act/themes/light/light_themes
- components/senior_contact_book_item/themes/light/light_themes
- components/senior_bottom_sheet/themes/light/light_themes
- components/senior_profile_picture/themes/light/light_themes
- components/senior_menu_list_item/themes/light/light_themes
- components/senior_square_buttons_menu/themes/light/light_themes
- components/senior_slider_dots/themes/light/light_themes
- components/senior_backdrop/themes/light/light_themes
- components/senior_snackbar/themes/light/light_themes
- components/senior_gradient_icon/themes/light/light_themes
- components/senior_quotes/themes/light/light_themes
- components/senior_checkbox/themes/light/light_themes
- components/senior_card/themes/light/light_themes
- components/senior_radio_button/themes/light/light_themes
- components/senior_drawer/themes/light/light_themes
- components/senior_circular_long_press_button/themes/light/light_themes
- components/senior_text_field/themes/light/light_themes
- components/senior_image_cropper/themes/light/light_themes
- components/senior_expansion_panel_list/themes/light/light_themes
- components/senior_progress_bar/themes/light/light_themes
- components/senior_loading/themes/light/light_themes
- components/senior_icon_button/themes/light/light_themes
- components/senior_info_card/themes/light/light_themes
- components/senior_pin_code_field/themes/light/light_themes
- components/senior_modal/themes/light/light_themes
- components/senior_expandable_list/themes/light/light_themes
- components/senior_signature/themes/light/light_themes
- components/senior_colorful_header_structure/themes/light/light_themes
- components/senior_text/themes/light/light_themes
- components/senior_dropdown_button/themes/light/light_themes
- components/senior_timeline/themes/light/light_themes
- components/senior_bottom_navigation_bar/themes/light/light_themes
- components/senior_message_card/themes/light/light_themes
- components/senior_success_animation/themes/light/light_themes
- components/senior_switch/themes/light/light_themes
- components/senior_state_page/themes/light/light_themes
- components/senior_button/themes/light/light_themes
- components/senior_colorful_header_structure/models/message_types
- components/senior_colorful_header_structure/models/models
- components/senior_text/models/models
- components/senior_list/models/models
- components/senior_card/models/models
- components/senior_calendar/models/models
- components/senior_button/models/models
- components/senior_colorful_header_structure/models/notification_message
- repositories/repositories
- components/senior_backdrop/senior_backdrop
- components/senior_backdrop/senior_backdrop_style
- components/senior_backdrop/models/senior_backdrop_tab_bar_info
- components/senior_backdrop/senior_backdrop_theme
- components/senior_backdrop/senior_backdrop_widget
- components/senior_badge/senior_badge
- components/senior_badge/components/senior_badge_base
- components/senior_badge/models/senior_badge_icon_position
- components/senior_badge/models/senior_badge_shape
- components/senior_badge/senior_badge_widget
- components/senior_balance/senior_balance
- components/senior_balance/senior_balance_style
- components/senior_balance/senior_balance_theme
- components/senior_balance/senior_balance_widget
- components/senior_bottom_sheet/senior_bottom_sheet
- components/senior_bottom_sheet/senior_bottom_sheet_style
- components/senior_bottom_sheet/senior_bottom_sheet_theme
- components/senior_bottom_sheet/senior_bottom_sheet_widget
- components/senior_calendar/senior_calendar
- components/senior_calendar/components/senior_calendar_header
- components/senior_calendar/senior_calendar_style
- components/senior_calendar/senior_calendar_theme
- components/senior_calendar/senior_calendar_widget
- components/senior_card/senior_card
- components/senior_card/senior_card_style
- components/senior_card/senior_card_theme
- components/senior_card/senior_card_widget
- components/senior_carousel_slider/senior_carousel_slider
- components/senior_carousel_slider/senior_carousel_slider_style
- components/senior_carousel_slider/senior_carousel_slider_theme
- components/senior_carousel_slider/senior_carousel_slider_widget
- components/senior_checkbox/senior_checkbox
- components/senior_checkbox/senior_checkbox_style
- components/senior_checkbox/senior_checkbox_theme
- components/senior_checkbox/senior_checkbox_widget
- components/senior_calendar/components/senior_clip_patch
- components/senior_colorful_header_structure/senior_colorful_header_structure
- components/senior_colorful_header_structure/senior_colorful_header_structure_style
- components/senior_colorful_header_structure/senior_colorful_header_structure_theme
- components/senior_colorful_header_structure/senior_colorful_header_structure_widget
- components/senior_contact_book_item/senior_contact_book_item
- components/senior_contact_book_item/senior_contact_book_item_style
- components/senior_contact_book_item/senior_contact_book_item_theme
- components/senior_contact_book_item/senior_contact_book_item_widget
- components/senior_calendar/components/senior_default_marked_day
- components/senior_design_system/senior_design_system
- senior_design_system
- components/senior_design_system/senior_design_system_widget
- components/senior_draggable_list/senior_draggable_list
- components/senior_drawer/senior_drawer
- components/senior_drawer/senior_drawer_style
- components/senior_drawer/senior_drawer_theme
- components/senior_drawer/senior_drawer_widget
- components/senior_elevated_element/senior_elevated_element
- components/senior_elevated_element/senior_elevated_element_wiget
- components/senior_calendar/models/senior_event_calendar
- components/senior_calendar/models/senior_event_list_calendar
- components/senior_expandable_list/senior_expandable_list
- components/senior_expandable_list/components/senior_expandable_list_item/senior_expandable_list_item
- components/senior_expandable_list/models/senior_expandable_list_item_data
- components/senior_expandable_list/senior_expandable_list_style
- components/senior_expandable_list/senior_expandable_list_theme
- components/senior_expandable_list/senior_expandable_list_widget
- components/senior_expansion_panel_list/senior_expansion_panel_list
- components/senior_expansion_panel_list/senior_expansion_panel_list_style
- components/senior_expansion_panel_list/senior_expansion_panel_list_theme
- components/senior_expansion_panel_list/senior_expansion_panel_list_widget
- components/senior_calendar/components/senior_forms_clipper
- components/senior_calendar/components/senior_forms_enum
- components/senior_calendar/components/senior_gesture_bottom
- components/senior_gradient_icon/senior_gradient_icon
- components/senior_gradient_icon/senior_gradient_icon_style
- components/senior_gradient_icon/senior_gradient_icon_theme
- components/senior_gradient_icon/senior_gradient_icon_widget
- components/senior_image_cropper/senior_image_cropper
- components/senior_image_cropper/senior_image_cropper_style
- components/senior_image_cropper/senior_image_cropper_theme
- components/senior_image_cropper/senior_image_cropper_widget
- components/senior_info_card/senior_info_card
- components/senior_info_card/senior_info_card_style
- components/senior_info_card/senior_info_card_theme
- components/senior_info_card/senior_info_card_widget
- components/senior_list/senior_list
- components/senior_list/models/senior_list_item
- components/senior_list/senior_list_style
- components/senior_list/senior_list_theme
- components/senior_list/senior_list_widget
- components/senior_loading/senior_loading
- components/senior_loading/senior_loading_style
- components/senior_loading/senior_loading_theme
- components/senior_loading/senior_loading_widget
- components/senior_message_card/senior_message_card
- components/senior_message_card/senior_message_card_style
- components/senior_message_card/senior_message_card_theme
- components/senior_message_card/senior_message_card_widget
- components/senior_modal/senior_modal
- components/senior_modal/model/senior_modal_action
- components/senior_modal/model/senior_modal_definitions
- components/senior_modal/senior_modal_style
- components/senior_modal/senior_modal_theme
- components/senior_modal/senior_modal_widget
- components/senior_notification_list/senior_notification_list
- components/senior_notification_list/models/senior_notification_list_item_severity
- components/senior_notification_list/senior_notification_list_style
- components/senior_notification_list/senior_notification_list_theme
- components/senior_notification_list/senior_notification_list_widget
- components/senior_notification_snackbar/senior_notification_snackbar
- components/senior_notification_snackbar/senior_notification_snackbar_style
- components/senior_notification_snackbar/senior_notification_snackbar_theme
- components/senior_notification_snackbar/senior_notification_snackbar_widget
- components/senior_pin_code_field/senior_pin_code_field
- components/senior_pin_code_field/senior_pin_code_field_style
- components/senior_pin_code_field/senior_pin_code_field_theme
- components/senior_pin_code_field/senior_pin_code_field_widget
- components/senior_profile_picture/senior_profile_picture
- components/senior_profile_picture/senior_profile_picture_style
- components/senior_profile_picture/senior_profile_picture_theme
- components/senior_profile_picture/senior_profile_picture_widget
- components/senior_progress_bar/senior_progress_bar
- components/senior_progress_bar/senior_progress_bar_style
- components/senior_progress_bar/senior_progress_bar_theme
- components/senior_progress_bar/senior_progress_bar_widget
- components/senior_quotes/senior_quotes
- components/senior_quotes/senior_quotes_style
- components/senior_quotes/senior_quotes_theme
- components/senior_quotes/senior_quotes_widget
- components/senior_rating/senior_rating
- components/senior_rating/senior_rating_style
- components/senior_rating/senior_rating_theme
- components/senior_rating/senior_rating_widget
- components/senior_signature/senior_signature
- components/senior_signature/senior_signature_style
- components/senior_signature/senior_signature_theme
- components/senior_signature/senior_signature_view
- components/senior_signature/senior_signature_widget
- components/senior_slide_to_act/senior_slide_to_act
- components/senior_slide_to_act/senior_slide_to_act_style
- components/senior_slide_to_act/senior_slide_to_act_theme
- components/senior_slide_to_act/senior_slide_to_act_widget
- components/senior_slider_dots/senior_slider_dots
- components/senior_slider_dots/senior_slider_dots_style
- components/senior_slider_dots/senior_slider_dots_theme
- components/senior_slider_dots/senior_slider_dots_widget
- components/senior_snackbar/senior_snackbar
- components/senior_snackbar/senior_snackbar_style
- components/senior_snackbar/senior_snackbar_theme
- components/senior_snackbar/senior_snackbar_widget
- components/senior_state_page/senior_state_page
- components/senior_state_page/senior_state_page_icon
- components/senior_state_page/senior_state_page_image
- components/senior_state_page/senior_state_page_style
- components/senior_state_page/senior_state_page_theme
- components/senior_state_page/senior_state_page_widget
- components/senior_stepper/senior_stepper
- components/senior_stepper/senior_stepper_style
- components/senior_stepper/senior_stepper_theme
- components/senior_stepper/senior_stepper_widget
- components/senior_calendar/components/senior_stroke_top
- components/senior_success_animation/senior_success_animation
- components/senior_success_animation/senior_success_animation_style
- components/senior_success_animation/senior_success_animation_theme
- components/senior_success_animation/senior_success_animation_widget
- components/senior_switch/senior_switch
- components/senior_switch/senior_switch_style
- components/senior_switch/senior_switch_theme
- components/senior_switch/senior_switch_widget
- components/senior_tab_bar/senior_tab_bar
- components/senior_tab_bar/senior_tab_bar_style
- components/senior_tab_bar/senior_tab_bar_theme
- components/senior_tab_bar/senior_tab_bar_widget
- components/senior_text/senior_text
- components/senior_text_field/senior_text_field
- components/senior_text_field/components/senior_text_field_password_widget
- components/senior_text_field/senior_text_field_style
- components/senior_text_field/senior_text_field_theme
- components/senior_text_field/components/senior_text_field_widget
- components/senior_text/senior_text_style
- components/senior_text/senior_text_theme
- components/senior_text/senior_text_widget
- theme/senior_theme_data
- components/senior_timeline/senior_timeline
- components/senior_timeline/senior_timeline_style
- components/senior_timeline/senior_timeline_theme
- components/senior_timeline/senior_timeline_widget
- components/senior_signature/models/signature
- components/senior_colorful_header_structure/models/tab_bar_config
- components/senior_text/models/text_properties
- repositories/theme_repository
- components/senior_menu_list_item/themes/themes
- components/senior_loading/themes/themes
- components/senior_square_buttons_menu/themes/themes
- components/senior_success_animation/themes/themes
- components/senior_state_page/themes/themes
- components/senior_notification_snackbar/themes/themes
- components/senior_checkbox/themes/themes
- components/senior_expandable_list/themes/themes
- components/senior_notification_list/themes/themes
- components/senior_switch/themes/themes
- components/senior_slider_dots/themes/themes
- components/senior_message_card/themes/themes
- components/senior_timeline/themes/themes
- components/senior_info_card/themes/themes
- components/senior_signature/themes/themes
- components/senior_stepper/themes/themes
- components/senior_expansion_panel_list/themes/themes
- components/senior_pin_code_field/themes/themes
- components/senior_text/themes/themes
- components/senior_modal/themes/themes
- components/senior_circular_long_press_button/themes/themes
- components/senior_icon_button/themes/themes
- components/senior_progress_bar/themes/themes
- components/senior_backdrop/themes/themes
- components/senior_balance/themes/themes
- components/senior_colorful_header_structure/themes/themes
- components/senior_bottom_sheet/themes/themes
- components/senior_contact_book_item/themes/themes
- components/senior_dropdown_button/themes/themes
- components/senior_rating/themes/themes
- components/senior_slide_to_act/themes/themes
- theme/themes/themes
- components/senior_snackbar/themes/themes
- components/senior_drawer/themes/themes
- components/senior_quotes/themes/themes
- components/senior_button/themes/themes
- components/senior_tab_bar/themes/themes
- components/senior_bottom_navigation_bar/themes/themes
- components/senior_gradient_icon/themes/themes
- components/senior_carousel_slider/themes/themes
- components/senior_radio_button/themes/themes
- components/senior_calendar/themes/themes_calendar
- components/senior_card/themes/themes_card
- components/senior_list/themes/themes_list
- components/senior_profile_picture/themes/themes_profile_picture
- components/senior_text/utils/typographies