senior_design_system 7.0.7

All of our Senior design system components for building mobile apps.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import 'package:senior_design_system/senior_design_system.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

import 'pages/animation.example.dart';
import 'pages/badge.example.dart';
import 'pages/balance.example.dart';
import 'pages/bottom_sheet.example.dart';
import 'pages/button.example.dart';
import 'pages/calendar_exemple.dart';
import 'pages/card.example.dart';
import 'pages/carousel_slider.example.dart';
import 'pages/checkbox.example.dart';
import 'pages/circular_long_press_button.example.dart';
import 'pages/contact_book_item.dart';
import 'pages/draggable_list.example.dart';
import 'pages/dropdown_button.example.dart';
import 'pages/expandable_list.example.dart';
import 'pages/expansion_panel.example.dart';
import 'pages/gradient_icon.example.dart';
import 'pages/icon_button.example.dart';
import 'pages/image_cropper.example.dart';
import 'pages/info_card.example.dart';
import 'pages/linear_long_press_button.example.dart';
import 'pages/list.example.dart';
import 'pages/loading.example.dart';
import 'pages/menu_list_item_example.dart';
import 'pages/message_card.example.dart';
import 'pages/modal.example.dart';
import 'pages/notification_list.example.dart';
import 'pages/notification_snackbar_example.dart';
import 'pages/pin_code_field.example.dart';
import 'pages/profile_picture_example.dart';
import 'pages/progress_bar.example.dart';
import 'pages/quotes_example.dart';
import 'pages/radio_button.example.dart';
import 'pages/rating.example.dart';
import 'pages/signature.example.dart';
import 'pages/slide_to_act.example.dart';
import 'pages/slider_dots.example.dart';
import 'pages/snackbar.example.dart';
import 'pages/square_buttons_menu.example.dart';
import 'pages/state_page_icon.example.dart';
import 'pages/state_page_image.example.dart';
import 'pages/stepper.example.dart';
import 'pages/success_animation.example.dart';
import 'pages/switch.example.dart';
import 'pages/text.example.dart';
import 'pages/text_field.example.dart';
import 'pages/timeline.example.dart';

