Haroon6138
/
cloudsolutions-atoms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 11 Wiki Activity

floating button animation

Browse Source
main_design2.0
zaid_daoud 2 years ago
parent 5bfd6924e1
commit 1f4fbee83b
8 changed files with 142 additions and 8 deletions
Show Stats Download Patch File Download Diff File

10
assets/images/gas_refill_request.svg
Unescape Escape View File

@ -0,0 +1,10 @@
<svg width="18" height="30" viewBox="0 0 18 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6">
<path d="M4.01331 4.12136C4.38399 4.12136 4.74638 4.15701 5.09767 4.22438V1.08436C5.09767 0.486438 4.61123 0 4.01331 0C3.41539 0 2.92896 0.486438 2.92896 1.08436V4.22433C3.28024 4.15707 3.64264 4.12136 4.01331 4.12136Z" fill="#163A51"/>
<path d="M0 11.2809H8.02658V9.87108C8.02658 7.65814 6.22623 5.85779 4.01329 5.85779C1.80035 5.85779 0 7.65814 0 9.87108V11.2809Z" fill="#163A51"/>
<path d="M0 13.0174H8.02658V29.6355H0V13.0174Z" fill="#163A51"/>
<path d="M13.7763 4.12136C14.1469 4.12136 14.5093 4.15701 14.8606 4.22438V1.08436C14.8606 0.486438 14.3742 0 13.7763 0C13.1783 0 12.6919 0.486438 12.6919 1.08436V4.22433C13.0432 4.15707 13.4056 4.12136 13.7763 4.12136Z" fill="#163A51"/>
<path d="M9.76306 13.0174H17.7896V29.6355H9.76306V13.0174Z" fill="#163A51"/>
<path d="M9.76306 11.2809H17.7896V9.87108C17.7896 7.65814 15.9893 5.85779 13.7764 5.85779C11.5634 5.85779 9.76306 7.65814 9.76306 9.87108V11.2809Z" fill="#163A51"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
assets/images/service_request.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6">
<path d="M23.9587 3.62122C23.9209 3.35755 23.7376 3.1378 23.4849 3.05338C23.2336 2.96825 22.9542 3.03481 22.7653 3.22297L21.7711 4.21794C21.2396 4.74941 20.3133 4.74941 19.7818 4.21794C19.2319 3.668 19.2322 2.77897 19.7818 2.22941L20.7761 1.23514C20.9642 1.04698 21.0301 0.768217 20.9457 0.515514C20.8612 0.262811 20.6415 0.0794823 20.3778 0.0417479C19.0657 -0.143643 17.7377 0.29717 16.799 1.23444C15.7375 2.29667 15.3186 3.85813 15.7065 5.31036L5.3106 15.7059L5.30989 15.7052C3.86314 15.3214 2.29278 15.7402 1.23467 16.7984C0.302185 17.7308 -0.144112 19.0691 0.0412789 20.3778C0.0790601 20.6415 0.262388 20.8613 0.515045 20.9457C0.765686 21.0301 1.04581 20.9642 1.23467 20.7761L2.22894 19.7811C2.76041 19.2496 3.6867 19.2496 4.21817 19.7811C4.76811 20.331 4.76783 21.22 4.21817 21.7696L3.22391 22.7639C3.03575 22.9521 2.96984 23.2308 3.05431 23.4835C3.13878 23.7362 3.35849 23.9196 3.62216 23.9573C4.93091 24.1435 6.24782 23.7169 7.20097 22.7646C8.26251 21.7024 8.68138 20.1409 8.29344 18.6887L18.6894 8.29312L18.6901 8.29382C20.1444 8.67904 21.7072 8.2588 22.7653 7.20069C23.6978 6.26821 24.1441 4.92997 23.9587 3.62122Z" fill="#163A51"/>
<path d="M19.7813 15.5625C19.4483 15.5625 19.1056 15.6126 18.7032 15.7191L15.978 12.9942L12.9943 15.9776L15.7191 18.7026C15.6126 19.1056 15.5625 19.4483 15.5625 19.7813C15.5625 22.1076 17.4549 24 19.7813 24C22.1076 24 24 22.1076 24 19.7813C24 17.4549 22.1076 15.5625 19.7813 15.5625ZM22.0884 19.6405L21.6702 21.2006C21.605 21.443 21.4155 21.6325 21.1731 21.6977L19.6131 22.1159C19.3839 22.179 19.1191 22.119 18.934 21.9339L17.7921 20.792C17.6143 20.6142 17.5449 20.3553 17.6101 20.1129L18.0283 18.5529C18.0936 18.3105 18.2831 18.121 18.5254 18.0558L20.0855 17.6376C20.3265 17.5703 20.5861 17.6417 20.7646 17.8196L21.9064 18.9614C22.0843 19.1393 22.1536 19.3981 22.0884 19.6405Z" fill="#163A51"/>
<path d="M8.29236 5.27068C8.6803 3.81844 8.26142 2.25633 7.19989 1.19475C5.60618 -0.39825 2.82593 -0.39825 1.23363 1.19475C-0.410885 2.83997 -0.410885 5.51649 1.23363 7.16101C2.29038 8.21776 3.85526 8.64277 5.30956 8.25348L8.02269 11.0054L11.0059 8.02252L8.29236 5.27068ZM6.4535 3.96675L6.03532 5.5268C5.97007 5.76919 5.78056 5.95871 5.53821 6.02391L3.97817 6.44208C3.74899 6.50527 3.4842 6.44527 3.29909 6.26012L2.15721 5.11824C1.97937 4.9404 1.91004 4.68155 1.97524 4.43916L2.39341 2.87911C2.45866 2.63672 2.64818 2.44721 2.89052 2.382L4.45057 1.96383C4.69296 1.89792 4.95181 1.96796 5.12965 2.1458L6.27153 3.28768C6.44937 3.46552 6.5187 3.72436 6.4535 3.96675Z" fill="#163A51"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

6
assets/images/transfer_request.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6">
<path d="M8.52258 8.30768H6.57138L0 15.6528L6.53446 24H8.52258V19.3846H21.1453V12.9231H8.52258V8.30768Z" fill="#163A51"/>
<path d="M24.9797 0H22.9915V4.61538H10.3688V11.0769H22.9915V15.6923H24.9427L31.5141 8.34726L24.9797 0Z" fill="#163A51"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 369 B

5
assets/translations/ar.json
Unescape Escape View File

@ -13,5 +13,8 @@
"welcome" : "مرحبا،",
"openWhatsapp" : "الإنتقال الى الواتس اب",
"callUs" : "إتصل بنا",
"liveChat" : "محادثة حية"
"liveChat" : "محادثة حية",
"gasRefillRequest" : "طلب إعادة تعبئة غاز",
"transferRequest" : "طلب نقل",
"serviceRequest" : "طلب خدمة"
}

5
assets/translations/en.json
Unescape Escape View File

@ -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"
}

5
lib/models/enums/translation_keys.dart
Unescape Escape View File

@ -13,5 +13,8 @@ enum TranslationKeys {
welcome,
openWhatsapp,
liveChat,
callUs
callUs,
gasRefillRequest,
transferRequest,
serviceRequest
}

104
lib/new_views/common_widgets/app_floating_action_button.dart
Unescape Escape View File

@ -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<AppFloatingActionButton> createState() => _AppFloatingActionButtonState();
}
class _AppFloatingActionButtonState extends State<AppFloatingActionButton> {
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),
),
),
);
}
}

8
lib/new_views/pages/land_page/land_page.dart
Unescape Escape View File

@ -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<LandPage> {
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) {

Write Preview
Loading…
Cancel
Save