Skip to content

Commit c16d932

Browse files
2Math02Math0
committed
Smooth Animation in Login and Registration
Hero Transition between contacts.dart and contact_card.dart
1 parent 066462c commit c16d932

File tree

13 files changed

+394
-173
lines changed

13 files changed

+394
-173
lines changed

‎lib/Contacts/add_contact.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import 'package:conca/constants.dart';
33
import 'package:conca/Contacts/contacts.dart';
44
import 'package:conca/widgets/dotted_Field.dart';
55
import 'package:conca/widgets/rounded_button.dart';
6-
import 'package:conca/widgets/snackbar.dart';
6+
import 'package:conca/widgets/snack_bar.dart';
77
import 'package:flutter/cupertino.dart';
88
import 'package:flutter/material.dart';
99
import 'package:flutter/rendering.dart';

‎lib/Contacts/contact_card.dart‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import 'package:conca/Contacts/add_contact.dart';
22
import 'package:conca/constants.dart';
3-
import 'package:conca/widgets/snackbar.dart';
3+
import 'package:conca/widgets/snack_bar.dart';
44
import 'package:flutter/cupertino.dart';
55
import 'package:flutter/material.dart';
66
import 'package:http/http.dart' as http;
@@ -40,7 +40,9 @@ class ContactCard extends StatelessWidget {
4040
Uri.parse('${API_URL}contacts/${contactDetails['id']}'),
4141
headers: headersToken(token),
4242
);
43-
snackBarCustom(context, Colors.red, Colors.transparent, response.body.toString(),textColor: Colors.white);
43+
snackBarCustom(context, Colors.red, Colors.transparent,
44+
response.body.toString(),
45+
textColor: Colors.white);
4446
});
4547
Navigator.of(context).pushAndRemoveUntil(
4648
MaterialPageRoute(
@@ -49,6 +51,7 @@ class ContactCard extends StatelessWidget {
4951
break;
5052
}
5153
}
54+
5255
return Scaffold(
5356
appBar: AppBar(
5457
backgroundColor: Colors.transparent,
@@ -80,10 +83,13 @@ class ContactCard extends StatelessWidget {
8083
child: Column(
8184
children: <Widget>[
8285
Center(
83-
child: Icon(
84-
contactIcon(contactDetails['name']),
85-
size: 160,
86-
color: mainIconColor,
86+
child: Hero(
87+
tag: '${contactDetails['name']} ${contactDetails['email']} ${contactDetails['phones']}',
88+
child: Icon(
89+
contactIcon(contactDetails['name']),
90+
size: 160,
91+
color: mainIconColor,
92+
),
8793
),
8894
),
8995
SizedBox(height: 64),
@@ -106,7 +112,8 @@ class ContactCard extends StatelessWidget {
106112
),
107113
SizedBox(height: 32),
108114
RawMaterialButton(
109-
onPressed: ()=>launchingLinks(contactDetails['email'], context, 'mailto'),
115+
onPressed: () =>
116+
launchingLinks(contactDetails['email'], context, 'mailto'),
110117
child: Row(
111118
mainAxisAlignment: MainAxisAlignment.start,
112119
children: [
@@ -126,11 +133,12 @@ class ContactCard extends StatelessWidget {
126133
),
127134
SizedBox(height: 16),
128135
ListView.builder(
129-
itemBuilder: (BuildContext context, i){
136+
itemBuilder: (BuildContext context, i) {
130137
return Padding(
131138
padding: const EdgeInsets.symmetric(vertical: 16),
132139
child: RawMaterialButton(
133-
onPressed: ()=>launchingLinks(contactDetails['phones'][i]['value'], context, 'tel'),
140+
onPressed: () => launchingLinks(
141+
contactDetails['phones'][i]['value'], context, 'tel'),
134142
child: Row(
135143
mainAxisAlignment: MainAxisAlignment.start,
136144
children: [
@@ -147,7 +155,8 @@ class ContactCard extends StatelessWidget {
147155
],
148156
),
149157
),
150-
);},
158+
);
159+
},
151160
itemCount: contactDetails['phones'].length,
152161
scrollDirection: Axis.vertical,
153162
shrinkWrap: true,

‎lib/Contacts/contacts.dart‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ class _ContactsPageState extends State<ContactsPage> {
2222
super.initState();
2323
_fetchData();
2424
}
25+
2526
@override
2627
Widget build(BuildContext context) {
2728
return Scaffold(
@@ -45,10 +46,14 @@ class _ContactsPageState extends State<ContactsPage> {
4546
return Padding(
4647
padding: const EdgeInsets.all(8.0),
4748
child: ListTile(
48-
leading: Icon(
49-
contactIcon(_contactsList[i]['name']),
50-
color: tileIconColor,
51-
size: MediaQuery.of(context).size.width * 0.15,
49+
leading: Hero(
50+
tag:
51+
'${_contactsList[i]['name']} ${_contactsList[i]['email']} ${_contactsList[i]['phones']}',
52+
child: Icon(
53+
contactIcon(_contactsList[i]['name']),
54+
color: tileIconColor,
55+
size: MediaQuery.of(context).size.width * 0.15,
56+
),
5257
),
5358
title: Padding(
5459
padding: const EdgeInsets.fromLTRB(12, 12, 0, 0),
@@ -65,7 +70,9 @@ class _ContactsPageState extends State<ContactsPage> {
6570
subtitle: Padding(
6671
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
6772
child: Text(
68-
_contactsList[i]['phones'][0]['value'],
73+
_contactsList[i]['phones'].length >= 1
74+
? _contactsList[i]['phones'][0]['value']
75+
: '',
6976
softWrap: true,
7077
style: TextStyle(
7178
color: Colors.black54,
@@ -85,11 +92,14 @@ class _ContactsPageState extends State<ContactsPage> {
8592
contentPadding: EdgeInsets.all(8),
8693
trailing: CupertinoButton(
8794
child: Icon(
88-
Icons.call,
89-
color: tileIconColor,
90-
size: 32,
95+
Icons.call,
96+
color: tileIconColor,
97+
size: 32,
9198
),
92-
onPressed: ()=>launchingLinks(_contactsList[i]['phones'][0]['value'], context, 'tel'),
99+
onPressed: () => launchingLinks(
100+
_contactsList[i]['phones'][0]['value'],
101+
context,
102+
'tel'),
93103
),
94104
onLongPress: () {
95105
showGeneralDialog(

‎lib/LogIN/LoginPage.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import 'dart:convert';
22
import 'package:conca/widgets/password_input_field.dart';
33
import 'package:conca/Contacts/contacts.dart';
4-
import 'package:conca/widgets/snackbar.dart';
4+
import 'package:conca/widgets/snack_bar.dart';
55
import 'package:http/http.dart' as http;
66
import 'package:conca/Registering/RegisterPage.dart';
77
import 'package:conca/constants.dart';
88
import 'package:conca/widgets/rounded_button.dart';
99
import 'package:flutter_svg/flutter_svg.dart';
1010
import 'package:flutter/material.dart';
1111
import 'package:shared_preferences/shared_preferences.dart';
12-
import 'components/background_signUp.dart';
12+
import 'components/background_logIn.dart';
1313
import '../widgets/login_input_field.dart';
1414

1515
class LoginPage extends StatefulWidget {

‎lib/LogIN/components/background_logIn.dart‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import 'package:conca/constants.dart';
2+
import 'package:flutter/material.dart';
3+
import 'package:flutter_svg/svg.dart';
4+
5+
class Background extends StatefulWidget {
6+
final Widget child;
7+
const Background({
8+
Key key,
9+
@required this.child,
10+
}) : super(key: key);
11+
12+
@override
13+
_BackgroundState createState() => _BackgroundState();
14+
}
15+
16+
class _BackgroundState extends State<Background> {
17+
/*
18+
initializing the values of animation in its settled state.
19+
*/
20+
double _bottomTop = estimatedHeight * 1.2;
21+
double _leftRight = estimatedWidth;
22+
double _rightLeft = estimatedWidth;
23+
Color _bottomColor = kSemiDarkAccentColor.withOpacity(0.3);
24+
Color _leftColor = kDarkAccentColor.withOpacity(0.3);
25+
Color _rightColor = kAccentColor.withOpacity(0.4);
26+
27+
@override
28+
void initState() {
29+
WidgetsBinding.instance
30+
.addPostFrameCallback((_) {
31+
setState(() {
32+
// Positioned animation
33+
_bottomTop = estimatedHeight *0.75;
34+
_leftRight = estimatedWidth *0.2;
35+
_rightLeft = estimatedWidth *0.3;
36+
//Color animations
37+
_bottomColor = kSemiDarkAccentColor.withOpacity(0.8);
38+
_leftColor = kDarkAccentColor.withOpacity(0.8);
39+
_rightColor = kAccentColor.withOpacity(1);
40+
});
41+
});
42+
super.initState();
43+
}
44+
/*
45+
Test cases for animation
46+
Two Buttons run two methods
47+
1. to apply animation (updateLayout)
48+
2. resetting animation (reset)
49+
*/
50+
void updateLayout(){
51+
setState(() {
52+
_bottomTop = estimatedHeight *0.75;
53+
_leftRight = estimatedWidth *0.2;
54+
_rightLeft = estimatedWidth *0.3;
55+
//
56+
_bottomColor = kSemiDarkAccentColor.withOpacity(0.8);
57+
_leftColor = kDarkAccentColor.withOpacity(0.8);
58+
_rightColor = kAccentColor.withOpacity(1);
59+
});
60+
}
61+
void reset(){
62+
setState(() {
63+
_bottomTop = estimatedHeight * 1.5;
64+
_leftRight = estimatedWidth;
65+
_rightLeft = estimatedWidth;
66+
//
67+
_bottomColor = kSemiDarkAccentColor.withOpacity(0.3);
68+
_leftColor = kDarkAccentColor.withOpacity(0.3);
69+
_rightColor = kAccentColor.withOpacity(0.4);
70+
71+
});
72+
}
73+
74+
@override
75+
Widget build(BuildContext context) {
76+
Size size = MediaQuery.of(context).size;
77+
return Scaffold(
78+
body: Container(
79+
width: double.infinity,
80+
height: size.height,
81+
child: Stack(
82+
alignment: Alignment.center,
83+
children: <Widget>[
84+
85+
// the Bottom circle
86+
AnimatedPositioned(
87+
duration: Duration(milliseconds: 1000),
88+
top: _bottomTop,
89+
left: -size.width * 0.2,
90+
child: SvgPicture.asset(
91+
"assets/images/blob.svg",
92+
color: _bottomColor,
93+
width: size.width * 1.4,
94+
),
95+
),
96+
// Left circle
97+
AnimatedPositioned(
98+
duration: Duration(milliseconds: 1800),
99+
bottom: 0,
100+
right: _leftRight,
101+
child: SvgPicture.asset(
102+
"assets/images/blob.svg",
103+
color: _leftColor,
104+
width: size.width * 3,
105+
),
106+
),
107+
//Top right Edged blob
108+
AnimatedPositioned(
109+
duration: Duration(milliseconds: 1500),
110+
bottom: size.height * 0.4,
111+
left: _rightLeft,
112+
child: SvgPicture.asset(
113+
"assets/images/blob_1.svg",
114+
color: _rightColor,
115+
width: size.width * 1.5,
116+
),
117+
),
118+
// fill space blob for bigger screen resolution
119+
Positioned(
120+
bottom: size.height * 0.4,
121+
right: size.width * 0.3,
122+
child: SvgPicture.asset(
123+
"assets/images/blob_1.svg",
124+
color: kAccentColor.withOpacity(1),
125+
width: size.width * 3,
126+
),
127+
),
128+
// top Positioned buttons for animation test cases
129+
/*
130+
Positioned(
131+
top: 30,
132+
left: 0,
133+
child: ElevatedButton(
134+
child: Text('click me'),
135+
onPressed: () => updateLayout(),
136+
),),
137+
Positioned(
138+
top: 60,
139+
left: 0,
140+
child: ElevatedButton(
141+
child: Text('click me'),
142+
onPressed: () => reset(),
143+
),),
144+
*/
145+
widget.child,
146+
],
147+
),
148+
),
149+
);
150+
}
151+
}

‎lib/LogIN/components/background_signUp.dart‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

0 commit comments

Comments
 (0)