senior_design_system 0.26.2

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_system/senior_themes.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

import 'pages/action_button.example.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/checkbox.example.dart';
import 'pages/contact_book_item.dart';
import 'pages/draggable_list.example.dart';
import 'pages/dropdown_button.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/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/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/switch.example.dart';
import 'pages/text_field.example.dart';
import 'pages/timeline.example.dart';

import 'pages/slide_to_act.example.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final SeniorTheme appTheme = seniorLightTheme;
    return MultiProvider(
      providers: [
        Provider<SeniorTheme>.value(value: appTheme),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Senior Design System Showcase',
        theme: appTheme.themeData, // Adicionando o tema do Flutter para o app
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final PageController _pageController = PageController();

  @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();

    return Scaffold(
      key: _scaffoldKey,
      body: SeniorBackdrop(
        hasTopPadding: false,
        title: const Text('Senior Design System'),
        leading: SeniorActionButton(
          size: SeniorActionButtonSize.small,
          icon: FontAwesomeIcons.bars,
          style: const SeniorActionButtonStyle(
            iconColor: SeniorColors.pureWhite,
          ),
          onTap: () => _scaffoldKey.currentState!.openDrawer(),
        ),
        body: PageView.builder(
          controller: _pageController,
          itemBuilder: (context, pos) =>
              examplePages.map((page) => page.pageComponent).toList()[pos],
          itemCount: examplePages.length,
        ),
      ),
      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: 'Slide to Act',
      icon: FontAwesomeIcons.sliders,
      pageComponent: SlideToActExample()),
  const Page(
      title: 'Action Button',
      icon: FontAwesomeIcons.stop,
      pageComponent: ActionButtonExample()),
  const Page(
      title: 'Animation',
      icon: FontAwesomeIcons.radiation,
      pageComponent: const AnimationExample()),
  const Page(
      title: 'Badge',
      icon: FontAwesomeIcons.solidIdBadge,
      pageComponent: const BadgeExemple()),
  const Page(
      title: 'Balance',
      icon: FontAwesomeIcons.scaleBalanced,
      pageComponent: const BalanceExample()),
  const Page(
      title: 'Bottom Sheet',
      icon: FontAwesomeIcons.arrowUpFromBracket,
      pageComponent: const BottomSheetExample()),
  const Page(
      title: 'Button',
      icon: FontAwesomeIcons.stop,
      pageComponent: const ButtonExample()),
  const Page(
      title: 'Card',
      icon: FontAwesomeIcons.addressCard,
      pageComponent: const CardExample()),
  Page(
      title: 'Calendar',
      icon: FontAwesomeIcons.calendar,
      pageComponent: CalendarExemple()),
  const Page(
      title: 'Checkbox',
      icon: FontAwesomeIcons.squareCheck,
      pageComponent: const CheckboxExample()),
  const Page(
      title: 'Contact Book Item',
      icon: FontAwesomeIcons.addressBook,
      pageComponent: const ContactBookItemExample()),
  const Page(
      title: 'Draggable List',
      icon: FontAwesomeIcons.scribd,
      pageComponent: const DraggableListExample()),
  const Page(
      title: 'Dropdown Button',
      icon: FontAwesomeIcons.caretDown,
      pageComponent: const DropdownButtonExample()),
  Page(
      title: 'Expansion Panel',
      icon: FontAwesomeIcons.addressCard,
      pageComponent: ExpansionPanelExample()),
  const Page(
      title: 'Gradient Icon',
      icon: FontAwesomeIcons.faceSmile,
      pageComponent: const SeniorGradientIconExample()),
  Page(
      title: 'Icon Button',
      icon: FontAwesomeIcons.circle,
      pageComponent: IconButtonExample()),
  const Page(
      title: 'Image Cropper',
      icon: FontAwesomeIcons.image,
      pageComponent: const ImageCropperExample()),
  const Page(
      title: 'Info Card',
      icon: FontAwesomeIcons.addressCard,
      pageComponent: const InfoCardExample()),
  const Page(
      title: 'List', icon: FontAwesomeIcons.list, pageComponent: ListExample()),
  const Page(
      title: 'Loading',
      icon: FontAwesomeIcons.spinner,
      pageComponent: LoadingExample()),
  const Page(
      title: 'Menu List Item',
      icon: FontAwesomeIcons.list,
      pageComponent: const MenuListItemExample()),
  const Page(
      title: 'Message Card',
      icon: FontAwesomeIcons.addressCard,
      pageComponent: const MessageCardExample()),
  const Page(
      title: 'Modal',
      icon: FontAwesomeIcons.square,
      pageComponent: const ModalExample()),
  Page(
      title: 'Notification List',
      icon: FontAwesomeIcons.list,
      pageComponent: NotificationListExample()),
  const Page(
      title: 'Notification Snackbar',
      icon: FontAwesomeIcons.cookieBite,
      pageComponent: const NotificationSnackbarExample()),
  Page(
      title: 'Pin Code Field',
      icon: FontAwesomeIcons.linesLeaning,
      pageComponent: PinCodeFieldExample()),
  const Page(
      title: 'Profile Picture',
      icon: FontAwesomeIcons.user,
      pageComponent: const ProfilePictureExample()),
  const Page(
      title: 'Progress bar',
      icon: FontAwesomeIcons.barsProgress,
      pageComponent: const ProgressBarExample()),
  const Page(
      title: 'Quotes',
      icon: FontAwesomeIcons.quoteRight,
      pageComponent: const QuotesExample()),
  const Page(
      title: 'Radio Button',
      icon: FontAwesomeIcons.circleDot,
      pageComponent: const RadioButtonExample()),
  const Page(
      title: 'Rating',
      icon: FontAwesomeIcons.star,
      pageComponent: const RatingExample()),
  Page(
      title: 'Signature',
      icon: FontAwesomeIcons.signature,
      pageComponent: SignatureExample()),
  const Page(
      title: 'Snack bar',
      icon: FontAwesomeIcons.cookieBite,
      pageComponent: const SnackbarExample()),
  const Page(
      title: 'State Page Icon',
      icon: FontAwesomeIcons.message,
      pageComponent: const StatePageIconExample()),
  const Page(
      title: 'State Page Image',
      icon: FontAwesomeIcons.message,
      pageComponent: const StatePageImageExample()),
  const Page(
      title: 'Square Buttons Menu',
      icon: FontAwesomeIcons.tableCellsLarge,
      pageComponent: const SquareButtonsMenuExample()),
  Page(
      title: 'Stepper',
      icon: FontAwesomeIcons.slash,
      pageComponent: StepperExample()),
  const Page(
      title: 'Switch',
      icon: FontAwesomeIcons.toggleOff,
      pageComponent: const SwitchExample()),
  Page(
      title: 'Text Field',
      icon: FontAwesomeIcons.textHeight,
      pageComponent: TextFieldExample()),
  const Page(
      title: 'Timeline',
      icon: FontAwesomeIcons.timeline,
      pageComponent: const TimelineExample()),
];

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

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