From 2cb41615a048ce2a49cc48dd712dc8b04ac36907 Mon Sep 17 00:00:00 2001 From: "Thomas Fercher (4AHEL)" Date: Sun, 22 Aug 2021 17:43:00 +0200 Subject: [PATCH] Design Changes --- .../input/selectBar/legendSelectBar.dart | 6 ++ .../layout/fixed/appBar.dart/fixedAppBar.dart | 32 ++++++--- .../layout/fixed/appBar.dart/fixedMenu.dart | 2 +- .../layout/fixed/fixedSider.dart | 53 ++++++++++---- lib/customwidgets/layout/legendScaffold.dart | 33 ++++----- .../layout/sections/sectionTile.dart | 22 ++++-- lib/customwidgets/typography/typography.dart | 14 +++- lib/pages/widgetComponets.dart | 72 +++++++++---------- lib/styles/extensions.dart | 1 + 9 files changed, 148 insertions(+), 87 deletions(-) create mode 100644 lib/styles/extensions.dart diff --git a/lib/customwidgets/input/selectBar/legendSelectBar.dart b/lib/customwidgets/input/selectBar/legendSelectBar.dart index d678750..bb0e680 100644 --- a/lib/customwidgets/input/selectBar/legendSelectBar.dart +++ b/lib/customwidgets/input/selectBar/legendSelectBar.dart @@ -18,6 +18,8 @@ class LegendSelectBar extends StatelessWidget { final double? iconSize; final bool? isCard; final EdgeInsets? margin; + final double? width; + final double? height; LegendSelectBar({ required this.options, @@ -26,6 +28,8 @@ class LegendSelectBar extends StatelessWidget { this.iconSize, this.isCard, this.margin, + this.width, + this.height, }); List getOptions(BuildContext context) { @@ -58,6 +62,8 @@ class LegendSelectBar extends StatelessWidget { return Padding( padding: margin ?? EdgeInsets.all(4.0), child: Container( + width: width, + height: height, padding: EdgeInsets.all(sizing.borderRadius.bottomLeft.x / 2), decoration: isCard ?? false ? BoxDecoration( diff --git a/lib/customwidgets/layout/fixed/appBar.dart/fixedAppBar.dart b/lib/customwidgets/layout/fixed/appBar.dart/fixedAppBar.dart index 6c39dac..84ff295 100644 --- a/lib/customwidgets/layout/fixed/appBar.dart/fixedAppBar.dart +++ b/lib/customwidgets/layout/fixed/appBar.dart/fixedAppBar.dart @@ -3,6 +3,8 @@ import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:provider/provider.dart'; import 'package:webstore/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart'; +import 'package:webstore/customwidgets/typography/legendText.dart'; +import 'package:webstore/customwidgets/typography/typography.dart'; import '../../../../objects/menuOption.dart'; import '../../../../router/routerProvider.dart'; import '../../../../styles/layoutType.dart'; @@ -11,9 +13,13 @@ import '../../../../styles/legendTheme.dart'; class FixedAppBar extends StatelessWidget { final bool? showMenu; + final WidgetBuilder? builder; + final Widget? leading; FixedAppBar({ this.showMenu, + this.builder, + this.leading, }); @override @@ -22,20 +28,28 @@ class FixedAppBar extends StatelessWidget { return SliverAppBar( backgroundColor: theme.colors.primaryColor, - leading: Hero( - tag: ValueKey("appBarLeading"), - child: Container( - width: 80, - height: 80, - child: Placeholder(), + actions: [ + Builder( + builder: builder ?? (c) => Container(), ), - ), - actions: [Container()], + ], title: Hero( tag: ValueKey("appBarTitle"), child: Material( color: Colors.transparent, - child: showMenu ?? true ? FixedMenu(context: context) : Container(), + child: Row( + children: [ + leading ?? + LegendText( + text: "Legend Design", + textStyle: LegendTextStyle.h1(), + ), + if (showMenu ?? true) + Expanded( + child: FixedMenu(context: context), + ), + ], + ), ), ), expandedHeight: theme.sizing.appbarHeight, diff --git a/lib/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart b/lib/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart index 477c5a9..058f9b7 100644 --- a/lib/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart +++ b/lib/customwidgets/layout/fixed/appBar.dart/fixedMenu.dart @@ -54,7 +54,7 @@ class FixedMenu extends StatelessWidget { ), ), Expanded( - flex: 1, + flex: 2, child: Container(), ), ], diff --git a/lib/customwidgets/layout/fixed/fixedSider.dart b/lib/customwidgets/layout/fixed/fixedSider.dart index cc49631..20f9098 100644 --- a/lib/customwidgets/layout/fixed/fixedSider.dart +++ b/lib/customwidgets/layout/fixed/fixedSider.dart @@ -1,5 +1,6 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; import 'package:provider/provider.dart'; import 'package:webstore/customwidgets/layout/sections/sectionTile.dart'; import 'package:webstore/router/routes/sectionProvider.dart'; @@ -133,6 +134,17 @@ class Sider extends StatelessWidget { @override Widget build(BuildContext context) { LegendTheme theme = Provider.of(context); + + ScrollController scrollController = ScrollController( + initialScrollOffset: 80.0, + ); + scrollController + ..addListener(() { + if (scrollController.offset <= 80) { + scrollController.jumpTo(80); + } + }); + List options = RouterProvider.of(context).menuOptions; List tiles = List.of( options.map( @@ -156,12 +168,7 @@ class Sider extends StatelessWidget { ), ); - List children = [ - Container( - child: Placeholder(), - height: 100, - ), - ]; + List children = []; if (showMenu ?? false) { children.add(ListView( @@ -176,21 +183,37 @@ class Sider extends StatelessWidget { children: sectionTiles, )); } + if (builder != null) - children.add( - Expanded( - child: Builder( - builder: builder!, - ), - ), - ); + children.add(Builder( + builder: (context) => builder!(context), + )); + + for (var i = 1; i < children.length; i += 2) { + children.insert(i, Padding(padding: EdgeInsets.only(top: 16))); + } return Container( width: 200, height: MediaQuery.of(context).size.height, color: theme.colors.primaryColor, - child: Column( - children: children, + child: Expanded( + child: CustomScrollView( + shrinkWrap: true, + slivers: [ + SliverAppBar( + title: Container(), + backgroundColor: theme.colors.primaryColor, + actions: [Container()], + expandedHeight: theme.sizing.appbarHeight, + collapsedHeight: theme.sizing.appbarHeight, + toolbarHeight: theme.sizing.appbarHeight, + pinned: true, + automaticallyImplyLeading: false, + ), + SliverList(delegate: SliverChildListDelegate(children)) + ], + ), ), ); } diff --git a/lib/customwidgets/layout/legendScaffold.dart b/lib/customwidgets/layout/legendScaffold.dart index 5db2db8..55215d3 100644 --- a/lib/customwidgets/layout/legendScaffold.dart +++ b/lib/customwidgets/layout/legendScaffold.dart @@ -30,6 +30,7 @@ class LegendScaffold extends StatelessWidget { final String pageName; final Function(BuildContext context)? onActionButtonPressed; final WidgetBuilder? siderBuilder; + final WidgetBuilder? appBarBuilder; final bool? showSiderMenu; final bool? showAppBarMenu; late final bool singlePage; @@ -43,6 +44,7 @@ class LegendScaffold extends StatelessWidget { this.siderBuilder, this.showSiderMenu, this.showAppBarMenu, + this.appBarBuilder, WidgetBuilder? contentBuilder, List? children, bool? singlePage, @@ -123,24 +125,23 @@ class LegendScaffold extends StatelessWidget { } Widget getHeader() { - if (layoutType == LayoutType.FixedHeaderSider) { - return FixedAppBar( - showMenu: showAppBarMenu ?? false, - ); - } else if (layoutType == LayoutType.FixedHeader) { - return FixedAppBar(); - } else { - return SliverToBoxAdapter( - child: Container(), - ); + switch (layoutType) { + case LayoutType.FixedHeaderSider: + return FixedAppBar( + showMenu: showAppBarMenu, + builder: appBarBuilder, + ); + case LayoutType.FixedHeader: + return FixedAppBar( + builder: appBarBuilder, + ); + default: + return SliverToBoxAdapter( + child: Container(), + ); } } - Widget getDrawer(BuildContext context) { - ScreenSize ss = SizeProvider.of(context).screenSize; - return DrawerMenu(); - } - Widget getActionButton(BuildContext context) { return FloatingActionButton( onPressed: () { @@ -165,7 +166,7 @@ class LegendScaffold extends StatelessWidget { LegendColorTheme colors = Provider.of(context).colors; return Scaffold( - endDrawer: getDrawer(context), + endDrawer: DrawerMenu(), endDrawerEnableOpenDragGesture: false, floatingActionButton: onActionButtonPressed != null ? Builder( diff --git a/lib/customwidgets/layout/sections/sectionTile.dart b/lib/customwidgets/layout/sections/sectionTile.dart index f988bcc..b219fb2 100644 --- a/lib/customwidgets/layout/sections/sectionTile.dart +++ b/lib/customwidgets/layout/sections/sectionTile.dart @@ -5,13 +5,23 @@ import 'package:webstore/customwidgets/typography/legendText.dart'; import 'package:webstore/customwidgets/typography/typography.dart'; import 'package:webstore/router/routes/sectionRouteInfo.dart'; +extension StringExtension on String { + String capitalize() { + return "${this[0].toUpperCase()}${this.substring(1)}"; + } +} + class SectionTile extends StatelessWidget { - final String name; + late final String name; + late final String displayName; - const SectionTile({ + SectionTile({ Key? key, - required this.name, - }) : super(key: key); + required String name, + }) : super(key: key) { + this.name = name; + this.displayName = name.replaceAll("/", "").capitalize(); + } @override Widget build(BuildContext context) { @@ -20,8 +30,8 @@ class SectionTile extends StatelessWidget { title: Container( alignment: Alignment.center, child: LegendText( - text: name, - textStyle: LegendTextStyle.siderMenuCollapsed().copyWith( + text: displayName, + textStyle: LegendTextStyle.sectionLink().copyWith( fontSize: 16, fontWeight: FontWeight.w400, ), diff --git a/lib/customwidgets/typography/typography.dart b/lib/customwidgets/typography/typography.dart index 7402cb5..c285a71 100644 --- a/lib/customwidgets/typography/typography.dart +++ b/lib/customwidgets/typography/typography.dart @@ -56,8 +56,8 @@ class LegendTextStyle extends TextStyle { return LegendTextStyle( textColor: Colors.grey[850]!, backgroundColor: Colors.transparent, - fontSize: 16, - fontWeight: FontWeight.w100, + fontSize: 28, + fontWeight: FontWeight.w300, fontFamily: "sans serif", ); } @@ -122,6 +122,16 @@ class LegendTextStyle extends TextStyle { ); } + factory LegendTextStyle.sectionLink() { + return LegendTextStyle( + textColor: Colors.black87, + backgroundColor: Colors.transparent, + fontSize: 16, + fontWeight: FontWeight.w300, + fontFamily: "Roboto", + ); + } + factory LegendTextStyle.h6() { return LegendTextStyle( textColor: Colors.white, diff --git a/lib/pages/widgetComponets.dart b/lib/pages/widgetComponets.dart index 96cfb32..f72b3d5 100644 --- a/lib/pages/widgetComponets.dart +++ b/lib/pages/widgetComponets.dart @@ -36,44 +36,43 @@ class WidgetComponents extends StatelessWidget { return LegendScaffold( showSiderMenu: false, showAppBarMenu: true, - siderBuilder: (context) { + appBarBuilder: (context) { return Container( - child: Column( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - LegendSelectBar( - isCard: true, - margin: EdgeInsets.all(16), - options: [ - LegendSelectOption( - color: Colors.grey, - icon: Icons.dark_mode, - name: "dark", - ), - LegendSelectOption( - color: Colors.purple[200], - icon: Icons.light_mode, - name: "light", - ), - ], - aligment: MainAxisAlignment.spaceAround, - onSelected: (option) { - switch (option.name) { - case "dark": - Provider.of(context, listen: false) - .changeColorTheme(LegendColorThemeType.DARK); - break; - case "light": - Provider.of(context, listen: false) - .changeColorTheme(LegendColorThemeType.LIGHT); - break; - default: - break; - } - }, - iconSize: 32, + alignment: Alignment.center, + padding: EdgeInsets.symmetric(horizontal: 12), + child: LegendSelectBar( + margin: EdgeInsets.all(2), + width: 100, + height: 48, + isCard: true, + options: [ + LegendSelectOption( + color: Colors.grey, + icon: Icons.dark_mode, + name: "dark", + ), + LegendSelectOption( + color: Colors.purple[200], + icon: Icons.light_mode, + name: "light", ), ], + aligment: MainAxisAlignment.spaceBetween, + onSelected: (option) { + switch (option.name) { + case "dark": + Provider.of(context, listen: false) + .changeColorTheme(LegendColorThemeType.DARK); + break; + case "light": + Provider.of(context, listen: false) + .changeColorTheme(LegendColorThemeType.LIGHT); + break; + default: + break; + } + }, + iconSize: 26, ), ); }, @@ -398,9 +397,6 @@ class WidgetComponents extends StatelessWidget { ], header: "Form", ), - Container( - height: 1000, - ) ], pageName: "Widget Components", layoutType: LayoutType.FixedHeaderSider, diff --git a/lib/styles/extensions.dart b/lib/styles/extensions.dart new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/lib/styles/extensions.dart @@ -0,0 +1 @@ +