diff --git a/lib/bootstrap.dart b/lib/bootstrap.dart index 3f29f9e..1c2b3da 100644 --- a/lib/bootstrap.dart +++ b/lib/bootstrap.dart @@ -1,5 +1,6 @@ import 'dart:async'; +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:hive_flutter/hive_flutter.dart'; diff --git a/lib/src/app/view/app_view.dart b/lib/src/app/view/app_view.dart index 89af7fb..88fea54 100644 --- a/lib/src/app/view/app_view.dart +++ b/lib/src/app/view/app_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; @@ -9,7 +10,9 @@ class AppView extends StatelessWidget { return MaterialApp( title: 'Papa Burger', debugShowCheckedModeBanner: false, - theme: AppTheme.lightTheme, + themeMode: ThemeMode.light, + theme: const AppTheme().theme, + darkTheme: const AppDarkTheme().theme, routes: Routes.routes, ); } diff --git a/lib/src/config/config.dart b/lib/src/config/config.dart index 3e56007..c9a56bd 100644 --- a/lib/src/config/config.dart +++ b/lib/src/config/config.dart @@ -3,5 +3,4 @@ export 'dotenv.dart'; export 'extensions/extensions.dart'; export 'logger.dart'; export 'routes/routes.dart'; -export 'theme/app_theme.dart'; export 'utils/utils.dart'; diff --git a/lib/src/config/extensions/extensions.dart b/lib/src/config/extensions/extensions.dart index 66852cf..7301d5f 100644 --- a/lib/src/config/extensions/extensions.dart +++ b/lib/src/config/extensions/extensions.dart @@ -1,9 +1,7 @@ -export 'build_context_extension.dart'; export 'connection_state_to_status.dart'; export 'ignore_pointer_extension.dart'; export 'navigator_extension.dart'; export 'show_bottom_modal_sheet_extension.dart'; export 'snack_bar_extension.dart'; -export 'text_style_extension.dart'; export 'to_upper_case_extension.dart'; export 'trimmed_converted_string_contains_extension.dart'; diff --git a/lib/src/config/extensions/show_bottom_modal_sheet_extension.dart b/lib/src/config/extensions/show_bottom_modal_sheet_extension.dart index 6b08bd9..d5939da 100644 --- a/lib/src/config/extensions/show_bottom_modal_sheet_extension.dart +++ b/lib/src/config/extensions/show_bottom_modal_sheet_extension.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:papa_burger/src/config/config.dart'; @@ -51,10 +52,10 @@ extension BottomModalSheetExtension on BuildContext { sliver: SliverToBoxAdapter( child: Column( children: [ - KText( - text: item.description, - size: 18, - color: Colors.black.withOpacity(.7), + Text( + item.description, + style: context.bodyLarge + ?.apply(color: AppColors.black.withOpacity(.7)), ), ], ), @@ -134,7 +135,6 @@ class IncreaseDecreaseQuantityBottomAppBar extends StatelessWidget { @override Widget build(BuildContext context) { - logI('Build bottom app bar.'); return BottomAppBar( child: Padding( padding: const EdgeInsets.symmetric( @@ -146,15 +146,9 @@ class IncreaseDecreaseQuantityBottomAppBar extends StatelessWidget { children: [ Row( children: [ - KText( - text: item.name, - size: 20, - ), + Text(item.name, style: context.titleLarge), const Spacer(), - KText( - text: item.priceString, - size: 20, - ), + Text(item.priceString, style: context.titleLarge), ], ), const SizedBox( @@ -190,9 +184,7 @@ class IncreaseDecreaseQuantityBottomAppBar extends StatelessWidget { quantity.value = quantity.value - 1; }, ), - KText( - text: value.toString(), - ), + Text(value.toString()), CustomIcon( icon: FontAwesomeIcons.plus, type: IconType.iconButton, @@ -218,14 +210,15 @@ class IncreaseDecreaseQuantityBottomAppBar extends StatelessWidget { context.pop(); }, child: Ink( - decoration: BoxDecoration( - color: kPrimaryBackgroundColor, + decoration: const BoxDecoration( + color: AppColors.deepBlue, ), - child: const Align( - child: KText( - text: 'Add', - size: 22, - fontWeight: FontWeight.bold, + child: Align( + child: Text( + 'Add', + style: context.titleLarge?.copyWith( + fontWeight: AppFontWeight.bold, + ), ), ), ), diff --git a/lib/src/config/theme/app_theme.dart b/lib/src/config/theme/app_theme.dart deleted file mode 100644 index 93b0e8c..0000000 --- a/lib/src/config/theme/app_theme.dart +++ /dev/null @@ -1,99 +0,0 @@ -import 'package:flutter/material.dart' - show AppBarTheme, Brightness, Colors, ThemeData; -import 'package:flutter/services.dart'; -import 'package:papa_burger/src/config/config.dart'; - -class AppTheme { - static final lightTheme = ThemeData( - scaffoldBackgroundColor: Colors.white, - appBarTheme: const AppBarTheme( - elevation: 0, - scrolledUnderElevation: 0, - color: Colors.white, - ), - brightness: Brightness.light, - primaryColor: kPrimaryColor, - ); -} - -/// Theme for the [SystemUiOverlayStyle] -class SystemUiOverlayTheme { - /// {@macro system_ui_overlay_theme} - const SystemUiOverlayTheme(); - - static const SystemUiOverlayStyle restaurantViewThemeData = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.dark, - statusBarColor: Colors.transparent, - statusBarIconBrightness: Brightness.dark, - systemNavigationBarColor: Colors.white, - systemNavigationBarDividerColor: Colors.transparent, - systemNavigationBarIconBrightness: Brightness.dark, - ); - - static const SystemUiOverlayStyle restaurantHeaderThemeData = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.light, - statusBarIconBrightness: Brightness.light, - statusBarColor: Colors.black45, - ); - static const SystemUiOverlayStyle cartViewThemeData = SystemUiOverlayStyle( - statusBarBrightness: Brightness.dark, - statusBarColor: Colors.transparent, - statusBarIconBrightness: Brightness.dark, - systemNavigationBarColor: Colors.white, - systemNavigationBarDividerColor: Colors.transparent, - systemNavigationBarIconBrightness: Brightness.dark, - ); - - static const SystemUiOverlayStyle googleMapView = SystemUiOverlayStyle( - statusBarColor: Colors.transparent, - statusBarIconBrightness: Brightness.dark, - systemNavigationBarColor: Colors.transparent, - systemNavigationBarIconBrightness: Brightness.dark, - ); - - /// Defines iOS light SystemUiOverlayStyle. - static const SystemUiOverlayStyle iOSLightSystemBarTheme = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.dark, - statusBarColor: Colors.transparent, - statusBarIconBrightness: Brightness.light, - systemNavigationBarIconBrightness: Brightness.dark, - ); - - /// Defines iOS dark SystemUiOverlayStyle. - static const SystemUiOverlayStyle iOSDarkSystemBarTheme = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.light, - statusBarColor: Colors.transparent, - statusBarIconBrightness: Brightness.light, - systemNavigationBarIconBrightness: Brightness.light, - ); - - /// Defines Android light SystemUiOverlayStyle. - static const SystemUiOverlayStyle androidLightSystemBarTheme = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.light, - statusBarColor: Colors.white, - statusBarIconBrightness: Brightness.dark, - systemNavigationBarIconBrightness: Brightness.dark, - ); - - /// Defines light SystemUiOverlayStyle. - static const SystemUiOverlayStyle androidDarkSystemBarTheme = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.dark, - statusBarColor: Colors.black, - statusBarIconBrightness: Brightness.light, - systemNavigationBarIconBrightness: Brightness.light, - ); - - /// Defines a portrait only orientation for any device. - static void setPortraitOrientation() { - SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge); - SystemChrome.setPreferredOrientations( - [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown], - ); - } -} diff --git a/lib/src/config/utils/app_colors.dart b/lib/src/config/utils/app_colors.dart deleted file mode 100644 index 5b7b383..0000000 --- a/lib/src/config/utils/app_colors.dart +++ /dev/null @@ -1,5 +0,0 @@ -import 'package:flutter/material.dart' show Color, Colors; - -const Color kPrimaryColor = Colors.blue; -Color kPrimaryBackgroundColor = Colors.indigo.shade400; -const Color fontColor = Colors.black; diff --git a/lib/src/config/utils/app_routes.dart b/lib/src/config/utils/app_routes.dart index b667fb0..0a52252 100644 --- a/lib/src/config/utils/app_routes.dart +++ b/lib/src/config/utils/app_routes.dart @@ -46,6 +46,7 @@ class HomePage extends StatelessWidget { Widget build(BuildContext context) { final user = LocalStorage().getUser; final hasAddress = LocalStorage().hasAddress; + return const MainPage(); if (user == null) { return const LoginView(); } diff --git a/lib/src/config/utils/utils.dart b/lib/src/config/utils/utils.dart index ebbed98..5db5e76 100644 --- a/lib/src/config/utils/utils.dart +++ b/lib/src/config/utils/utils.dart @@ -1,4 +1,3 @@ -export 'app_colors.dart'; export 'app_constants.dart'; export 'app_page_storage_key.dart'; export 'app_routes.dart'; diff --git a/lib/src/views/pages/cart/cart_view.dart b/lib/src/views/pages/cart/cart_view.dart index 9fc4274..5ba5360 100644 --- a/lib/src/views/pages/cart/cart_view.dart +++ b/lib/src/views/pages/cart/cart_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -64,30 +65,29 @@ class _CartViewState extends State { padding: const EdgeInsets.only(top: 240), child: Column( children: [ - const KText( - text: 'Your Cart is Empty', - size: 26, - fontWeight: FontWeight.bold, + Text( + 'Your Cart is Empty', + style: context.displaySmall, ), OutlinedButton( - onPressed: () { - context.navigateToMainPage(); - }, - child: const Row( + onPressed: () => context.navigateToMainPage(), + child: Row( mainAxisSize: MainAxisSize.min, children: [ - CustomIcon( + const CustomIcon( icon: FontAwesomeIcons.cartShopping, type: IconType.simpleIcon, color: Colors.grey, ), - SizedBox( + const SizedBox( width: 6, ), - KText( - text: 'Explore', - size: 22, - color: Colors.grey, + Text( + 'Explore', + style: context.displaySmall?.copyWith( + fontWeight: AppFontWeight.regular, + color: AppColors.grey, + ), ), ], ), @@ -139,12 +139,12 @@ class _CartViewState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - KText(maxLines: 1, text: title), - KText( + Text(title, maxLines: 1), + Text( + subtitle, maxLines: 1, - text: subtitle, - size: 14, - color: Colors.grey.shade500, + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.5)), ), const SizedBox(height: 12), const Divider( @@ -237,12 +237,13 @@ class _CartViewState extends State { return SliverToBoxAdapter( child: ListTile( onTap: () => showChoosePaymentModalBottomSheet(context), - title: KText( - text: noSelection + title: Text( + noSelection ? 'Choose credit card' : 'VISA •• ' '${selectedCard.number.characters.getRange(15, 19)}', - color: noSelection ? Colors.red : Colors.black, + style: context.bodyMedium + ?.apply(color: noSelection ? Colors.red : Colors.black), ), trailing: const CustomIcon( icon: Icons.arrow_forward_ios_sharp, @@ -335,10 +336,9 @@ class CartAppBar extends StatelessWidget { @override Widget build(BuildContext context) { return SliverAppBar( - title: const KText( - text: 'Cart', - size: 26, - fontWeight: FontWeight.bold, + title: Text( + 'Cart', + style: context.headlineMedium?.copyWith(fontWeight: AppFontWeight.bold), ), leading: CustomIcon( icon: FontAwesomeIcons.arrowLeft, diff --git a/lib/src/views/pages/cart/components/add_credit_card_modal_bottom_sheet.dart b/lib/src/views/pages/cart/components/add_credit_card_modal_bottom_sheet.dart index 9a39a70..f6b3e69 100644 --- a/lib/src/views/pages/cart/components/add_credit_card_modal_bottom_sheet.dart +++ b/lib/src/views/pages/cart/components/add_credit_card_modal_bottom_sheet.dart @@ -1,5 +1,6 @@ // ignore_for_file: parameter_assignments +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_credit_card/flutter_credit_card.dart'; import 'package:google_fonts/google_fonts.dart'; @@ -181,10 +182,10 @@ class _AddCreditCardModalBottomSheetState vertical: kDefaultHorizontalPadding, ), decoration: BoxDecoration( - color: kPrimaryBackgroundColor, + color: AppColors.indigo, borderRadius: BorderRadius.circular(kDefaultBorderRadius), ), - child: const KText(text: 'Add', size: 19), + child: Text('Add', style: context.bodyLarge), ), ), ], diff --git a/lib/src/views/pages/cart/components/cart_bottom_app_bar.dart b/lib/src/views/pages/cart/components/cart_bottom_app_bar.dart index 816041e..1bacfd4 100644 --- a/lib/src/views/pages/cart/components/cart_bottom_app_bar.dart +++ b/lib/src/views/pages/cart/components/cart_bottom_app_bar.dart @@ -1,8 +1,8 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; import 'package:papa_burger/src/models/models.dart'; import 'package:papa_burger/src/views/pages/cart/state/cart_bloc.dart'; -import 'package:papa_burger/src/views/widgets/widgets.dart'; class CartBottomAppBar extends StatelessWidget { const CartBottomAppBar({ @@ -23,13 +23,8 @@ class CartBottomAppBar extends StatelessWidget { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - KText( - text: cart.totalSum(), - size: 28, - ), - KText( - text: info, - ), + Text(cart.totalSum(), style: context.headlineMedium), + Text(info), ], ), const SizedBox( @@ -45,13 +40,10 @@ class CartBottomAppBar extends StatelessWidget { ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(kDefaultBorderRadius), - color: kPrimaryBackgroundColor, + color: AppColors.indigo, ), child: Align( - child: KText( - text: title, - size: 19, - ), + child: Text(title, style: context.titleLarge), ), ), ), diff --git a/lib/src/views/pages/cart/components/cart_items_list_view.dart b/lib/src/views/pages/cart/components/cart_items_list_view.dart index 2f5be65..36f8470 100644 --- a/lib/src/views/pages/cart/components/cart_items_list_view.dart +++ b/lib/src/views/pages/cart/components/cart_items_list_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -58,7 +59,7 @@ class _CartItemsListViewState extends State child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - KText(text: name), + Text(name), DiscountPrice( defaultPrice: price, discountPrice: discountPrice, @@ -89,9 +90,9 @@ class _CartItemsListViewState extends State onPressed: () => widget.decreaseQuantity(context, item), ), ), - KText( - text: quantity.toString(), - size: 18, + Text( + quantity.toString(), + style: context.titleLarge, ), Positioned( right: 0, diff --git a/lib/src/views/pages/cart/components/checkout_modal_bottom_sheet.dart b/lib/src/views/pages/cart/components/checkout_modal_bottom_sheet.dart index 108fd54..9ce62ca 100644 --- a/lib/src/views/pages/cart/components/checkout_modal_bottom_sheet.dart +++ b/lib/src/views/pages/cart/components/checkout_modal_bottom_sheet.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -36,12 +37,12 @@ class CheckoutModalBottomSheet extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - KText(maxLines: 1, text: title), - KText( + Text(maxLines: 1, title), + Text( + subtitle, maxLines: 1, - text: subtitle, - size: 14, - color: Colors.grey.shade500, + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.5)), ), const SizedBox(height: 12), const Divider( @@ -118,12 +119,13 @@ class CheckoutModalBottomSheet extends StatelessWidget { final noSelection = selectedCard == const CreditCard.empty(); return ListTile( onTap: () => showChoosePaymentModalBottomSheet(context), - title: KText( - text: noSelection + title: Text( + noSelection ? 'Choose payment method' : 'VISA •• ' '${selectedCard.number.characters.getRange(15, 19)}', - color: noSelection ? Colors.red : Colors.black, + style: context.bodyMedium + ?.apply(color: noSelection ? Colors.red : Colors.black), ), trailing: const CustomIcon( icon: Icons.arrow_forward_ios_sharp, diff --git a/lib/src/views/pages/cart/components/choose_payment_modal_bottom_sheet.dart b/lib/src/views/pages/cart/components/choose_payment_modal_bottom_sheet.dart index 6506f5f..fcd3272 100644 --- a/lib/src/views/pages/cart/components/choose_payment_modal_bottom_sheet.dart +++ b/lib/src/views/pages/cart/components/choose_payment_modal_bottom_sheet.dart @@ -1,5 +1,6 @@ // ignore_for_file: cascade_invocations +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:papa_burger/src/config/config.dart'; @@ -38,9 +39,9 @@ class ChoosePaymentModalBottomSheet extends StatelessWidget { horizontal: kDefaultHorizontalPadding, ), horizontalTitleGap: 0, - title: const KText( - text: 'Link a new credit card', - size: 18, + title: Text( + 'Link a new credit card', + style: context.titleLarge, ), trailing: const CustomIcon( icon: Icons.arrow_forward_ios_outlined, @@ -102,9 +103,8 @@ class ChoosePaymentModalBottomSheet extends StatelessWidget { ), controlAffinity: ListTileControlAffinity.trailing, groupValue: selectedCard, - title: KText( - text: - 'VISA •• ${card.number.characters.getRange(15, 19)}', + title: Text( + 'VISA •• ${card.number.characters.getRange(15, 19)}', ), subtitle: allowDelete ? Row( @@ -112,20 +112,21 @@ class ChoosePaymentModalBottomSheet extends StatelessWidget { GestureDetector( onTap: () => _paymentBloc.deleteCard(context, card), - child: const Row( + child: Row( children: [ - CustomIcon( + const CustomIcon( icon: FontAwesomeIcons.trash, type: IconType.simpleIcon, size: 14, color: Colors.red, ), - SizedBox( + const SizedBox( width: 4, ), - KText( - text: 'Delete', - color: Colors.red, + Text( + 'Delete', + style: context.bodyMedium + ?.apply(color: AppColors.red), ), ], ), diff --git a/lib/src/views/pages/cart/components/progress_bar_modal_bottom_sheet.dart b/lib/src/views/pages/cart/components/progress_bar_modal_bottom_sheet.dart index bff6f62..f02c92b 100644 --- a/lib/src/views/pages/cart/components/progress_bar_modal_bottom_sheet.dart +++ b/lib/src/views/pages/cart/components/progress_bar_modal_bottom_sheet.dart @@ -2,6 +2,7 @@ import 'dart:async'; +import 'package:app_ui/app_ui.dart'; import 'package:faker/faker.dart'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; @@ -140,33 +141,37 @@ class _OrderProgressBarModalBottomSheetState child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - const Column( + Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Shimmer( - period: Duration(milliseconds: 1000), - gradient: LinearGradient( + period: const Duration(milliseconds: 1000), + gradient: const LinearGradient( colors: [ Color(0xFFEBEBEB), - Colors.black, + AppColors.black, Color(0xFFEBEBEB), ], stops: [0.2, 0.4, 0.8], ), - child: KText( - text: 'Payment', - size: 24, + child: Text( + 'Payment', + style: context.headlineSmall?.copyWith( + fontWeight: AppFontWeight.regular, + ), ), ), - KText( - text: 'Waiting your bank to approve', - color: Colors.grey, + Text( + 'Waiting your bank to approve', + style: context.bodyMedium + ?.apply(color: AppColors.grey), ), ], ), - KText( - text: '00:$progressText', - size: 22, + Text( + '00:$progressText', + style: context.headlineSmall + ?.copyWith(fontWeight: AppFontWeight.regular), ), ], ), diff --git a/lib/src/views/pages/login/components/forgot_password_view.dart b/lib/src/views/pages/login/components/forgot_password_view.dart index 06e546f..36ac1d5 100644 --- a/lib/src/views/pages/login/components/forgot_password_view.dart +++ b/lib/src/views/pages/login/components/forgot_password_view.dart @@ -1,5 +1,5 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; -import 'package:papa_burger/src/views/widgets/widgets.dart'; class ForgotPassword extends StatelessWidget { const ForgotPassword({super.key}); @@ -9,9 +9,9 @@ class ForgotPassword extends StatelessWidget { return Align( alignment: Alignment.centerRight, child: TextButton( - child: const KText( - text: 'Forgot password?', - fontWeight: FontWeight.bold, + child: Text( + 'Forgot password?', + style: context.bodyMedium?.copyWith(fontWeight: AppFontWeight.bold), ), onPressed: () {}, ), diff --git a/lib/src/views/pages/login/components/login_footer.dart b/lib/src/views/pages/login/components/login_footer.dart index c8b4024..da59da9 100644 --- a/lib/src/views/pages/login/components/login_footer.dart +++ b/lib/src/views/pages/login/components/login_footer.dart @@ -1,5 +1,5 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; -import 'package:papa_burger/src/views/widgets/widgets.dart'; class LoginFooter extends StatelessWidget { const LoginFooter({ @@ -16,15 +16,15 @@ class LoginFooter extends StatelessWidget { return Row( mainAxisSize: MainAxisSize.min, children: [ - const KText( - text: "Don't have an account? ", - color: Colors.black54, + Text( + "Don't have an account? ", + style: context.bodyMedium, ), GestureDetector( onTap: onTap, - child: KText( - text: text, - fontWeight: FontWeight.bold, + child: Text( + text, + style: context.bodyMedium?.copyWith(fontWeight: AppFontWeight.bold), ), ), ], diff --git a/lib/src/views/pages/login/components/login_form.dart b/lib/src/views/pages/login/components/login_form.dart index f397f46..15d29b2 100644 --- a/lib/src/views/pages/login/components/login_form.dart +++ b/lib/src/views/pages/login/components/login_form.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart' show BlocBuilder, BlocConsumer, ReadContext; @@ -140,7 +141,11 @@ class __LogInFormState extends State<_LogInForm> { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const KText(text: 'Login', size: 24), + Text( + 'Login', + style: context.headlineSmall + ?.copyWith(fontWeight: AppFontWeight.regular), + ), const SizedBox(height: 16), AppTextField( labelText: 'Email', diff --git a/lib/src/views/pages/login/login_view.dart b/lib/src/views/pages/login/login_view.dart index c194172..fe4b898 100644 --- a/lib/src/views/pages/login/login_view.dart +++ b/lib/src/views/pages/login/login_view.dart @@ -24,10 +24,7 @@ class LoginView extends StatelessWidget { const SizedBox( height: 6, ), - const KText( - text: 'Or sign in', - color: Colors.black54, - ), + const Text('Or sign in'), const SizedBox(height: 6), const LoginWithGoogleAndFacebook(height: 60), const SizedBox(height: 12), diff --git a/lib/src/views/pages/main/components/categories/components/category_card.dart b/lib/src/views/pages/main/components/categories/components/category_card.dart index 2a35de4..721bfb7 100644 --- a/lib/src/views/pages/main/components/categories/components/category_card.dart +++ b/lib/src/views/pages/main/components/categories/components/category_card.dart @@ -1,5 +1,6 @@ import 'dart:async'; +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -129,12 +130,18 @@ class _CategoryCardState extends State ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(kDefaultBorderRadius), - color: kPrimaryBackgroundColor, + color: AppColors.indigo, + ), + child: Text( + name, + style: context.bodyMedium?.apply(color: AppColors.white), ), - child: KText(text: name, size: 14, color: Colors.white), ) else - KText(text: name, size: 14), + Text( + name, + style: context.bodyMedium, + ), ], ), ), diff --git a/lib/src/views/pages/main/components/drawer/components/header_app_bar.dart b/lib/src/views/pages/main/components/drawer/components/header_app_bar.dart index 22d173f..3a6338d 100644 --- a/lib/src/views/pages/main/components/drawer/components/header_app_bar.dart +++ b/lib/src/views/pages/main/components/drawer/components/header_app_bar.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -18,10 +19,9 @@ class HeaderAppBar extends StatelessWidget { Widget build(BuildContext context) { return SliverAppBar( forceElevated: true, - title: KText( - text: text, - size: 26, - fontWeight: FontWeight.bold, + title: Text( + text, + style: context.headlineMedium?.copyWith(fontWeight: AppFontWeight.bold), ), leading: CustomIcon( icon: FontAwesomeIcons.arrowLeft, diff --git a/lib/src/views/pages/main/components/drawer/drawer_view.dart b/lib/src/views/pages/main/components/drawer/drawer_view.dart index 9240144..f2e99a5 100644 --- a/lib/src/views/pages/main/components/drawer/drawer_view.dart +++ b/lib/src/views/pages/main/components/drawer/drawer_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; import 'package:papa_burger/src/views/widgets/widgets.dart'; @@ -15,10 +16,7 @@ class DrawerView extends StatelessWidget { DrawerHeader( child: Row( children: [ - const KText( - text: 'Papa', - size: 28, - ), + Text('Papa', style: context.headlineMedium), Container( height: 60, width: 60, @@ -30,10 +28,7 @@ class DrawerView extends StatelessWidget { ), ), ), - const KText( - text: 'Burger', - size: 28, - ), + Text('Burger', style: context.headlineMedium), ], ), ), @@ -45,7 +40,7 @@ class DrawerView extends StatelessWidget { icon: getIcon(option), type: IconType.simpleIcon, ), - title: KText(text: option), + title: Text(option), ), ), ], diff --git a/lib/src/views/pages/main/components/drawer/views/orders/components/order_card.dart b/lib/src/views/pages/main/components/drawer/views/orders/components/order_card.dart index 150d6d4..617cb28 100644 --- a/lib/src/views/pages/main/components/drawer/views/orders/components/order_card.dart +++ b/lib/src/views/pages/main/components/drawer/views/orders/components/order_card.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:papa_burger/src/config/config.dart'; @@ -48,10 +49,10 @@ class OrderCard extends StatelessWidget { children: [ Row( children: [ - KText( - text: restaurantName, - size: 20, - fontWeight: FontWeight.w600, + Text( + restaurantName, + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), CustomIcon( icon: FontAwesomeIcons.trash, @@ -62,24 +63,25 @@ class OrderCard extends StatelessWidget { ), ], ), - KText( - text: '${orderTotal.round()}$currency', - size: 20, - fontWeight: FontWeight.w600, + Text( + '${orderTotal.round()}$currency', + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - KText( - text: date, - size: 14, - color: Colors.grey.shade600, + Text( + date, + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.6)), ), - KText( - text: status, - color: statusColor(status), + Text( + status, + style: + context.bodyMedium?.apply(color: statusColor(status)), ), ], ), diff --git a/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_details_action_button.dart b/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_details_action_button.dart index 1af1a51..9940758 100644 --- a/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_details_action_button.dart +++ b/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_details_action_button.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/views/widgets/widgets.dart'; @@ -55,10 +56,10 @@ class OrderDetailsActionButton extends StatelessWidget { ], ), const SizedBox(height: 6), - KText( - text: text, - size: 14, - color: Colors.grey.shade600, + Text( + text, + style: + context.bodyMedium?.apply(color: AppColors.grey.withOpacity(.6)), ), ], ); diff --git a/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_menu_item_tile.dart b/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_menu_item_tile.dart index 8d85f6f..3578a5a 100644 --- a/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_menu_item_tile.dart +++ b/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/components/order_menu_item_tile.dart @@ -27,9 +27,9 @@ class OrderMenuItemTile extends StatelessWidget { imageUrl: imageUrl, imageType: CacheImageType.smallImage, ), - title: KText(text: name), - subtitle: KText(text: '$quantity pcs'), - trailing: KText(text: price), + title: Text(name), + subtitle: Text('$quantity pcs'), + trailing: Text(price), ); } } diff --git a/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/order_details_view.dart b/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/order_details_view.dart index 22ad1bb..27568b8 100644 --- a/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/order_details_view.dart +++ b/lib/src/views/pages/main/components/drawer/views/orders/components/order_details/order_details_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:papa_burger/src/config/config.dart'; @@ -129,22 +130,22 @@ class OrderDetailsWithDetails extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - KText( - text: 'Order № $orderId', - size: 18, + Text( + 'Order № $orderId', maxLines: 1, + style: context.bodyLarge, ), ], ), ), - subtitle: KText( - text: date, - size: 13, + subtitle: Text( + date, + style: context.bodySmall, ), - trailing: KText( - text: totalSum, - size: 20, - fontWeight: FontWeight.w600, + trailing: Text( + totalSum, + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ), ListTile( @@ -152,16 +153,16 @@ class OrderDetailsWithDetails extends StatelessWidget { contentPadding: const EdgeInsets.symmetric( horizontal: kDefaultHorizontalPadding, ), - title: KText( - text: 'From restaurant', - size: 14, - color: Colors.grey.shade600, + title: Text( + 'From restaurant', + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.6)), ), - subtitle: KText( - text: restaurantName, - size: 18, + subtitle: Text( + restaurantName, + style: context.bodyLarge, ), - trailing: const KText(text: 'Go to>'), + trailing: const Text('Go to>'), ), const Padding( padding: EdgeInsets.only( @@ -210,17 +211,16 @@ class OrderDetailsWithDetails extends StatelessWidget { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Padding( - padding: EdgeInsets.only( + Padding( + padding: const EdgeInsets.only( top: 24, bottom: 6, left: kDefaultHorizontalPadding, right: kDefaultHorizontalPadding, ), - child: KText( - text: 'Order list', - size: 24, - fontWeight: FontWeight.bold, + child: Text( + 'Order list', + style: context.headlineSmall, ), ), const Padding( @@ -253,49 +253,48 @@ class OrderDetailsWithDetails extends StatelessWidget { children: ListTile.divideTiles( context: context, tiles: [ - const Padding( - padding: EdgeInsets.only(bottom: 8), - child: KText( - text: 'Delivery and payment', - size: 24, - fontWeight: FontWeight.bold, + Padding( + padding: const EdgeInsets.only(bottom: 8), + child: Text( + 'Delivery and payment', + style: context.headlineSmall, ), ), ListTile( contentPadding: EdgeInsets.zero, - title: const KText( - text: 'Cost of goods', - size: 20, + title: Text( + 'Cost of goods', + style: context.titleLarge, ), - trailing: KText(text: totalSum), + trailing: Text(totalSum), ), ListTile( contentPadding: EdgeInsets.zero, - title: const KText( - text: 'Delivery fee', - size: 20, + title: Text( + 'Delivery fee', + style: context.titleLarge, ), - subtitle: KText( - text: orderAddress, - color: Colors.grey.shade600, - size: 14, + subtitle: Text( + orderAddress, + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.6)), ), - trailing: KText(text: deliveryFee), + trailing: Text(deliveryFee), ), ], ).toList(), ), ), ListTile( - title: const KText( - text: 'Overall', - size: 20, - fontWeight: FontWeight.bold, + title: Text( + 'Overall', + style: + context.titleLarge?.copyWith(fontWeight: AppFontWeight.bold), ), - trailing: KText( - text: totalSum, - size: 20, - fontWeight: FontWeight.w600, + trailing: Text( + totalSum, + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ), const SizedBox( @@ -331,10 +330,10 @@ class OrderDetailsGenericError extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'Something went wrong.', - size: 24, - fontWeight: FontWeight.w600, + Text( + 'Something went wrong.', + style: context.headlineMedium + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ElevatedButton( style: ButtonStyle( @@ -343,13 +342,12 @@ class OrderDetailsGenericError extends StatelessWidget { borderRadius: BorderRadius.circular(kDefaultBorderRadius + 6), ), ), - backgroundColor: WidgetStatePropertyAll(kPrimaryBackgroundColor), + backgroundColor: const WidgetStatePropertyAll(AppColors.indigo), ), onPressed: tryAgain, - child: const KText( - text: 'Try again.', - size: 18, - color: Colors.white, + child: Text( + 'Try again.', + style: context.bodyLarge?.apply(color: AppColors.white), ), ), ], @@ -368,10 +366,10 @@ class OrderDetailsNotFoundError extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'Order details are not found.', - size: 24, - fontWeight: FontWeight.w600, + Text( + 'Order details are not found.', + style: context.headlineMedium + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ElevatedButton( style: ButtonStyle( @@ -380,13 +378,12 @@ class OrderDetailsNotFoundError extends StatelessWidget { borderRadius: BorderRadius.circular(kDefaultBorderRadius + 6), ), ), - backgroundColor: WidgetStatePropertyAll(kPrimaryBackgroundColor), + backgroundColor: const WidgetStatePropertyAll(AppColors.indigo), ), onPressed: () => context.pop(), - child: const KText( - text: '<- Back', - size: 18, - color: Colors.white, + child: Text( + '<- Back', + style: context.bodyLarge?.apply(color: AppColors.white), ), ), ], diff --git a/lib/src/views/pages/main/components/drawer/views/orders/components/orders_list_view.dart b/lib/src/views/pages/main/components/drawer/views/orders/components/orders_list_view.dart index 7bb6921..02373fd 100644 --- a/lib/src/views/pages/main/components/drawer/views/orders/components/orders_list_view.dart +++ b/lib/src/views/pages/main/components/drawer/views/orders/components/orders_list_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; import 'package:papa_burger/src/models/models.dart'; @@ -119,10 +120,10 @@ class OrdersEmptyList extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'No orders yet.', - size: 24, - fontWeight: FontWeight.w600, + Text( + 'No orders yet.', + style: context.headlineMedium + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ElevatedButton( style: ButtonStyle( @@ -132,14 +133,12 @@ class OrdersEmptyList extends StatelessWidget { BorderRadius.circular(kDefaultBorderRadius + 6), ), ), - backgroundColor: - WidgetStatePropertyAll(kPrimaryBackgroundColor), + backgroundColor: const WidgetStatePropertyAll(AppColors.indigo), ), onPressed: () => context.navigateToMainPage(), - child: const KText( - text: 'Make some.', - size: 18, - color: Colors.white, + child: Text( + 'Make some.', + style: context.bodyLarge?.apply(color: AppColors.white), ), ), ], @@ -165,10 +164,10 @@ class OrdersGenericError extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'Something went wrong.', - size: 24, - fontWeight: FontWeight.w600, + Text( + 'Something went wrong.', + style: context.headlineMedium + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ElevatedButton( style: ButtonStyle( @@ -178,14 +177,12 @@ class OrdersGenericError extends StatelessWidget { BorderRadius.circular(kDefaultBorderRadius + 6), ), ), - backgroundColor: - WidgetStatePropertyAll(kPrimaryBackgroundColor), + backgroundColor: const WidgetStatePropertyAll(AppColors.indigo), ), onPressed: tryAgain, - child: const KText( - text: 'Try again.', - size: 18, - color: Colors.white, + child: Text( + 'Try again.', + style: context.bodyLarge?.apply(color: AppColors.white), ), ), ], @@ -209,15 +206,14 @@ class OrdersNetworkError extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'No internet connection😕', - size: 24, - fontWeight: FontWeight.w600, + Text( + 'No internet connection😕', + style: context.headlineSmall, ), - KText( - text: 'Check your connection status and try again', + Text( + 'Check your connection status and try again', textAlign: TextAlign.center, - color: Colors.grey.shade600, + style: context.bodyMedium?.apply(color: AppColors.grey), ), const Image( image: AssetImage(noInternetConnectionImage), diff --git a/lib/src/views/pages/main/components/drawer/views/profile/components/user_credentials_view.dart b/lib/src/views/pages/main/components/drawer/views/profile/components/user_credentials_view.dart index 5e1422e..dfeaffe 100644 --- a/lib/src/views/pages/main/components/drawer/views/profile/components/user_credentials_view.dart +++ b/lib/src/views/pages/main/components/drawer/views/profile/components/user_credentials_view.dart @@ -69,9 +69,7 @@ class UserCredentialsView extends StatelessWidget { return ChoosePaymentModalBottomSheet(allowDelete: true); }, ), - title: const KText( - text: 'Payment methods', - ), + title: const Text('Payment methods'), trailing: const CustomIcon( icon: Icons.arrow_forward_ios_sharp, type: IconType.simpleIcon, diff --git a/lib/src/views/pages/main/components/drawer/views/profile/profile_view.dart b/lib/src/views/pages/main/components/drawer/views/profile/profile_view.dart index be70cbc..254191b 100644 --- a/lib/src/views/pages/main/components/drawer/views/profile/profile_view.dart +++ b/lib/src/views/pages/main/components/drawer/views/profile/profile_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' @@ -59,9 +60,9 @@ class ProfileView extends StatelessWidget { alertText: 'Are you sure to Log out from you Account?', actionText: 'Log out', ), - child: const KText( - text: 'Logout', - size: 18, + child: Text( + 'Logout', + style: context.bodyLarge, ), ), ), @@ -74,8 +75,8 @@ class ProfileView extends StatelessWidget { }, child: GestureDetector( onTap: NotificationService.cancelAllNotifications, - child: const KText( - text: 'Show notification', + child: const Text( + 'Show notification', ), ), ), diff --git a/lib/src/views/pages/main/components/filter/components/filter_bottom_app_bar.dart b/lib/src/views/pages/main/components/filter/components/filter_bottom_app_bar.dart index 0dd1f9f..4c0a49d 100644 --- a/lib/src/views/pages/main/components/filter/components/filter_bottom_app_bar.dart +++ b/lib/src/views/pages/main/components/filter/components/filter_bottom_app_bar.dart @@ -1,6 +1,6 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; -import 'package:papa_burger/src/views/widgets/widgets.dart'; class FilterBottomAppBar extends StatelessWidget { const FilterBottomAppBar({super.key}); @@ -25,13 +25,13 @@ class FilterBottomAppBar extends StatelessWidget { ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(kDefaultBorderRadius), - color: kPrimaryBackgroundColor, + color: AppColors.indigo, ), - child: const Align( - child: KText( - text: 'Apply', - size: 20, - fontWeight: FontWeight.w600, + child: Align( + child: Text( + 'Apply', + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), ), ), diff --git a/lib/src/views/pages/main/components/filter/components/filter_button.dart b/lib/src/views/pages/main/components/filter/components/filter_button.dart index d2a33d4..8295b1f 100644 --- a/lib/src/views/pages/main/components/filter/components/filter_button.dart +++ b/lib/src/views/pages/main/components/filter/components/filter_button.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:papa_burger/src/config/config.dart'; @@ -5,7 +6,6 @@ import 'package:papa_burger/src/models/restaurant.dart'; import 'package:papa_burger/src/views/pages/main/components/filter/components/filter_bottom_app_bar.dart'; import 'package:papa_burger/src/views/pages/main/components/filter/filter_view.dart'; import 'package:papa_burger/src/views/pages/main/state/bloc/main_test_bloc.dart'; -import 'package:papa_burger/src/views/widgets/widgets.dart'; class FilterButton extends StatefulWidget { const FilterButton({ @@ -100,7 +100,7 @@ class _FilterButtonState extends State width: 40, alignment: Alignment.center, decoration: BoxDecoration( - color: kPrimaryBackgroundColor, + color: AppColors.indigo, shape: BoxShape.circle, boxShadow: [ BoxShadow( @@ -109,9 +109,9 @@ class _FilterButtonState extends State ), ], ), - child: KText( - text: '$chosenTagsCount', - color: Colors.white, + child: Text( + '$chosenTagsCount', + style: context.bodyMedium?.apply(color: AppColors.white), ), ), child: Container( @@ -131,10 +131,7 @@ class _FilterButtonState extends State ), ), const SizedBox(height: 2), - const KText( - text: 'Filters', - size: 14, - ), + const Text('Filters'), ], ), ), diff --git a/lib/src/views/pages/main/components/filter/filter_view.dart b/lib/src/views/pages/main/components/filter/filter_view.dart index 81b5dfa..50d42ca 100644 --- a/lib/src/views/pages/main/components/filter/filter_view.dart +++ b/lib/src/views/pages/main/components/filter/filter_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; import 'package:papa_burger/src/models/models.dart'; @@ -20,10 +21,9 @@ class FilterView extends StatelessWidget { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const KText( - text: 'Cuisines and dishes', - size: 24, - fontWeight: FontWeight.w600, + Text( + 'Cuisines and dishes', + style: context.headlineSmall, ), Wrap( spacing: 10, @@ -38,10 +38,7 @@ class FilterView extends StatelessWidget { imageUrl: imageUrl, imageType: CacheImageType.smallImage, ), - KText( - text: name, - size: 14, - ), + Text(name), ], ); }).toList(), diff --git a/lib/src/views/pages/main/components/header/header_view.dart b/lib/src/views/pages/main/components/header/header_view.dart index 56e61f6..474d826 100644 --- a/lib/src/views/pages/main/components/header/header_view.dart +++ b/lib/src/views/pages/main/components/header/header_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:cached_network_image/cached_network_image.dart' show CachedNetworkImage; import 'package:flutter/material.dart'; @@ -55,8 +56,8 @@ class _HeaderViewState extends State return ValueListenableBuilder( valueListenable: LocationNotifier(), builder: (context, address, _) { - return KText( - text: address, + return Text( + address, maxLines: 1, textAlign: TextAlign.center, ); @@ -64,16 +65,16 @@ class _HeaderViewState extends State ); } - Row _buildAddressAndDeliveryText() => const Row( + Widget _buildAddressAndDeliveryText() => Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - KText( - text: 'Your address and delivery time', - textAlign: TextAlign.center, - color: Colors.grey, + Text( + 'Your address and delivery time', maxLines: 1, + textAlign: TextAlign.center, + style: context.bodyMedium?.apply(color: AppColors.grey), ), - CustomIcon( + const CustomIcon( icon: Icons.arrow_right_outlined, type: IconType.simpleIcon, size: 24, diff --git a/lib/src/views/pages/main/components/location/google_map_view.dart b/lib/src/views/pages/main/components/location/google_map_view.dart index fa016b1..9947eda 100644 --- a/lib/src/views/pages/main/components/location/google_map_view.dart +++ b/lib/src/views/pages/main/components/location/google_map_view.dart @@ -1,5 +1,6 @@ import 'dart:async' show StreamSubscription; +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart' show SystemUiOverlayStyle; import 'package:font_awesome_flutter/font_awesome_flutter.dart' @@ -122,7 +123,6 @@ class _GoogleMapViewState extends State alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(kDefaultBorderRadius), - color: kPrimaryBackgroundColor, boxShadow: const [ BoxShadow( blurRadius: 5, @@ -131,10 +131,12 @@ class _GoogleMapViewState extends State ), ], ), - child: const KText( - text: 'Save', - color: Colors.white, - size: 22, + child: Text( + 'Save', + style: context.headlineSmall?.copyWith( + fontWeight: AppFontWeight.regular, + color: AppColors.white, + ), ), ), ).ignorePointer(isMoving: _isMoving), @@ -151,19 +153,16 @@ class _GoogleMapViewState extends State margin: const EdgeInsets.symmetric( horizontal: 60, ), - child: const KText( - text: "Delivery address isn't found", - size: 26, + child: Text( + "Delivery address isn't found", textAlign: TextAlign.center, + style: context.headlineMedium, ), ), ); Widget _buildInProgress({bool alsoLoading = false}) { - const finding = KText( - text: 'Finding you...', - size: 26, - ); + final finding = Text('Finding you...', style: context.headlineMedium); return GestureDetector( onTap: () => context.navigateToSearchLocationWithAutoComplete(), child: Container( @@ -172,11 +171,11 @@ class _GoogleMapViewState extends State horizontal: 60, ), child: alsoLoading - ? const Column( + ? Column( children: [ finding, - SizedBox(height: 6), - CustomCircularIndicator( + const SizedBox(height: 6), + const CustomCircularIndicator( color: Colors.black, ), ], @@ -201,12 +200,12 @@ class _GoogleMapViewState extends State ), child: Column( children: [ - KText( - text: address, + Text( + address, maxLines: 3, - size: 30, textAlign: TextAlign.center, - fontWeight: FontWeight.w600, + style: context.headlineLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), const SizedBox( height: 28, @@ -226,10 +225,7 @@ class _GoogleMapViewState extends State borderRadius: BorderRadius.circular(kDefaultBorderRadius + 12), ), - child: const KText( - text: 'Change delivery address', - maxLines: 1, - ), + child: const Text('Change delivery address', maxLines: 1), ), ), ], @@ -239,10 +235,10 @@ class _GoogleMapViewState extends State ), ); - Widget _buildNoInternet() => const KText( - text: 'No Internet', - size: 26, + Widget _buildNoInternet() => Text( + 'No Internet', textAlign: TextAlign.center, + style: context.headlineMedium, ).ignorePointer(isMoving: _isMoving); Widget _buildMap(BuildContext context) { @@ -406,7 +402,7 @@ class _GoogleMapViewState extends State @override Widget build(BuildContext context) { return AnnotatedRegion( - value: SystemUiOverlayTheme.googleMapView, + value: SystemUiOverlayTheme.googleMapSystemBarTheme, child: AppScaffold( body: Stack( children: [ diff --git a/lib/src/views/pages/main/components/location/search_location_with_autocomplete.dart b/lib/src/views/pages/main/components/location/search_location_with_autocomplete.dart index 5159387..edf90ab 100644 --- a/lib/src/views/pages/main/components/location/search_location_with_autocomplete.dart +++ b/lib/src/views/pages/main/components/location/search_location_with_autocomplete.dart @@ -1,5 +1,6 @@ // ignore_for_file: unnecessary_statements, unnecessary_null_checks +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -66,13 +67,13 @@ class _SearchLocationWithAutoCompleteState ); } - Widget _buildError(String error) => KText(text: error); + Widget _buildError(String error) => Text(error); Widget _buildLoading() => const CustomCircularIndicator(color: Colors.black); - Widget _buildNoResults() => const KText( - text: 'No results by your search term.', - size: 20, + Widget _buildNoResults() => Text( + 'No results by your search term.', + style: context.titleLarge, ); Widget _buildEmpty() => const SizedBox.shrink(); @@ -103,15 +104,14 @@ class _SearchLocationWithAutoCompleteState child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - KText( - text: mainText, - size: 18, + Text( + mainText, + style: context.bodyLarge, ), - KText( - text: secondaryText, - size: 14, - color: Colors.grey, + Text( + secondaryText, maxLines: 1, + style: context.bodyMedium?.apply(color: AppColors.grey), ), ], ), @@ -122,7 +122,7 @@ class _SearchLocationWithAutoCompleteState ), ); - Widget _buildUnhandledState() => const KText(text: 'Unhandled state'); + Widget _buildUnhandledState() => const Text('Unhandled state'); @override Widget build(BuildContext context) { diff --git a/lib/src/views/pages/main/components/main_page_body.dart b/lib/src/views/pages/main/components/main_page_body.dart index 4719caa..97ae103 100644 --- a/lib/src/views/pages/main/components/main_page_body.dart +++ b/lib/src/views/pages/main/components/main_page_body.dart @@ -1,5 +1,6 @@ // ignore_for_file: lines_longer_than_80_chars +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' @@ -186,17 +187,18 @@ class MainPageEmptyView extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'We are not here yet :(', - size: 20, - fontWeight: FontWeight.w600, + Text( + 'We are not here yet :(', textAlign: TextAlign.center, + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), - KText( - text: 'But we connect dozens of new places every week. ' - "Maybe we'll be here!", - color: Colors.grey.shade600, + Text( + 'But we connect dozens of new places every week. ' + "Maybe we'll be here!", textAlign: TextAlign.center, + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.6)), ), ], ), @@ -216,17 +218,17 @@ class MainPageOutOfTimeView extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'The client ran out of time :(', - size: 20, - fontWeight: FontWeight.w600, + Text( + 'The client ran out of time :(', textAlign: TextAlign.center, + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.semiBold), ), - KText( - text: - 'Please try again later and check your internet connection!', - color: Colors.grey.shade600, + Text( + 'Please try again later and check your internet connection!', textAlign: TextAlign.center, + style: context.bodyMedium + ?.apply(color: AppColors.grey.withOpacity(.6)), ), ], ), @@ -251,16 +253,15 @@ class MainPageErrorView extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - const KText( - text: 'Something went wrong!', - size: 22, - fontWeight: FontWeight.bold, + Text( + 'Something went wrong!', textAlign: TextAlign.center, + style: context.headlineSmall, ), ElevatedButton.icon( - style: ButtonStyle( + style: const ButtonStyle( backgroundColor: WidgetStatePropertyAll( - kPrimaryBackgroundColor, + AppColors.indigo, ), ), onPressed: refresh, @@ -270,9 +271,9 @@ class MainPageErrorView extends StatelessWidget { color: Colors.white, size: 14, ), - label: const KText( - text: 'Try again.', - color: Colors.white, + label: Text( + 'Try again.', + style: context.bodyMedium?.apply(color: AppColors.white), ), ), ], @@ -289,16 +290,14 @@ class MainPageNoInternetView extends StatelessWidget { Widget build(BuildContext context) { return SliverPadding( padding: const EdgeInsets.symmetric( - horizontal: kDefaultHorizontalPadding, - vertical: kDefaultVerticalPadding, + horizontal: AppSpacing.md, + vertical: AppSpacing.md, ), sliver: SliverList( delegate: SliverChildBuilderDelegate( (context, index) { return const Padding( - padding: EdgeInsets.only( - bottom: 24, - ), + padding: EdgeInsets.only(bottom: AppSpacing.xlg), child: ShimmerLoading( height: 160, radius: kDefaultBorderRadius, @@ -336,9 +335,7 @@ class MainPageHeader extends StatelessWidget { ), child: HeaderView(), ), - SizedBox( - height: 16, - ), + SizedBox(height: AppSpacing.lg), Padding( padding: EdgeInsets.symmetric(horizontal: kDefaultHorizontalPadding), @@ -365,10 +362,10 @@ class MainPageSectionHeader extends StatelessWidget { padding: const EdgeInsets.symmetric( horizontal: kDefaultHorizontalPadding, ), - child: KText( - text: text, - size: 26, - fontWeight: FontWeight.bold, + child: Text( + text, + style: + context.headlineMedium?.copyWith(fontWeight: AppFontWeight.bold), ), ), ); @@ -434,10 +431,10 @@ class ResetFiltersButton extends StatelessWidget { borderRadius: BorderRadius.circular(kDefaultBorderRadius), color: Colors.grey.shade300, ), - child: const Align( - child: KText( - text: 'Reset', - size: 18, + child: Align( + child: Text( + 'Reset', + style: context.bodyLarge, ), ), ), @@ -455,10 +452,9 @@ class FilteredRestaurantsCount extends StatelessWidget { @override Widget build(BuildContext context) { - return KText( - fontWeight: FontWeight.w600, - size: 18, - text: 'Found $count ${count == 1 ? 'restaurant' : 'restaurants'}', + return Text( + 'Found $count ${count == 1 ? 'restaurant' : 'restaurants'}', + style: context.titleLarge?.copyWith(fontWeight: AppFontWeight.semiBold), ); } } diff --git a/lib/src/views/pages/main/components/menu/components/discount_card.dart b/lib/src/views/pages/main/components/menu/components/discount_card.dart index 8ca2d9c..93da661 100644 --- a/lib/src/views/pages/main/components/menu/components/discount_card.dart +++ b/lib/src/views/pages/main/components/menu/components/discount_card.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -69,19 +70,10 @@ class DiscountCard extends StatelessWidget { size: 18, ), ), - const SizedBox( - width: 8, - ), - const KText( - text: 'Discount on several items', - ), - const SizedBox( - width: 8, - ), - KText( - text: '$discount%', - size: 18, - ), + const SizedBox(width: AppSpacing.sm), + const Text('Discount on several items'), + const SizedBox(width: AppSpacing.sm), + Text('$discount%', style: context.bodyLarge), ], ), ), diff --git a/lib/src/views/pages/main/components/menu/components/menu_item_card.dart b/lib/src/views/pages/main/components/menu/components/menu_item_card.dart index e2b5144..07ed800 100644 --- a/lib/src/views/pages/main/components/menu/components/menu_item_card.dart +++ b/lib/src/views/pages/main/components/menu/components/menu_item_card.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart' show HapticFeedback; import 'package:font_awesome_flutter/font_awesome_flutter.dart' @@ -122,13 +123,12 @@ class _MenuItemCardState extends State { hasDiscount: hasDiscount, discountPrice: discountPrice, ), - KText( - text: name, - size: 20, - ), - KText( - text: description, - color: Colors.grey.shade600, + Text(name, style: context.titleLarge), + Text( + description, + style: context.bodyMedium?.apply( + color: AppColors.grey.withOpacity(.6), + ), ), ], ), @@ -173,9 +173,9 @@ class _MenuItemCardState extends State { }, ), ), - KText( - text: quantity.toString(), - size: 18, + Text( + quantity.toString(), + style: context.bodyLarge, ), Positioned( right: 0, @@ -198,18 +198,18 @@ class _MenuItemCardState extends State { ), ], ) - : const Row( + : Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - CustomIcon( + const CustomIcon( icon: FontAwesomeIcons.plus, type: IconType.simpleIcon, size: 18, ), - KText( - text: ' Add', - size: 18, + Text( + ' Add', + style: context.bodyLarge, ), ], ), diff --git a/lib/src/views/pages/main/components/menu/components/menu_section_header.dart b/lib/src/views/pages/main/components/menu/components/menu_section_header.dart index 1a5ce63..e6376af 100644 --- a/lib/src/views/pages/main/components/menu/components/menu_section_header.dart +++ b/lib/src/views/pages/main/components/menu/components/menu_section_header.dart @@ -1,5 +1,5 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; -import 'package:papa_burger/src/views/widgets/widgets.dart'; class MenuSectionHeader extends StatelessWidget { const MenuSectionHeader({ @@ -26,10 +26,10 @@ class MenuSectionHeader extends StatelessWidget { child: Container( alignment: Alignment.centerLeft, height: categoryHeight, - child: KText( - text: categoryName, - size: 26, - fontWeight: FontWeight.bold, + child: Text( + categoryName, + style: context.headlineMedium + ?.copyWith(fontWeight: AppFontWeight.bold), ), ), ), diff --git a/lib/src/views/pages/main/components/menu/menu_view.dart b/lib/src/views/pages/main/components/menu/menu_view.dart index 8669d79..a3f4560 100644 --- a/lib/src/views/pages/main/components/menu/menu_view.dart +++ b/lib/src/views/pages/main/components/menu/menu_view.dart @@ -1,5 +1,6 @@ import 'dart:async' show StreamSubscription; +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart' show SystemUiOverlayStyle; import 'package:font_awesome_flutter/font_awesome_flutter.dart' @@ -108,14 +109,15 @@ class _MenuViewState extends State else Column( children: [ - KText( - text: 'Delivery ${cart.deliveryFeeString}', + Text( + 'Delivery ${cart.deliveryFeeString}', textAlign: TextAlign.center, ), - KText( - text: 'To Free delivery ${cart.toFreeDeliveryString}', - color: Colors.green, + Text( + 'To Free delivery ${cart.toFreeDeliveryString}', textAlign: TextAlign.center, + style: + context.bodyMedium?.apply(color: AppColors.green), ), ], ), @@ -144,7 +146,7 @@ class _MenuViewState extends State ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(kDefaultBorderRadius), - color: kPrimaryBackgroundColor, + color: AppColors.indigo, ), child: Stack( alignment: Alignment.center, @@ -153,23 +155,25 @@ class _MenuViewState extends State left: 0, child: LimitedBox( maxWidth: 120, - child: KText( - text: '30 - 40 min', + child: Text( + '30 - 40 min', textAlign: TextAlign.center, - color: Colors.white.withOpacity(.7), + style: context.bodyMedium + ?.apply(color: AppColors.white.withOpacity(.7)), ), ), ), - const KText( - text: 'Order', - size: 19, - fontWeight: FontWeight.bold, + Text( + 'Order', + style: context.bodyLarge + ?.copyWith(fontWeight: AppFontWeight.bold), ), Positioned( right: 0, - child: KText( - text: cart.totalSum(), - color: Colors.white.withOpacity(.7), + child: Text( + cart.totalSum(), + style: context.bodyMedium + ?.apply(color: AppColors.white.withOpacity(.7)), ), ), ], @@ -275,8 +279,8 @@ class _MenuViewState extends State builder: (context, isScrolled, child) { return AnnotatedRegion( value: isScrolled - ? SystemUiOverlayTheme.restaurantViewThemeData - : SystemUiOverlayTheme.restaurantHeaderThemeData, + ? SystemUiOverlayTheme.restaurantViewSystemBarTheme + : SystemUiOverlayTheme.restaurantHeaderSystemBarTheme, child: FlexibleSpaceBar( expandedTitleScale: 2.2, titlePadding: isScrolled @@ -295,11 +299,12 @@ class _MenuViewState extends State ), title: Hero( tag: 'Menu${widget.restaurant.name}', - child: KText( - text: widget.restaurant.name, + child: Text( + widget.restaurant.name, maxLines: isScrolled ? 1 : 2, - size: 18, - color: isScrolled ? Colors.black : Colors.white, + style: context.bodyLarge?.apply( + color: isScrolled ? AppColors.black : AppColors.white, + ), ), ), ), diff --git a/lib/src/views/pages/main/components/restaurant/restaurants_filtered_view.dart b/lib/src/views/pages/main/components/restaurant/restaurants_filtered_view.dart index 53020cc..74deb2b 100644 --- a/lib/src/views/pages/main/components/restaurant/restaurants_filtered_view.dart +++ b/lib/src/views/pages/main/components/restaurant/restaurants_filtered_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -44,14 +45,12 @@ class RestaurantsFilteredView extends StatelessWidget { slivers: [ _appBar(context), SliverPadding( - padding: const EdgeInsets.symmetric( - horizontal: kDefaultHorizontalPadding, - ), + padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md), sliver: SliverToBoxAdapter( - child: KText( - text: '${filteredRestaurants.length} $pluralOrSingular found', - size: 20, - fontWeight: FontWeight.bold, + child: Text( + '${filteredRestaurants.length} $pluralOrSingular found', + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.bold), ), ), ), diff --git a/lib/src/views/pages/main/components/restaurant/restaurants_list_view.dart b/lib/src/views/pages/main/components/restaurant/restaurants_list_view.dart index f92fcbe..47e2650 100644 --- a/lib/src/views/pages/main/components/restaurant/restaurants_list_view.dart +++ b/lib/src/views/pages/main/components/restaurant/restaurants_list_view.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' @@ -32,20 +33,17 @@ class RestaurantsListView extends StatelessWidget { child: Center( child: Column( children: [ - KText( - text: errorMessage?.title ?? 'Something went wrong😔', - size: 22, + Text( + errorMessage?.title ?? 'Something went wrong 😔', + style: context.headlineSmall?.copyWith(), ), - const SizedBox( - height: 4, - ), - KText( - text: errorMessage?.solution ?? + const SizedBox(height: AppSpacing.xs), + Text( + errorMessage?.solution ?? 'Contact me emilzulufov.commercial@gmail.com to ' 'notify about error.', - size: 20, textAlign: TextAlign.center, - color: Colors.grey, + style: context.titleLarge?.apply(color: AppColors.grey), ), ], ), @@ -140,33 +138,30 @@ class RestaurantCard extends StatelessWidget { final int deliveryTime; final List tags; - Row _buildRestaurantInfo() => Row( + Widget _buildRestaurantInfo(BuildContext context) => Row( children: [ - _buildRatingAndQuality(), + _buildRatingAndQuality(context), _buildTags(), ], ); - KText _buildRating() { - return rating <= 3 - ? const KText(text: ' Only a few ratings') - : KText( - text: ' $rating ', - ); + Widget _buildRating() { + return rating <= 3 ? const Text(' Only a few ratings') : Text(' $rating '); } - StatelessWidget _buildQualityAndNumOfRatings() { + Widget _buildQualityAndNumOfRatings(BuildContext context) { return rating <= 3 - ? Container() - : KText( - text: numOfRatings >= 50 - ? '$quality ($numOfRatings+) ' - : 'Few Ratings ', - color: numOfRatings >= 30 ? Colors.black : Colors.black54, + ? const SizedBox.shrink() + : Text( + numOfRatings >= 50 ? '$quality ($numOfRatings+) ' : 'Few Ratings ', + style: context.bodyMedium?.apply( + color: + numOfRatings >= 30 ? AppColors.black : AppColors.background, + ), ); } - Row _buildRatingAndQuality() { + Row _buildRatingAndQuality(BuildContext context) { return Row( children: [ CustomIcon( @@ -176,21 +171,21 @@ class RestaurantCard extends StatelessWidget { type: IconType.simpleIcon, ), _buildRating(), - _buildQualityAndNumOfRatings(), + _buildQualityAndNumOfRatings(context), RestaurantPriceLevel(priceLevel: priceLevel), ], ); } - KText _buildTags() { + Widget _buildTags() { final tags$ = tags.isNotEmpty ? tags.length == 1 ? [tags.first.name] : [tags.first.name, tags.last.name] : []; - return KText( + return Text( /// The letter ',' comes from [Restaurant] from formattedTag - text: tags$.isEmpty ? '' : restaurant.formattedTag(tags$.cast()), + tags$.isEmpty ? '' : restaurant.formattedTag(tags$.cast()), ); } @@ -248,11 +243,11 @@ class RestaurantCard extends StatelessWidget { color: Colors.white, ), const SizedBox(width: 4), - KText( - text: '${deliveryTime$} - ${deliveryTime$ + 10} ' - 'min', - color: Colors.white, - size: 22, + Text( + '${deliveryTime$} - ${deliveryTime$ + 10} ' + 'min', + style: context.headlineSmall + ?.copyWith(fontWeight: AppFontWeight.regular), ), ], ), @@ -268,15 +263,15 @@ class RestaurantCard extends StatelessWidget { children: [ Hero( tag: 'Menu$name', - child: KText( - text: name, - size: 20, - fontWeight: FontWeight.bold, + child: Text( + name, + style: context.titleLarge + ?.copyWith(fontWeight: AppFontWeight.bold), ), ), ], ), - _buildRestaurantInfo(), + _buildRestaurantInfo(context), ], ), ), @@ -384,38 +379,30 @@ class RestaurantPriceLevel extends StatelessWidget { @override Widget build(BuildContext context) { - KText textToAppend(int priceLevel) => KText( - text: priceLevel == 1 + Widget textToAppend(int priceLevel) => Text( + priceLevel == 1 ? '$currency$currency' : priceLevel == 2 ? currency : '', - color: Colors.grey, + style: context.bodyMedium?.apply(color: AppColors.grey), ); - switch (priceLevel) { - case 0: - return const KText( - text: '', - ); - case 1: - return Row( + return switch (priceLevel) { + == 1 => Row( children: [ - const KText(text: ' $currency'), + const Text(' $currency'), textToAppend(priceLevel), ], - ); - case 2: - return Row( + ), + == 2 => Row( children: [ - const KText(text: ' $currency$currency'), + const Text(' $currency$currency'), textToAppend(priceLevel), ], - ); - case 3: - return const KText(text: ' $currency$currency$currency'); - default: - return const KText(text: ''); - } + ), + == 3 => const Text(' $currency$currency$currency'), + _ => const Text(''), + }; } } diff --git a/lib/src/views/pages/main/components/search/search_view.dart b/lib/src/views/pages/main/components/search/search_view.dart index c3d3a24..de7f827 100644 --- a/lib/src/views/pages/main/components/search/search_view.dart +++ b/lib/src/views/pages/main/components/search/search_view.dart @@ -1,5 +1,6 @@ import 'dart:math' show Random; +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart' show FontAwesomeIcons; @@ -85,15 +86,15 @@ class _SearchViewState extends State { children: [ Hero( tag: 'Menu${restaurant.name}', - child: KText( - text: restaurant.name, - size: 18, - fontWeight: FontWeight.bold, + child: Text( + restaurant.name, + style: context.bodyLarge + ?.copyWith(fontWeight: AppFontWeight.bold), ), ), - KText( - text: '${deliveryTime$} - ${deliveryTime$ + 10} min', - color: Colors.grey, + Text( + '${deliveryTime$} - ${deliveryTime$ + 10} min', + style: context.bodyMedium?.apply(color: AppColors.grey), ), ], ), @@ -117,29 +118,28 @@ class _SearchViewState extends State { if (snapshot.hasData) { final result = snapshot.data; if (result is SearchResultsError) { - return const Column( + return Column( children: [ - KText( - text: 'Unable to search for restaurants😕', - fontWeight: FontWeight.bold, - size: 24, + Text( + 'Unable to search for restaurants😕', textAlign: TextAlign.center, + style: context.headlineMedium + ?.copyWith(fontWeight: AppFontWeight.bold), ), ], ); } else if (result is SearchResultsLoading) { return const CustomCircularIndicator(color: Colors.black); } else if (result is SearchResultsNoResults) { - return const Column( + return Column( children: [ - KText( - text: 'Nothing found!', - size: 26, + Text( + 'Nothing found!', + style: context.headlineLarge, ), - KText( - text: 'Please try again.', - size: 20, - color: Colors.grey, + Text( + 'Please try again.', + style: context.titleLarge?.apply(color: AppColors.grey), ), ], ); @@ -178,7 +178,7 @@ class _SearchViewState extends State { ), ); } else { - return const KText(text: 'Unhandled state'); + return const Text('Unhandled state'); } } else { return _buildPopularRestaurants(context); diff --git a/lib/src/views/pages/register/components/register_form.dart b/lib/src/views/pages/register/components/register_form.dart index 52e3f28..9d34c3c 100644 --- a/lib/src/views/pages/register/components/register_form.dart +++ b/lib/src/views/pages/register/components/register_form.dart @@ -1,3 +1,4 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart' show BlocBuilder, BlocConsumer, ReadContext; @@ -106,9 +107,9 @@ class _RegisterFormState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const KText( - text: 'Register', - size: 24, + Text( + 'Register', + style: context.headlineMedium, ), const SizedBox(height: 16), AppTextField( diff --git a/lib/src/views/widgets/app_scaffold.dart b/lib/src/views/widgets/app_scaffold.dart index 77a7639..ab246e3 100644 --- a/lib/src/views/widgets/app_scaffold.dart +++ b/lib/src/views/widgets/app_scaffold.dart @@ -1,8 +1,8 @@ // ignore_for_file: avoid_positional_boolean_parameters +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:papa_burger/src/config/config.dart'; /// {@template custom_scaffold} /// App scaffold that is used as a wrapper for the pages. @@ -211,8 +211,8 @@ class _MaterialScaffold extends StatelessWidget { } } -/// Will pop scope extension that wraps widget with [PopScope]. -extension WillPopScopeX on Widget { +/// Pop scope extension that wraps widget with [PopScope]. +extension PopScopeX on Widget { /// Wraps widget with [PopScope]. Widget withPopScope(void Function(bool)? onPopInvoked) => PopScope(onPopInvoked: onPopInvoked, child: this); diff --git a/lib/src/views/widgets/custom_button_in_show_dialog.dart b/lib/src/views/widgets/custom_button_in_show_dialog.dart index f7d337b..e0bd76a 100644 --- a/lib/src/views/widgets/custom_button_in_show_dialog.dart +++ b/lib/src/views/widgets/custom_button_in_show_dialog.dart @@ -1,19 +1,17 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; -import 'package:papa_burger/src/views/widgets/k_text.dart'; class CustomButtonInShowDialog extends StatelessWidget { const CustomButtonInShowDialog({ required this.padding, required this.borderRadius, required this.text, - required this.size, required this.colorDecoration, super.key, }); final BorderRadiusGeometry borderRadius; final String text; - final double size; final Color colorDecoration; final EdgeInsets padding; @@ -27,12 +25,7 @@ class CustomButtonInShowDialog extends StatelessWidget { borderRadius: borderRadius, ), child: LimitedBox( - child: Center( - child: KText( - text: text, - size: size, - ), - ), + child: Center(child: Text(text, style: context.bodyLarge)), ), ); } diff --git a/lib/src/views/widgets/custom_modal_bottom_sheet.dart b/lib/src/views/widgets/custom_modal_bottom_sheet.dart index 9ecc2b8..6e6fe2c 100644 --- a/lib/src/views/widgets/custom_modal_bottom_sheet.dart +++ b/lib/src/views/widgets/custom_modal_bottom_sheet.dart @@ -1,6 +1,6 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; -import 'package:papa_burger/src/views/widgets/k_text.dart'; class CustomModalBottomSheet extends StatelessWidget { const CustomModalBottomSheet({ @@ -45,10 +45,10 @@ class CustomModalBottomSheet extends StatelessWidget { : kDefaultHorizontalPadding + 12, vertical: kDefaultHorizontalPadding + 8, ), - child: KText( - text: title!, - size: 28, - fontWeight: FontWeight.bold, + child: Text( + title!, + style: context.headlineLarge + ?.copyWith(fontWeight: AppFontWeight.bold), ), ), content, diff --git a/lib/src/views/widgets/custom_snack_bar.dart b/lib/src/views/widgets/custom_snack_bar.dart index 2083bb6..6cdc529 100644 --- a/lib/src/views/widgets/custom_snack_bar.dart +++ b/lib/src/views/widgets/custom_snack_bar.dart @@ -1,6 +1,6 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; -import 'package:papa_burger/src/views/widgets/k_text.dart'; SnackBar customSnackBar( String text, { @@ -25,23 +25,23 @@ SnackBar customSnackBar( vertical: kDefaultVerticalPadding, ), content: solution == null - ? KText( - text: text, + ? Text( + text, textAlign: TextAlign.center, - color: color, + style: TextStyle(color: color), ) : Column( children: [ - KText( - text: text, + Text( + text, textAlign: TextAlign.center, - color: color, + style: TextStyle(color: color), ), - KText( - text: solution, + Text( + solution, textAlign: TextAlign.center, - color: Colors.grey.shade300, - size: 14, + style: + const TextStyle(color: AppColors.brightGrey, fontSize: 14), ), ], ), diff --git a/lib/src/views/widgets/discount_price.dart b/lib/src/views/widgets/discount_price.dart index a35cbbc..16825dd 100644 --- a/lib/src/views/widgets/discount_price.dart +++ b/lib/src/views/widgets/discount_price.dart @@ -1,6 +1,6 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; -import 'package:papa_burger/src/views/widgets/k_text.dart'; class DiscountPrice extends StatelessWidget { const DiscountPrice({ @@ -28,11 +28,13 @@ class DiscountPrice extends StatelessWidget { return Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ - KText( - text: '$discountPrice ', - color: color ?? Colors.orange.shade800, - size: size, + Text( + '$discountPrice ', maxLines: 1, + style: context.bodyMedium?.copyWith( + color: color ?? Colors.orange.shade800, + fontSize: size, + ), ), LinedText( defaultPrice: defaultPrice, @@ -45,19 +47,21 @@ class DiscountPrice extends StatelessWidget { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - KText( - text: 'Delivery $discountPrice$currency ', + Text( + 'Delivery $discountPrice$currency ', maxLines: 1, - color: Colors.green, - fontWeight: FontWeight.bold, + style: context.bodyMedium?.copyWith( + color: AppColors.green, + fontWeight: AppFontWeight.bold, + ), ), LinedText(defaultPrice: defaultPrice, subSize: subSize), ], ); } - return KText( - text: defaultPrice, - size: size, + return Text( + defaultPrice, + style: context.bodyMedium?.copyWith(fontSize: size), ); } } @@ -78,15 +82,15 @@ class LinedText extends StatelessWidget { maxWidth: 70, child: Column( children: [ - const SizedBox( - height: 3, - ), - KText( - text: defaultPrice, - decoration: TextDecoration.lineThrough, - color: Colors.grey, - size: subSize, + const SizedBox(height: AppSpacing.xs), + Text( + defaultPrice, maxLines: 1, + style: context.bodyMedium?.copyWith( + color: AppColors.grey, + decoration: TextDecoration.lineThrough, + fontSize: subSize, + ), ), ], ), diff --git a/lib/src/views/widgets/dot_separator.dart b/lib/src/views/widgets/dot_separator.dart index 3912a49..29113f8 100644 --- a/lib/src/views/widgets/dot_separator.dart +++ b/lib/src/views/widgets/dot_separator.dart @@ -1,6 +1,4 @@ -import 'package:flutter/material.dart' - show BuildContext, EdgeInsets, Padding, StatelessWidget, Widget; -import 'package:papa_burger/src/views/widgets/k_text.dart'; +import 'package:flutter/material.dart'; class DotSeparator extends StatelessWidget { const DotSeparator({ @@ -14,7 +12,7 @@ class DotSeparator extends StatelessWidget { Widget build(BuildContext context) { return Padding( padding: EdgeInsets.symmetric(horizontal: padding), - child: const KText(text: '•'), + child: const Text('•'), ); } } diff --git a/lib/src/views/widgets/expanded_elevated_button.dart b/lib/src/views/widgets/expanded_elevated_button.dart index 8fd6c4f..523e06c 100644 --- a/lib/src/views/widgets/expanded_elevated_button.dart +++ b/lib/src/views/widgets/expanded_elevated_button.dart @@ -1,5 +1,5 @@ +import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; -import 'package:papa_burger/src/views/widgets/k_text.dart'; class ExpandedElevatedButton extends StatelessWidget { const ExpandedElevatedButton({ @@ -57,10 +57,10 @@ class ExpandedElevatedButton extends StatelessWidget { borderRadius: BorderRadius.circular(radius), ), ), - label: KText( - text: label, - size: size, - color: textColor, + label: Text( + label, + style: context.bodyMedium + ?.copyWith(color: textColor, fontSize: size), ), icon: icon, ) @@ -73,10 +73,10 @@ class ExpandedElevatedButton extends StatelessWidget { ), ), onPressed: onTap, - child: KText( - text: label, - size: size, - color: textColor, + child: Text( + label, + style: context.bodyMedium + ?.copyWith(fontSize: size, color: textColor), ), ), ); diff --git a/lib/src/views/widgets/k_text.dart b/lib/src/views/widgets/k_text.dart deleted file mode 100644 index 2e0a7d1..0000000 --- a/lib/src/views/widgets/k_text.dart +++ /dev/null @@ -1,45 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:papa_burger/src/config/utils/app_constants.dart'; - -class KText extends StatelessWidget { - const KText({ - required this.text, - super.key, - this.letterSpacing, - this.color = Colors.black, - this.size = 16, - this.textOverflow = TextOverflow.ellipsis, - this.textAlign = TextAlign.start, - this.fontWeight = FontWeight.w500, - this.maxLines = 2, - this.decoration = TextDecoration.none, - }); - - final int maxLines; - final double size; - final double? letterSpacing; - final Color color; - final String text; - final TextAlign textAlign; - final FontWeight fontWeight; - final TextOverflow textOverflow; - final TextDecoration decoration; - - @override - Widget build(BuildContext context) { - return Text( - text, - softWrap: true, - style: defaultTextStyle( - color: color, - decoration: decoration, - fontWeight: fontWeight, - letterSpacing: letterSpacing, - size: size, - ), - overflow: textOverflow, - maxLines: maxLines, - textAlign: textAlign, - ); - } -} diff --git a/lib/src/views/widgets/show_custom_dialog.dart b/lib/src/views/widgets/show_custom_dialog.dart index 0d21abd..4b92157 100644 --- a/lib/src/views/widgets/show_custom_dialog.dart +++ b/lib/src/views/widgets/show_custom_dialog.dart @@ -1,20 +1,9 @@ -import 'package:flutter/material.dart' - show - AlertDialog, - BorderRadius, - BuildContext, - Colors, - EdgeInsets, - Expanded, - GestureDetector, - RoundedRectangleBorder, - Row, - SizedBox, - showDialog; +import 'package:app_ui/app_ui.dart'; +import 'package:flutter/material.dart'; import 'package:papa_burger/src/config/config.dart'; import 'package:papa_burger/src/views/widgets/widgets.dart'; -Future showCustomDialog( +Future showCustomDialog( BuildContext context, { required void Function() onTap, required String alertText, @@ -25,15 +14,11 @@ Future showCustomDialog( context: context, builder: (context) { return AlertDialog( - content: KText( - text: alertText, - maxLines: 3, - size: 18, - ), + content: Text(alertText), shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(18), + borderRadius: BorderRadius.circular(AppSpacing.lg + AppSpacing.xxs), ), - contentPadding: const EdgeInsets.fromLTRB(12, 12, 12, 12), + contentPadding: const EdgeInsets.all(AppSpacing.md), actions: [ Row( children: [ @@ -41,25 +26,23 @@ Future showCustomDialog( child: GestureDetector( onTap: () => context.pop(withHapticFeedback: true), child: CustomButtonInShowDialog( - borderRadius: BorderRadius.circular(18), - padding: const EdgeInsets.all(10), + borderRadius: + BorderRadius.circular(AppSpacing.lg + AppSpacing.xxs), + padding: const EdgeInsets.all(AppSpacing.md), colorDecoration: Colors.grey.shade200, - size: 18, text: cancelText, ), ), ), - const SizedBox( - width: 10, - ), + const SizedBox(width: AppSpacing.md), Expanded( child: GestureDetector( onTap: onTap, child: CustomButtonInShowDialog( - borderRadius: BorderRadius.circular(18), - padding: const EdgeInsets.all(10), - colorDecoration: kPrimaryBackgroundColor, - size: 18, + borderRadius: + BorderRadius.circular(AppSpacing.lg + AppSpacing.xxs), + padding: const EdgeInsets.all(AppSpacing.md), + colorDecoration: AppColors.indigo, text: actionText, ), ), diff --git a/lib/src/views/widgets/widgets.dart b/lib/src/views/widgets/widgets.dart index 4f818af..69e80f2 100644 --- a/lib/src/views/widgets/widgets.dart +++ b/lib/src/views/widgets/widgets.dart @@ -10,7 +10,6 @@ export 'discount_price.dart'; export 'dot_separator.dart'; export 'expanded_elevated_button.dart'; export 'hex_color.dart'; -export 'k_text.dart'; export 'shimmer_loading.dart'; export 'show_custom_dialog.dart'; export 'show_empty_loading_page.dart'; diff --git a/packages/app_ui/.gitignore b/packages/app_ui/.gitignore new file mode 100644 index 0000000..06ef8e6 --- /dev/null +++ b/packages/app_ui/.gitignore @@ -0,0 +1,44 @@ +# Miscellaneous +*.class +*.log +*.pyc +*.swp +.DS_Store +.atom/ +.buildlog/ +.history +.svn/ +migrate_working_dir/ + +# IntelliJ related +*.iml +*.ipr +*.iws +.idea/ + +# VSCode related +.vscode/* + +# Flutter/Dart/Pub related +**/doc/api/ +**/ios/Flutter/.last_build_id +.dart_tool/ +.flutter-plugins +.flutter-plugins-dependencies +.packages +.pub-cache/ +.pub/ +/build/ +pubspec.lock + +# Web related +lib/generated_plugin_registrant.dart + +# Symbolication related +app.*.symbols + +# Obfuscation related +app.*.map.json + +# Test related +coverage \ No newline at end of file diff --git a/packages/app_ui/README.md b/packages/app_ui/README.md new file mode 100644 index 0000000..2a05f7a --- /dev/null +++ b/packages/app_ui/README.md @@ -0,0 +1,67 @@ +# App Ui + +[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link] +[![Powered by Mason](https://img.shields.io/endpoint?url=https%3A%2F%2Ftinyurl.com%2Fmason-badge)](https://github.com/felangel/mason) +[![License: MIT][license_badge]][license_link] + +Application UI components holder. + +## Installation 💻 + +**❗ In order to start using App Ui you must have the [Flutter SDK][flutter_install_link] installed on your machine.** + +Install via `flutter pub add`: + +```sh +dart pub add app_ui +``` + +--- + +## Continuous Integration 🤖 + +App Ui comes with a built-in [GitHub Actions workflow][github_actions_link] powered by [Very Good Workflows][very_good_workflows_link] but you can also add your preferred CI/CD solution. + +Out of the box, on each pull request and push, the CI `formats`, `lints`, and `tests` the code. This ensures the code remains consistent and behaves correctly as you add functionality or make changes. The project uses [Very Good Analysis][very_good_analysis_link] for a strict set of analysis options used by our team. Code coverage is enforced using the [Very Good Workflows][very_good_coverage_link]. + +--- + +## Running Tests 🧪 + +For first time users, install the [very_good_cli][very_good_cli_link]: + +```sh +dart pub global activate very_good_cli +``` + +To run all unit tests: + +```sh +very_good test --coverage +``` + +To view the generated coverage report you can use [lcov](https://github.com/linux-test-project/lcov). + +```sh +# Generate Coverage Report +genhtml coverage/lcov.info -o coverage/ + +# Open Coverage Report +open coverage/index.html +``` + +[flutter_install_link]: https://docs.flutter.dev/get-started/install +[github_actions_link]: https://docs.github.com/en/actions/learn-github-actions +[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg +[license_link]: https://opensource.org/licenses/MIT +[logo_black]: https://raw.githubusercontent.com/VGVentures/very_good_brand/main/styles/README/vgv_logo_black.png#gh-light-mode-only +[logo_white]: https://raw.githubusercontent.com/VGVentures/very_good_brand/main/styles/README/vgv_logo_white.png#gh-dark-mode-only +[mason_link]: https://github.com/felangel/mason +[very_good_analysis_badge]: https://img.shields.io/badge/style-very_good_analysis-B22C89.svg +[very_good_analysis_link]: https://pub.dev/packages/very_good_analysis +[very_good_cli_link]: https://pub.dev/packages/very_good_cli +[very_good_coverage_link]: https://github.com/marketplace/actions/very-good-coverage +[very_good_ventures_link]: https://verygood.ventures +[very_good_ventures_link_light]: https://verygood.ventures#gh-light-mode-only +[very_good_ventures_link_dark]: https://verygood.ventures#gh-dark-mode-only +[very_good_workflows_link]: https://github.com/VeryGoodOpenSource/very_good_workflows diff --git a/packages/app_ui/analysis_options.yaml b/packages/app_ui/analysis_options.yaml new file mode 100644 index 0000000..799268d --- /dev/null +++ b/packages/app_ui/analysis_options.yaml @@ -0,0 +1 @@ +include: package:very_good_analysis/analysis_options.5.1.0.yaml diff --git a/packages/app_ui/coverage_badge.svg b/packages/app_ui/coverage_badge.svg new file mode 100644 index 0000000..499e98c --- /dev/null +++ b/packages/app_ui/coverage_badge.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + coverage + coverage + 100% + 100% + + diff --git a/packages/app_ui/lib/app_ui.dart b/packages/app_ui/lib/app_ui.dart new file mode 100644 index 0000000..f5134ad --- /dev/null +++ b/packages/app_ui/lib/app_ui.dart @@ -0,0 +1,9 @@ +/// Application UI components holder. +library; + +export 'src/colors/app_colors.dart'; +export 'src/extensions/extensions.dart'; +export 'src/size/app_size.dart'; +export 'src/spacing/app_spacing.dart'; +export 'src/theme/theme.dart'; +export 'src/typography/typography.dart'; diff --git a/lib/src/config/colors/app_colors.dart b/packages/app_ui/lib/src/colors/app_colors.dart similarity index 89% rename from lib/src/config/colors/app_colors.dart rename to packages/app_ui/lib/src/colors/app_colors.dart index 63e8a7f..a485218 100644 --- a/lib/src/config/colors/app_colors.dart +++ b/packages/app_ui/lib/src/colors/app_colors.dart @@ -23,6 +23,12 @@ abstract class AppColors { /// The deep blue color. static const Color deepBlue = Color(0xff337eff); + /// The green color. + static const MaterialColor green = Colors.green; + + /// The primary background indigo color. + static const Color indigo = Color.fromARGB(255, 92, 107, 192); + /// The border outline color. static const Color borderOutline = Color.fromARGB(45, 250, 250, 250); diff --git a/lib/src/config/extensions/build_context_extension.dart b/packages/app_ui/lib/src/extensions/build_context_extension.dart similarity index 94% rename from lib/src/config/extensions/build_context_extension.dart rename to packages/app_ui/lib/src/extensions/build_context_extension.dart index 0b709af..1fb7049 100644 --- a/lib/src/config/extensions/build_context_extension.dart +++ b/packages/app_ui/lib/src/extensions/build_context_extension.dart @@ -1,6 +1,6 @@ +import 'package:app_ui/src/colors/app_colors.dart'; +import 'package:app_ui/src/extensions/text_style_extension.dart'; import 'package:flutter/material.dart'; -import 'package:papa_burger/src/config/colors/app_colors.dart'; -import 'package:papa_burger/src/config/extensions/extensions.dart'; /// Provides values of current device screen `width` and `height` by provided /// context. diff --git a/packages/app_ui/lib/src/extensions/extensions.dart b/packages/app_ui/lib/src/extensions/extensions.dart new file mode 100644 index 0000000..87d3ade --- /dev/null +++ b/packages/app_ui/lib/src/extensions/extensions.dart @@ -0,0 +1,2 @@ +export 'build_context_extension.dart'; +export 'text_style_extension.dart'; diff --git a/lib/src/config/extensions/text_style_extension.dart b/packages/app_ui/lib/src/extensions/text_style_extension.dart similarity index 100% rename from lib/src/config/extensions/text_style_extension.dart rename to packages/app_ui/lib/src/extensions/text_style_extension.dart diff --git a/packages/app_ui/lib/src/size/app_size.dart b/packages/app_ui/lib/src/size/app_size.dart new file mode 100644 index 0000000..fd4e931 --- /dev/null +++ b/packages/app_ui/lib/src/size/app_size.dart @@ -0,0 +1,25 @@ +/// {@template app_size} +/// The AppSize class that contains the size of the different UI components. +/// {@endtemplate} +abstract class AppSize { + /// {@macro app_size} + const AppSize(); + + /// The big size of icon (36.0) + static const iconSizeBig = 36.0; + + /// The default size of icon (30.0) + static const iconSize = 30.0; + + /// The medium size of icon (24.0) + static const iconSizeMedium = 24.0; + + /// The small size of icon (18.0) + static const iconSizeSmall = 18.0; + + /// The extra small size of icon (12.0) + static const iconSizeXSmall = 12.0; + + /// The size of bottom bar icon (24.0) + static const bottomBarIconSize = 24.0; +} diff --git a/packages/app_ui/lib/src/spacing/app_spacing.dart b/packages/app_ui/lib/src/spacing/app_spacing.dart new file mode 100644 index 0000000..d4c4390 --- /dev/null +++ b/packages/app_ui/lib/src/spacing/app_spacing.dart @@ -0,0 +1,32 @@ +/// Default Spacing in App UI. +abstract class AppSpacing { + /// The default unit of spacing + static const double spaceUnit = 16; + + /// xxxs spacing value (1pt) + static const double xxxs = 0.0625 * spaceUnit; + + /// xxs spacing value (2pt) + static const double xxs = 0.125 * spaceUnit; + + /// xs spacing value (4pt) + static const double xs = 0.25 * spaceUnit; + + /// sm spacing value (8pt) + static const double sm = 0.5 * spaceUnit; + + /// md spacing value (12pt) + static const double md = 0.75 * spaceUnit; + + /// lg spacing value (16pt) + static const double lg = spaceUnit; + + /// xlg spacing value (24pt) + static const double xlg = 1.5 * spaceUnit; + + /// xxlg spacing value (40pt) + static const double xxlg = 2.5 * spaceUnit; + + /// xxxlg pacing value (64pt) + static const double xxxlg = 4 * spaceUnit; +} diff --git a/packages/app_ui/lib/src/theme/app_theme.dart b/packages/app_ui/lib/src/theme/app_theme.dart new file mode 100644 index 0000000..0831b7e --- /dev/null +++ b/packages/app_ui/lib/src/theme/app_theme.dart @@ -0,0 +1,255 @@ +import 'package:app_ui/app_ui.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +/// {@template app_theme} +/// The Default App [ThemeData]. +/// {@endtemplate} +class AppTheme { + /// {@macro app_theme} + const AppTheme(); + + /// Defines the brightness of theme. + Brightness get brightness => Brightness.light; + + /// Defines the background color of theme. + Color get backgroundColor => AppColors.white; + + /// Defines the primary color of theme. + Color get primary => AppColors.black; + + /// Defines light [ThemeData]. + ThemeData get theme => FlexThemeData.light( + scheme: FlexScheme.custom, + colors: FlexSchemeColor.from( + brightness: brightness, + primary: primary, + swapOnMaterial3: true, + ), + useMaterial3: true, + useMaterial3ErrorColors: true, + ).copyWith( + textTheme: const AppTheme().textTheme, + iconTheme: const IconThemeData(color: AppColors.black), + inputDecorationTheme: const InputDecorationTheme( + contentPadding: EdgeInsets.symmetric(horizontal: AppSpacing.md), + border: OutlineInputBorder(borderSide: BorderSide.none), + ), + appBarTheme: const AppBarTheme( + elevation: 0, + surfaceTintColor: AppColors.white, + backgroundColor: AppColors.white, + ), + bottomNavigationBarTheme: const BottomNavigationBarThemeData( + type: BottomNavigationBarType.fixed, + ), + bottomSheetTheme: const BottomSheetThemeData( + showDragHandle: true, + surfaceTintColor: AppColors.white, + backgroundColor: AppColors.white, + ), + ); + + /// Defines iOS dart SystemUiOverlayStyle. + static const SystemUiOverlayStyle iOSDarkSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.light, + statusBarColor: AppColors.transparent, + statusBarIconBrightness: Brightness.light, + systemNavigationBarIconBrightness: Brightness.light, + ); + + /// Text theme of the App theme. + TextTheme get textTheme => contentTextTheme; + + /// The Content text theme based on [ContentTextStyle]. + static final contentTextTheme = TextTheme( + displayLarge: ContentTextStyle.headline1, + displayMedium: ContentTextStyle.headline2, + displaySmall: ContentTextStyle.headline3, + headlineLarge: ContentTextStyle.headline4, + headlineMedium: ContentTextStyle.headline5, + headlineSmall: ContentTextStyle.headline6, + titleLarge: ContentTextStyle.headline7, + titleMedium: ContentTextStyle.subtitle1, + titleSmall: ContentTextStyle.subtitle2, + bodyLarge: ContentTextStyle.bodyText1, + bodyMedium: ContentTextStyle.bodyText2, + labelLarge: ContentTextStyle.button, + bodySmall: ContentTextStyle.caption, + labelSmall: ContentTextStyle.overline, + ).apply( + bodyColor: AppColors.black, + displayColor: AppColors.black, + decorationColor: AppColors.black, + ); + + /// The UI text theme based on [UITextStyle]. + static final uiTextTheme = TextTheme( + displayLarge: UITextStyle.headline1, + displayMedium: UITextStyle.headline2, + displaySmall: UITextStyle.headline3, + headlineMedium: UITextStyle.headline4, + headlineSmall: UITextStyle.headline5, + titleLarge: UITextStyle.headline6, + titleMedium: UITextStyle.subtitle1, + titleSmall: UITextStyle.subtitle2, + bodyLarge: UITextStyle.bodyText1, + bodyMedium: UITextStyle.bodyText2, + labelLarge: UITextStyle.button, + bodySmall: UITextStyle.caption, + labelSmall: UITextStyle.overline, + ).apply( + bodyColor: AppColors.black, + displayColor: AppColors.black, + decorationColor: AppColors.black, + ); +} + +/// {@template app_dark_theme} +/// Dark Mode App [ThemeData]. +/// {@endtemplate} +class AppDarkTheme extends AppTheme { + /// {@macro app_dark_theme} + const AppDarkTheme(); + + @override + Brightness get brightness => Brightness.dark; + + @override + Color get backgroundColor => AppColors.black; + + @override + Color get primary => AppColors.white; + + @override + TextTheme get textTheme { + return AppTheme.contentTextTheme.apply( + bodyColor: AppColors.white, + displayColor: AppColors.white, + decorationColor: AppColors.white, + ); + } + + @override + ThemeData get theme => FlexThemeData.dark( + scheme: FlexScheme.custom, + darkIsTrueBlack: true, + colors: FlexSchemeColor.from( + brightness: brightness, + primary: primary, + appBarColor: AppColors.transparent, + swapOnMaterial3: true, + ), + useMaterial3: true, + useMaterial3ErrorColors: true, + ).copyWith( + textTheme: const AppDarkTheme().textTheme, + iconTheme: const IconThemeData(color: AppColors.white), + inputDecorationTheme: const InputDecorationTheme( + contentPadding: EdgeInsets.symmetric(horizontal: AppSpacing.md), + border: OutlineInputBorder(borderSide: BorderSide.none), + ), + appBarTheme: const AppBarTheme( + elevation: 0, + backgroundColor: AppColors.black, + surfaceTintColor: AppColors.black, + ), + bottomNavigationBarTheme: const BottomNavigationBarThemeData( + type: BottomNavigationBarType.fixed, + ), + bottomSheetTheme: const BottomSheetThemeData( + surfaceTintColor: AppColors.background, + backgroundColor: AppColors.background, + modalBackgroundColor: AppColors.background, + ), + ); +} + +/// Theme for the [SystemUiOverlayStyle] +class SystemUiOverlayTheme { + /// {@macro system_ui_overlay_theme} + const SystemUiOverlayTheme(); + + /// Defines restaurant view SystemUiOverlayStyle. + static const SystemUiOverlayStyle restaurantViewSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.dark, + statusBarColor: Colors.transparent, + statusBarIconBrightness: Brightness.dark, + systemNavigationBarColor: Colors.white, + systemNavigationBarDividerColor: Colors.transparent, + systemNavigationBarIconBrightness: Brightness.dark, + ); + + /// Defines restaurant header SystemUiOverlayStyle. + static const SystemUiOverlayStyle restaurantHeaderSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.light, + statusBarIconBrightness: Brightness.light, + statusBarColor: Colors.black45, + ); + + /// Defines google cart view SystemUiOverlayStyle. + static const SystemUiOverlayStyle cartViewSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.dark, + statusBarColor: Colors.transparent, + statusBarIconBrightness: Brightness.dark, + systemNavigationBarColor: Colors.white, + systemNavigationBarDividerColor: Colors.transparent, + systemNavigationBarIconBrightness: Brightness.dark, + ); + + /// Defines google map view SystemUiOverlayStyle. + static const SystemUiOverlayStyle googleMapSystemBarTheme = + SystemUiOverlayStyle( + statusBarColor: Colors.transparent, + statusBarIconBrightness: Brightness.dark, + systemNavigationBarColor: Colors.transparent, + systemNavigationBarIconBrightness: Brightness.dark, + ); + + /// Defines iOS light SystemUiOverlayStyle. + static const SystemUiOverlayStyle iOSLightSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.dark, + statusBarColor: AppColors.transparent, + statusBarIconBrightness: Brightness.light, + systemNavigationBarIconBrightness: Brightness.dark, + ); + + /// Defines iOS dark SystemUiOverlayStyle. + static const SystemUiOverlayStyle iOSDarkSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.light, + statusBarColor: AppColors.transparent, + statusBarIconBrightness: Brightness.light, + systemNavigationBarIconBrightness: Brightness.light, + ); + + /// Defines Android light SystemUiOverlayStyle. + static const SystemUiOverlayStyle androidLightSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.light, + statusBarColor: AppColors.white, + statusBarIconBrightness: Brightness.dark, + systemNavigationBarIconBrightness: Brightness.dark, + ); + + /// Defines light SystemUiOverlayStyle. + static const SystemUiOverlayStyle androidDarkSystemBarTheme = + SystemUiOverlayStyle( + statusBarBrightness: Brightness.dark, + statusBarColor: AppColors.black, + statusBarIconBrightness: Brightness.light, + systemNavigationBarIconBrightness: Brightness.light, + ); + + /// Defines a portrait only orientation for any device. + static void setPortraitOrientation() { + SystemChrome.setPreferredOrientations( + [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown], + ); + } +} diff --git a/packages/app_ui/lib/src/theme/theme.dart b/packages/app_ui/lib/src/theme/theme.dart new file mode 100644 index 0000000..1ee4350 --- /dev/null +++ b/packages/app_ui/lib/src/theme/theme.dart @@ -0,0 +1,3 @@ +export 'package:flex_color_scheme/flex_color_scheme.dart'; + +export 'app_theme.dart'; diff --git a/packages/app_ui/lib/src/typography/app_font_weight.dart b/packages/app_ui/lib/src/typography/app_font_weight.dart new file mode 100644 index 0000000..cf505d4 --- /dev/null +++ b/packages/app_ui/lib/src/typography/app_font_weight.dart @@ -0,0 +1,31 @@ +import 'package:flutter/widgets.dart'; + +/// Namespace for Default App Font Weights +abstract class AppFontWeight { + /// FontWeight value of `w900` + static const FontWeight black = FontWeight.w900; + + /// FontWeight value of `w800` + static const FontWeight extraBold = FontWeight.w800; + + /// FontWeight value of `w700` + static const FontWeight bold = FontWeight.w700; + + /// FontWeight value of `w600` + static const FontWeight semiBold = FontWeight.w600; + + /// FontWeight value of `w500` + static const FontWeight medium = FontWeight.w500; + + /// FontWeight value of `w400` + static const FontWeight regular = FontWeight.w400; + + /// FontWeight value of `w300` + static const FontWeight light = FontWeight.w300; + + /// FontWeight value of `w200` + static const FontWeight extraLight = FontWeight.w200; + + /// FontWeight value of `w100` + static const FontWeight thin = FontWeight.w100; +} diff --git a/packages/app_ui/lib/src/typography/app_text_styles.dart b/packages/app_ui/lib/src/typography/app_text_styles.dart new file mode 100644 index 0000000..274fcc1 --- /dev/null +++ b/packages/app_ui/lib/src/typography/app_text_styles.dart @@ -0,0 +1,280 @@ +import 'package:app_ui/app_ui.dart'; +import 'package:flutter/material.dart'; + +/// The app consists of two main text style definitions: UI and Content. +/// +/// Content text style is primarily used for all content-based components, +/// e.g. news feed including articles and sections, while the UI text style +/// is used for the rest of UI components. +/// +/// The default app's [TextTheme] is [AppTheme.uiTextTheme]. +/// +/// Use `ContentThemeOverrideBuilder` to override the default [TextTheme] +/// to [AppTheme.contentTextTheme]. + +/// UI Text Style Definitions +abstract class UITextStyle { + static const _baseTextStyle = TextStyle( + package: 'app_ui', + fontWeight: AppFontWeight.medium, + fontFamily: 'Inter', + decoration: TextDecoration.none, + textBaseline: TextBaseline.alphabetic, + ); + + /// Display 2 Text Style + static final TextStyle display2 = _baseTextStyle.copyWith( + fontSize: 57, + fontWeight: AppFontWeight.bold, + height: 1.12, + letterSpacing: -0.25, + ); + + /// Display 3 Text Style + static final TextStyle display3 = _baseTextStyle.copyWith( + fontSize: 45, + fontWeight: AppFontWeight.bold, + height: 1.15, + ); + + /// Headline 1 Text Style + static final TextStyle headline1 = _baseTextStyle.copyWith( + fontSize: 36, + fontWeight: AppFontWeight.bold, + height: 1.22, + ); + + /// Headline 2 Text Style + static final TextStyle headline2 = _baseTextStyle.copyWith( + fontSize: 32, + fontWeight: AppFontWeight.bold, + height: 1.25, + ); + + /// Headline 3 Text Style + static final TextStyle headline3 = _baseTextStyle.copyWith( + fontSize: 28, + fontWeight: AppFontWeight.semiBold, + height: 1.28, + ); + + /// Headline 4 Text Style + static final TextStyle headline4 = _baseTextStyle.copyWith( + fontSize: 24, + fontWeight: AppFontWeight.semiBold, + height: 1.33, + ); + + /// Headline 5 Text Style + static final TextStyle headline5 = _baseTextStyle.copyWith( + fontSize: 22, + fontWeight: AppFontWeight.regular, + height: 1.27, + ); + + /// Headline 6 Text Style + static final TextStyle headline6 = _baseTextStyle.copyWith( + fontSize: 22, + fontWeight: AppFontWeight.semiBold, + height: 1.33, + ); + + /// Subtitle 1 Text Style + static final TextStyle subtitle1 = _baseTextStyle.copyWith( + fontSize: 16, + height: 1.5, + letterSpacing: 0.1, + ); + + /// Subtitle 2 Text Style + static final TextStyle subtitle2 = _baseTextStyle.copyWith( + fontSize: 14, + height: 1.42, + letterSpacing: 0.1, + ); + + /// Body Text 1 Text Style + static final TextStyle bodyText1 = _baseTextStyle.copyWith( + fontSize: 16, + height: 1.5, + letterSpacing: 0.5, + ); + + /// Body Text 2 Text Style (the default) + static final TextStyle bodyText2 = _baseTextStyle.copyWith( + fontSize: 14, + height: 1.42, + letterSpacing: 0.25, + ); + + /// Caption Text Style + static final TextStyle caption = _baseTextStyle.copyWith( + fontSize: 12, + height: 1.33, + letterSpacing: 0.4, + ); + + /// Button Text Style + static final TextStyle button = _baseTextStyle.copyWith( + fontSize: 16, + height: 1.42, + letterSpacing: 0.1, + ); + + /// Overline Text Style + static final TextStyle overline = _baseTextStyle.copyWith( + fontSize: 12, + height: 1.33, + letterSpacing: 0.5, + ); + + /// Label Small Text Style + static final TextStyle labelSmall = _baseTextStyle.copyWith( + fontSize: 11, + height: 1.45, + letterSpacing: 0.5, + ); +} + +/// Content Text Style Definitions +abstract class ContentTextStyle { + static const _baseTextStyle = TextStyle( + package: 'app_ui', + fontWeight: AppFontWeight.medium, + fontFamily: 'Inter', + decoration: TextDecoration.none, + textBaseline: TextBaseline.alphabetic, + ); + + /// Display 1 Text Style + static final TextStyle display1 = _baseTextStyle.copyWith( + fontSize: 64, + fontWeight: AppFontWeight.bold, + height: 1.18, + letterSpacing: -0.5, + ); + + /// Display 2 Text Style + static final TextStyle display2 = _baseTextStyle.copyWith( + fontSize: 57, + fontWeight: AppFontWeight.bold, + height: 1.12, + letterSpacing: -0.25, + ); + + /// Display 3 Text Style + static final TextStyle display3 = _baseTextStyle.copyWith( + fontSize: 45, + fontWeight: AppFontWeight.bold, + height: 1.15, + ); + + /// Headline 1 Text Style + static final TextStyle headline1 = _baseTextStyle.copyWith( + fontSize: 57, + fontWeight: AppFontWeight.semiBold, + height: 1.22, + ); + + /// Headline 2 Text Style + static final TextStyle headline2 = _baseTextStyle.copyWith( + fontSize: 45, + fontWeight: AppFontWeight.medium, + height: 1.25, + ); + + /// Headline 3 Text Style + static final TextStyle headline3 = _baseTextStyle.copyWith( + fontSize: 36, + fontWeight: AppFontWeight.medium, + height: 1.28, + ); + + /// Headline 4 Text Style + static final TextStyle headline4 = _baseTextStyle.copyWith( + fontSize: 32, + fontWeight: AppFontWeight.semiBold, + height: 1.33, + ); + + /// Headline 5 Text Style + static final TextStyle headline5 = _baseTextStyle.copyWith( + fontSize: 28, + fontWeight: AppFontWeight.semiBold, + height: 1.33, + ); + + /// Headline 6 Text Style + static final TextStyle headline6 = _baseTextStyle.copyWith( + fontFamily: 'Inter', + fontSize: 24, + height: 1.27, + fontWeight: AppFontWeight.bold, + ); + + /// Headline 7 Text Style + static final TextStyle headline7 = _baseTextStyle.copyWith( + fontSize: 22, + fontWeight: AppFontWeight.semiBold, + height: 1.33, + ); + + /// Subtitle 1 Text Style + static final TextStyle subtitle1 = _baseTextStyle.copyWith( + fontSize: 16, + height: 1.5, + letterSpacing: 0.1, + ); + + /// Subtitle 2 Text Style + static final TextStyle subtitle2 = _baseTextStyle.copyWith( + fontSize: 14, + fontWeight: AppFontWeight.medium, + height: 1.42, + letterSpacing: 0.1, + ); + + /// Body Text 1 Text Style + static final TextStyle bodyText1 = _baseTextStyle.copyWith( + fontSize: 16, + height: 1.5, + letterSpacing: 0.5, + ); + + /// Body Text 2 Text Style (the default) + static final TextStyle bodyText2 = _baseTextStyle.copyWith( + fontSize: 14, + height: 1.42, + letterSpacing: 0.25, + ); + + /// Button Text Style + static final TextStyle button = _baseTextStyle.copyWith( + fontSize: 14, + fontWeight: AppFontWeight.bold, + height: 1.42, + letterSpacing: 0.1, + ); + + /// Caption Text Style + static final TextStyle caption = _baseTextStyle.copyWith( + fontSize: 12, + height: 1.33, + letterSpacing: 0.4, + ); + + /// Overline Text Style + static final TextStyle overline = _baseTextStyle.copyWith( + fontWeight: AppFontWeight.semiBold, + fontSize: 12, + height: 1.33, + letterSpacing: 0.5, + ); + + /// Label Small Text Style + static final TextStyle labelSmall = _baseTextStyle.copyWith( + fontSize: 11, + height: 1.45, + letterSpacing: 0.5, + ); +} diff --git a/packages/app_ui/lib/src/typography/typography.dart b/packages/app_ui/lib/src/typography/typography.dart new file mode 100644 index 0000000..de31103 --- /dev/null +++ b/packages/app_ui/lib/src/typography/typography.dart @@ -0,0 +1,2 @@ +export 'app_font_weight.dart'; +export 'app_text_styles.dart'; diff --git a/packages/app_ui/pubspec.yaml b/packages/app_ui/pubspec.yaml new file mode 100644 index 0000000..cb08682 --- /dev/null +++ b/packages/app_ui/pubspec.yaml @@ -0,0 +1,19 @@ +name: app_ui +description: Application UI components holder. +version: 0.1.0+1 +publish_to: none + +environment: + sdk: "^3.3.0" + flutter: "^3.19.0" + +dependencies: + flex_color_scheme: ^7.3.1 + flutter: + sdk: flutter + +dev_dependencies: + flutter_test: + sdk: flutter + mocktail: ^1.0.3 + very_good_analysis: ^5.1.0 diff --git a/packages/app_ui/test/src/app_ui_test.dart b/packages/app_ui/test/src/app_ui_test.dart new file mode 100644 index 0000000..8236008 --- /dev/null +++ b/packages/app_ui/test/src/app_ui_test.dart @@ -0,0 +1,9 @@ +// ignore_for_file: prefer_const_constructors + +import 'package:flutter_test/flutter_test.dart'; + +void main() { + group('AppUi', () { + test('can be instantiated', () {}); + }); +} diff --git a/pubspec.lock b/pubspec.lock index e7ac6d0..5810dad 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -25,6 +25,13 @@ packages: url: "https://pub.dev" source: hosted version: "6.4.1" + app_ui: + dependency: "direct main" + description: + path: "packages/app_ui" + relative: true + source: path + version: "0.1.0+1" archive: dependency: transitive description: @@ -417,6 +424,22 @@ packages: url: "https://pub.dev" source: hosted version: "1.1.0" + flex_color_scheme: + dependency: transitive + description: + name: flex_color_scheme + sha256: "32914024a4f404d90ff449f58d279191675b28e7c08824046baf06826e99d984" + url: "https://pub.dev" + source: hosted + version: "7.3.1" + flex_seed_scheme: + dependency: transitive + description: + name: flex_seed_scheme + sha256: "4cee2f1d07259f77e8b36f4ec5f35499d19e74e17c7dce5b819554914082bc01" + url: "https://pub.dev" + source: hosted + version: "1.5.0" flutter: dependency: "direct main" description: flutter diff --git a/pubspec.yaml b/pubspec.yaml index 4cadc00..b927bc5 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -8,6 +8,8 @@ environment: flutter: ^3.22.0 dependencies: + app_ui: + path: packages/app_ui background_fetch: ^1.3.2 badges: ^3.1.2 bloc: ^8.1.3