From 1f4fbee83bf3ad9caf345297e9687ca0f9e37ee6 Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Wed, 11 Oct 2023 10:41:00 +0300 Subject: [PATCH] floating button animation --- assets/images/gas_refill_request.svg | 10 ++ assets/images/service_request.svg | 7 ++ assets/images/transfer_request.svg | 6 + assets/translations/ar.json | 5 +- assets/translations/en.json | 5 +- lib/models/enums/translation_keys.dart | 5 +- .../app_floating_action_button.dart | 104 ++++++++++++++++++ lib/new_views/pages/land_page/land_page.dart | 8 +- 8 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 assets/images/gas_refill_request.svg create mode 100644 assets/images/service_request.svg create mode 100644 assets/images/transfer_request.svg create mode 100644 lib/new_views/common_widgets/app_floating_action_button.dart diff --git a/assets/images/gas_refill_request.svg b/assets/images/gas_refill_request.svg new file mode 100644 index 00000000..e431b2bc --- /dev/null +++ b/assets/images/gas_refill_request.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/service_request.svg b/assets/images/service_request.svg new file mode 100644 index 00000000..a215d173 --- /dev/null +++ b/assets/images/service_request.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/transfer_request.svg b/assets/images/transfer_request.svg new file mode 100644 index 00000000..c72d3c56 --- /dev/null +++ b/assets/images/transfer_request.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/translations/ar.json b/assets/translations/ar.json index 48b8c13b..97832923 100644 --- a/assets/translations/ar.json +++ b/assets/translations/ar.json @@ -13,5 +13,8 @@ "welcome" : "مرحبا،", "openWhatsapp" : "الإنتقال الى الواتس اب", "callUs" : "إتصل بنا", - "liveChat" : "محادثة حية" + "liveChat" : "محادثة حية", + "gasRefillRequest" : "طلب إعادة تعبئة غاز", + "transferRequest" : "طلب نقل", + "serviceRequest" : "طلب خدمة" } \ No newline at end of file diff --git a/assets/translations/en.json b/assets/translations/en.json index a6c3d5ae..fb5b913b 100644 --- a/assets/translations/en.json +++ b/assets/translations/en.json @@ -13,5 +13,8 @@ "welcome" : "Welcome,", "openWhatsapp" : "Open WhatsApp", "callUs" : "Call Us", - "liveChat" : "Live Chat" + "liveChat" : "Live Chat", + "gasRefillRequest" : "Gas Refill Request", + "transferRequest" : "Transfer Request", + "serviceRequest" : "Service Request" } \ No newline at end of file diff --git a/lib/models/enums/translation_keys.dart b/lib/models/enums/translation_keys.dart index 29191979..d41e0cd2 100644 --- a/lib/models/enums/translation_keys.dart +++ b/lib/models/enums/translation_keys.dart @@ -13,5 +13,8 @@ enum TranslationKeys { welcome, openWhatsapp, liveChat, - callUs + callUs, + gasRefillRequest, + transferRequest, + serviceRequest } diff --git a/lib/new_views/common_widgets/app_floating_action_button.dart b/lib/new_views/common_widgets/app_floating_action_button.dart new file mode 100644 index 00000000..416c66a5 --- /dev/null +++ b/lib/new_views/common_widgets/app_floating_action_button.dart @@ -0,0 +1,104 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:test_sa/extensions/context_extension.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; + +import '../../models/enums/translation_keys.dart'; +import '../app_style/app_color.dart'; + +class AppFloatingActionButton extends StatefulWidget { + const AppFloatingActionButton({Key key}) : super(key: key); + + @override + State createState() => _AppFloatingActionButtonState(); +} + +class _AppFloatingActionButtonState extends State { + double turns = 0.0; + + void _rotate() { + setState(() { + if (turns == 0) { + turns += 1.0 / 8.0; + } else { + turns = 0; + } + }); + } + + @override + Widget build(BuildContext context) { + const duration = Duration(milliseconds: 500); + return Column( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + AnimatedOpacity( + opacity: turns != 0 ? 1 : 0, + duration: duration, + child: Card( + shape: Theme.of(context).cardTheme.copyWith().shape, + margin: EdgeInsetsDirectional.only(start: 60.toScreenWidth), + child: Padding( + padding: EdgeInsets.symmetric(vertical: 8.toScreenHeight), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const _FloatingButtonListTile(iconName: "gas_refill_request", label: TranslationKeys.gasRefillRequest, routeName: ""), + Padding(padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth), child: const Divider()), + const _FloatingButtonListTile(iconName: "transfer_request", label: TranslationKeys.transferRequest, routeName: ""), + Padding(padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth), child: const Divider()), + const _FloatingButtonListTile(iconName: "service_request", label: TranslationKeys.serviceRequest, routeName: ""), + ], + ), + ), + ), + ), + 16.height, + FloatingActionButton( + child: AnimatedRotation( + turns: turns, + duration: duration, + child: const Icon(Icons.add), + ), + onPressed: () { + _rotate(); + }, + ), + ], + ); + } +} + +class _FloatingButtonListTile extends StatelessWidget { + final String iconName, routeName; + final TranslationKeys label; + + const _FloatingButtonListTile({ + @required this.iconName, + @required this.routeName, + @required this.label, + Key key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return InkWell( + onTap: () { + Navigator.of(context).pushNamed(routeName); + }, + child: ListTile( + horizontalTitleGap: 40.toScreenWidth, + leading: SvgPicture.asset( + "assets/images/$iconName.svg", + height: 28.toScreenWidth, + color: context.isDark ? AppColor.primary40 : AppColor.primary70, + ), + title: Text( + context.translate(label), + style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w500), + ), + ), + ); + } +} diff --git a/lib/new_views/pages/land_page/land_page.dart b/lib/new_views/pages/land_page/land_page.dart index 9c92d6ee..daa4f093 100644 --- a/lib/new_views/pages/land_page/land_page.dart +++ b/lib/new_views/pages/land_page/land_page.dart @@ -9,6 +9,7 @@ import 'package:test_sa/new_views/pages/land_page/my_requests_page.dart'; import '../../common_widgets/app_bottom_nav_bar.dart'; import '../../common_widgets/app_drawer.dart'; +import '../../common_widgets/app_floating_action_button.dart'; import 'contact_us_bottom_sheet.dart'; import 'dashboard_page.dart'; @@ -54,14 +55,11 @@ class _LandPageState extends State { key: _scaffoldKey, appBar: HomeAppBar(scaffoldKey: _scaffoldKey), body: Padding( - padding: EdgeInsets.only(left: 16.toScreenWidth, top: 11.toScreenHeight), + padding: EdgeInsetsDirectional.only(start: 16.toScreenWidth, end: 11.toScreenHeight), child: _pages[currentPageIndex], ), drawer: const AppDrawer(), - floatingActionButton: FloatingActionButton( - child: const Icon(Icons.add), - onPressed: () {}, - ), + floatingActionButton: const AppFloatingActionButton(), bottomNavigationBar: AppBottomNavigationBar( selectedIndex: currentPageIndex, onPressed: (index) {