senior_design_system 7.0.6 senior_design_system: ^7.0.6 copied to clipboard
All of our Senior design system components for building mobile apps.
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;
}