void main() {
  runApp(
    SeniorDesignSystem(
      theme: SENIOR_LIGHT_THEME,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Senior Design System Showcase',
      home: HomePage(),
      theme: Provider.of<ThemeRepository>(context).theme.themeData,
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final PageController _pageController = PageController();
  NotificationMessage? notificationMessage;
  int tabIndex = 0;

  void updateMessageNotificationState() {
    setState(() {
      notificationMessage = NotificationMessage(
        message: 'Tivemos problemas pra registrar seu ponto.',
        messageType: MessageTypes.messageError,
        icon: FontAwesomeIcons.solidCircleCheck,
        timeout: const Duration(seconds: 5),
        actionNotification: ActionNotification(
          actionName: 'Tentar Novamente',
          action: actionFuncionNotification,
        ),
      );
    });
  }

  void actionFuncionNotification() {
    setState(() {
      notificationMessage = const NotificationMessage(
        message: 'Mudou.',
        messageType: MessageTypes.messageSuccess,
        icon: FontAwesomeIcons.circleCheck,
        timeout: const Duration(seconds: 5),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    final drawerItems = examplePages
        .asMap()
        .map(
          (pos, page) => MapEntry(
            pos,
            SeniorDrawerItem(
              icon: page.icon,
              onTap: () => _pageController.jumpToPage(pos),
              title: page.title,
              type: DrawerItemType.neutral,
            ),
          ),
        )
        .values
        .toList();

    final _tabBarConfig = TabBarConfig(
      tabIndex: tabIndex,
      onSelect: (int tab) {
        tabIndex = tab;
        _pageController.jumpToPage(tab);
      },
      tabs: ['Aba 1', 'Aba 2', 'Aba 3', 'Aba 4'],
    );

    return Consumer<ThemeRepository>(
      builder: (context, repository, child) => Scaffold(
        key: _scaffoldKey,
        body: SeniorColorfulHeaderStructure(
          notification: notificationMessage,
          actions: [
            Padding(
              padding: const EdgeInsets.all(SeniorSpacing.xxxsmall),
              child: SeniorIconButton(
                icon: repository.isLightTheme()
                    ? FontAwesomeIcons.moon
                    : FontAwesomeIcons.sun,
                onTap: () {
                  if (repository.isLightTheme()) {
                    repository.theme = SENIOR_DARK_THEME;
                  } else {
                    repository.theme = SENIOR_LIGHT_THEME;
                  }
                },
                size: SeniorIconButtonSize.small,
                type: SeniorIconButtonType.ghost,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(SeniorSpacing.xxxsmall),
              child: SeniorIconButton(
                icon: FontAwesomeIcons.message,
                onTap: () {
                  updateMessageNotificationState();
                },
                size: SeniorIconButtonSize.small,
                type: SeniorIconButtonType.ghost,
              ),
            ),
          ],
          hasTopPadding: false,
          title: const Text('Senior Design System'),
          hideLeading: false,
          leading: IconButton(
            iconSize: SeniorIconSize.small,
            icon: const FaIcon(FontAwesomeIcons.bars),
            color: SeniorColors.pureWhite,
            onPressed: () => _scaffoldKey.currentState!.openDrawer(),
          ),
          body: PageView.builder(
            controller: _pageController,
            itemBuilder: (context, pos) =>
                examplePages.map((page) => page.pageComponent).toList()[pos],
            itemCount: examplePages.length,
            onPageChanged: (value) => setState(() {
              tabIndex = value;
            }),
          ),
          tabBarConfig: _tabBarConfig,
        ),
        drawer: SeniorDrawer(
          items: drawerItems,
          svgLogoPath: 'assets/images/logo-name.svg',
          footerText: 'total de ${examplePages.length} componentes exibidos',
          profilePicture: const SeniorProfilePicture(
            name: 'Albert Einstein',
            radius: 24.0,
            imageProvider: AssetImage('assets/images/albert-einstein.jpg'),
          ),
          profileTitle: 'Albert Einstein',
          profileSubtitle: 'Físico',
        ),
      ),
    );
  }
}

final List<Page> examplePages = [
  const Page(
    title: 'Badge',
    icon: FontAwesomeIcons.solidIdBadge,
    pageComponent: BadgeExemple(),
  ),
  const Page(
    title: 'Image Cropper',
    icon: FontAwesomeIcons.camera,
    pageComponent: ImageCropperExample(),
  ),
  const Page(
    title: 'Button',
    icon: FontAwesomeIcons.stop,
    pageComponent: ButtonExample(),
  ),
  const Page(
    title: 'Animation',
    icon: FontAwesomeIcons.radiation,
    pageComponent: AnimationExample(),
  ),
  const Page(
    title: 'Balance',
    icon: FontAwesomeIcons.scaleBalanced,
    pageComponent: BalanceExample(),
  ),
  const Page(
    title: 'Bottom Sheet',
    icon: FontAwesomeIcons.arrowUpFromBracket,
    pageComponent: BottomSheetExample(),
  ),
  const Page(
    title: 'Card',
    icon: FontAwesomeIcons.addressCard,
    pageComponent: CardExample(),
  ),
  const Page(
    title: 'Carousel Slider',
    icon: FontAwesomeIcons.image,
    pageComponent: CarouselSliderExample(),
  ),
  const Page(
    title: 'Calendar',
    icon: FontAwesomeIcons.calendar,
    pageComponent: CalendarExemple(),
  ),
  const Page(
    title: 'Checkbox',
    icon: FontAwesomeIcons.squareCheck,
    pageComponent: CheckboxExample(),
  ),
  const Page(
    title: 'Contact Book Item',
    icon: FontAwesomeIcons.addressBook,
    pageComponent: ContactBookItemExample(),
  ),
  const Page(
    title: 'Draggable List',
    icon: FontAwesomeIcons.scribd,
    pageComponent: DraggableListExample(),
  ),
  const Page(
    title: 'Dropdown Button',
    icon: FontAwesomeIcons.caretDown,
    pageComponent: DropdownButtonExample(),
  ),
  const Page(
    title: 'Expansion Panel',
    icon: FontAwesomeIcons.addressCard,
    pageComponent: ExpansionPanelExample(),
  ),
  const Page(
    title: 'Expandable List',
    icon: FontAwesomeIcons.addressCard,
    pageComponent: ExpandableListExample(),
  ),
  const Page(
    title: 'Gradient Icon',
    icon: FontAwesomeIcons.faceSmile,
    pageComponent: SeniorGradientIconExample(),
  ),
  const Page(
    title: 'Icon Button',
    icon: FontAwesomeIcons.circle,
    pageComponent: IconButtonExample(),
  ),
  const Page(
    title: 'Info Card',
    icon: FontAwesomeIcons.addressCard,
    pageComponent: InfoCardExample(),
  ),
  const Page(
    title: 'List',
    icon: FontAwesomeIcons.list,
    pageComponent: ListExample(),
  ),
  const Page(
    title: 'Loading',
    icon: FontAwesomeIcons.spinner,
    pageComponent: LoadingExample(),
  ),
  const Page(
    title: 'Circular Long Press Button',
    icon: FontAwesomeIcons.fingerprint,
    pageComponent: CircularLongPressButtonExample(),
  ),
  const Page(
    title: 'Linear Long Press Button',
    icon: FontAwesomeIcons.arrowRight,
    pageComponent: LinearLongPressButtonExample(),
  ),
  const Page(
    title: 'Menu List Item',
    icon: FontAwesomeIcons.list,
    pageComponent: MenuListItemExample(),
  ),
  const Page(
    title: 'Message Card',
    icon: FontAwesomeIcons.addressCard,
    pageComponent: MessageCardExample(),
  ),
  const Page(
    title: 'Modal',
    icon: FontAwesomeIcons.square,
    pageComponent: ModalExample(),
  ),
  const Page(
    title: 'Notification List',
    icon: FontAwesomeIcons.list,
    pageComponent: NotificationListExample(),
  ),
  const Page(
    title: 'Notification Snackbar',
    icon: FontAwesomeIcons.cookieBite,
    pageComponent: NotificationSnackbarExample(),
  ),
  const Page(
    title: 'Pin Code Field',
    icon: FontAwesomeIcons.linesLeaning,
    pageComponent: PinCodeFieldsExample(),
  ),
  const Page(
    title: 'Profile Picture',
    icon: FontAwesomeIcons.user,
    pageComponent: ProfilePictureExample(),
  ),
  const Page(
    title: 'Progress bar',
    icon: FontAwesomeIcons.barsProgress,
    pageComponent: ProgressBarExample(),
  ),
  const Page(
    title: 'Quotes',
    icon: FontAwesomeIcons.quoteRight,
    pageComponent: QuotesExample(),
  ),
  const Page(
    title: 'Radio Button',
    icon: FontAwesomeIcons.circleDot,
    pageComponent: RadioButtonExample(),
  ),
  const Page(
    title: 'Rating',
    icon: FontAwesomeIcons.star,
    pageComponent: RatingExample(),
  ),
  const Page(
    title: 'Signature',
    icon: FontAwesomeIcons.signature,
    pageComponent: SignatureExample(),
  ),
  const Page(
    title: 'Slider Dots',
    icon: FontAwesomeIcons.ellipsis,
    pageComponent: SliderDotsExample(),
  ),
  const Page(
    title: 'Slide to Act',
    icon: FontAwesomeIcons.sliders,
    pageComponent: SlideToActExample(),
  ),
  const Page(
    title: 'Snack bar',
    icon: FontAwesomeIcons.cookieBite,
    pageComponent: SnackbarExample(),
  ),
  const Page(
    title: 'Square Buttons Menu',
    icon: FontAwesomeIcons.tableCellsLarge,
    pageComponent: SquareButtonsMenuExample(),
  ),
  const Page(
    title: 'State Page Icon',
    icon: FontAwesomeIcons.message,
    pageComponent: StatePageIconExample(),
  ),
  const Page(
    title: 'State Page Image',
    icon: FontAwesomeIcons.message,
    pageComponent: StatePageImageExample(),
  ),
  const Page(
    title: 'Stepper',
    icon: FontAwesomeIcons.slash,
    pageComponent: StepperExample(),
  ),
  const Page(
    title: 'Success Animation',
    icon: FontAwesomeIcons.check,
    pageComponent: SuccessAnimationExample(),
  ),
  const Page(
    title: 'Switch',
    icon: FontAwesomeIcons.toggleOff,
    pageComponent: SwitchExample(),
  ),
  const Page(
    title: 'Text',
    icon: FontAwesomeIcons.font,
    pageComponent: TextExample(),
  ),
  const Page(
    title: 'Text Field',
    icon: FontAwesomeIcons.textHeight,
    pageComponent: TextFieldExample(),
  ),
  const Page(
    title: 'Timeline',
    icon: FontAwesomeIcons.timeline,
    pageComponent: TimelineExample(),
  ),
];

class Page {
  const Page({
    required this.icon,
    required this.pageComponent,
    required this.title,
  });

  final IconData icon;
  final Widget pageComponent;
  final String title;
}