'I am new in flutter, I have a issue that is I want to make introScreen with Tween Animation
I want to do an animation when pages move to the next page but when it moves it looks like this [2]: https://i.stack.imgur.com/tN7oQ.jpg
I am using Tween Animation, but I can't determine what is wrong? they interfere with each other. I am trying to make it in the same order. If anyone can help to find a solution to this issue, I will be indebted. Thanks in advance Here is my code
> Notification.dart
class NotificationSet extends StatefulWidget {
final AnimationController animationController;
const NotificationSet({Key? key, required this.animationController})
: super(key: key);
@override
_NotificationSetState createState() =>
_NotificationSetState(animationController);
}
class _NotificationSetState extends State<NotificationSet> {
final AnimationController animationController;
_NotificationSetState(this.animationController);
final scaffoldKey = GlobalKey<ScaffoldState>();
var statusNotification = false;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
final _firstHalfAnimation =
Tween<Offset>(begin: const Offset(1, 0), end: Offset(0, 0)).animate(
CurvedAnimation(
parent: animationController,
curve: const Interval(
0.6,
0.9,
curve: Curves.fastOutSlowIn,
),
),
);
final _secondHalfAnimation =
Tween<Offset>(begin: const Offset(0, 0), end: Offset(-1, 0)).animate(
CurvedAnimation(
parent: animationController,
curve: const Interval(
0.8,
1.0,
curve: Curves.fastOutSlowIn,
),
),
);
final _welcomeFirstHalfAnimation =
Tween<Offset>(begin: Offset(2, 0), end: Offset(0, 0))
.animate(CurvedAnimation(
parent: animationController,
curve: const Interval(
0.6,
0.9,
curve: Curves.fastOutSlowIn,
),
));
final _welcomeImageAnimation =
Tween<Offset>(begin: Offset(4, 0), end: Offset(0, 0))
.animate(CurvedAnimation(
parent: animationController,
curve: const Interval(
0.6,
0.9,
curve: Curves.fastOutSlowIn,
),
));
return SlideTransition(
position: _firstHalfAnimation,
key: scaffoldKey,
// backgroundColor: const Color(0xFF16161E),
child: SlideTransition(
// child: GestureDetector(
// onTap: () => FocusScope.of(context).unfocus(),
position: _firstHalfAnimation,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Column(
mainAxisSize: MainAxisSize.max,
children: [
SlideTransition(
position: _firstHalfAnimation,
child: ClipRRect(
borderRadius: BorderRadius.circular(0),
child: Image.asset(
'assets/images/capture3.png',
width: 500,
height: 300,
fit: BoxFit.cover,
),
),
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
SlideTransition(
position: _firstHalfAnimation,
child: Column(
children: const [
Padding(
padding:
EdgeInsetsDirectional.fromSTEB(20, 30, 0, 0),
child: Text(
'Notify latest offers & product \navailbility',
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFFFEFFFF),
fontSize: 24,
),
),
),
],
),
),
],
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
SlideTransition(
position: _firstHalfAnimation,
child: const Padding(
padding: EdgeInsetsDirectional.fromSTEB(20, 20, 0, 0),
child: Text(
'Lorem ipsum dolor sit amet,consectetur adipiscing elit,\nsed do eiusmod tempor incididunt ut labore',
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF6B6B73),
),
),
),
)
],
),
SlideTransition(
position: _firstHalfAnimation,
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 1, 0, 0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
20, 90, 20, 0),
child: InkWell(
onTap: () async {},
child: Container(
width: MediaQuery.of(context).size.width,
height: 80,
decoration: BoxDecoration(
color: const Color(0xFF22222A),
boxShadow: const [
BoxShadow(
blurRadius: 1,
color: Color(0xFF1A1F24),
offset: Offset(0, 0),
)
],
borderRadius: BorderRadius.circular(10),
shape: BoxShape.rectangle,
),
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
24, 12, 24, 12),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Expanded(
child: Text(
'Notification',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFFF5F6F9),
fontSize: 19,
),
),
),
Container(
width: 80,
height: 40,
decoration: BoxDecoration(
color: const Color(0xFF1D2429),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsetsDirectional
.fromSTEB(5, 0, 6, 0),
child: Stack(
alignment:
const AlignmentDirectional(0, 0),
children: [
const Align(
alignment: AlignmentDirectional(
-20.67, 0),
child: Padding(
padding: EdgeInsetsDirectional
.fromSTEB(3, 0, 0, 0),
child: Icon(
Icons.notifications_none,
color: Color(0xFF95A1AC),
size: 40,
),
),
),
//ToggleButton
CustomSwitch(
activeColor:
const Color(0xFF7961F4),
value: statusNotification,
onChanged: (value) {
setState(() {
statusNotification = value;
});
},
),
],
),
),
),
],
),
),
),
),
),
],
),
),
),
SlideTransition(
position: _firstHalfAnimation,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0),
child: ElevatedButton(
onPressed: () {
if (kDebugMode) {
print('Button pressed ...');
}
},
style: ElevatedButton.styleFrom(
onPrimary: const Color(0xFF7B61FF),
primary: const Color(0xFF7B61FF),
minimumSize: const Size(370, 55),
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(15)),
),
),
child: const Text(
"Next",
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFFDCD8F2),
),
),
),
),
],
),
),
],
),
],
),
// ),
),
);
}
void onChanged(bool value) {}
}
> LanguageSet.dart
class LanguageSelect extends StatefulWidget {
AnimationController animationController;
LanguageSelect({Key? key, required this.animationController}) : super(key: key);
@override
_LanguageSelectState createState() => _LanguageSelectState(animationController);
}
class _LanguageSelectState extends State<LanguageSelect> {
late TextEditingController textController;
final scaffoldKey = GlobalKey<ScaffoldState>();
AnimationController animationController;
bool pressEnglish = false;
bool pressFrench = false;
bool pressGerman = false;
bool pressArabic = false;
_LanguageSelectState(this.animationController);
@override
void initState() {
super.initState();
textController = TextEditingController();
}
@override
Widget build(BuildContext context) {
final _firstHalfAnimation =
Tween<Offset>(begin: const Offset(1, 0), end: Offset(0, 0)).animate(
CurvedAnimation(
parent: animationController,
curve: const Interval(
0.6,
0.9,
curve: Curves.fastOutSlowIn,
),
),
);
final _secondHalfAnimation =
Tween<Offset>(begin: const Offset(0, 0), end: Offset(-1, 0)).animate(
CurvedAnimation(
parent: animationController,
curve: const Interval(
0.8,
1.0,
curve: Curves.fastOutSlowIn,
),
),
);
final _welcomeFirstHalfAnimation =
Tween<Offset>(begin: Offset(2, 0), end: Offset(0, 0))
.animate(CurvedAnimation(
parent: animationController,
curve: const Interval(
0.6,
0.9,
curve: Curves.fastOutSlowIn,
),
));
final _welcomeImageAnimation =
Tween<Offset>(begin: Offset(4, 0), end: Offset(0, 0))
.animate(CurvedAnimation(
parent: animationController,
curve: const Interval(
0.6,
0.9,
curve: Curves.fastOutSlowIn,
),
));
return SlideTransition(
position: _firstHalfAnimation,
key: scaffoldKey,
// backgroundColor: const Color(0xFF16161E),
child: SlideTransition(
position: _secondHalfAnimation,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SlideTransition(position: _welcomeFirstHalfAnimation,
child: const Padding(
padding: EdgeInsetsDirectional.fromSTEB(17, 100, 0, 0),
child: Text(
'Select your preferred language',
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFFFEFFFF),
fontSize: 23,
),
),
),
),
const Padding(
padding: EdgeInsetsDirectional.fromSTEB(17, 5, 0, 0),
child: Text(
'you will use the same language throughout the app.',
textAlign: TextAlign.start,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF6F6F77),
fontSize: 14,
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(17, 0, 17, 0),
child: TextField(
controller: textController,
obscureText: false,
decoration: InputDecoration(
labelText: 'search your language',
labelStyle: const TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF515157),
),
contentPadding: EdgeInsets.all(23),
hintText: 'search your language',
hintStyle: const TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF515157),
fontSize: 14,
),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xFF3B3B3E),
width: 2,
),
borderRadius: BorderRadius.circular(10),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xFF7B72B6),
width: 2,
),
borderRadius: BorderRadius.circular(10),
),
// contentPadding: const EdgeInsetsDirectional.fromSTEB(
// 20, 20, 20, 0),
prefixIcon: const Icon(
FontAwesomeIcons.search,
color: Color(0xFF4F4F57),
size: 30,
),
suffixIcon: textController.text.isNotEmpty
? InkWell(
onTap: () => setState(
() => textController.clear(),
),
child: const Icon(
Icons.clear,
color: Color(0xFF757575),
size: 22,
),
)
: null,
),
style: const TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF3B3B3E),
),
textAlign: TextAlign.start,
maxLines: 1,
),
),
),
],
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(17, 20, 17, 0),
child: ElevatedButton(
onPressed: () {
setState(() {
if (pressArabic || pressFrench || pressGerman) {
pressEnglish = true;
pressFrench = false;
pressArabic = false;
pressGerman = false;
} else if (!pressArabic || !pressFrench || !pressGerman) {
pressEnglish = true;
} else {
pressEnglish = false;
}
});
},
style: ElevatedButton.styleFrom(
alignment: Alignment.centerLeft,
onPrimary: pressEnglish == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
primary: pressEnglish == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
minimumSize: const Size(390, 70),
shape: const RoundedRectangleBorder(
side: BorderSide(
color: Color(0xFF3B3B3E),
width: 1,
),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
child: TextButton.icon(
autofocus: false,
onPressed: () => {},
icon: Image.asset(
"assets/images/english.png",
),
label: const Text(
' English',
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.white,
height: 1,
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(17, 20, 17, 0),
child: ElevatedButton(
onPressed: () {
setState(() {
if (pressEnglish || pressGerman || pressArabic) {
pressEnglish = false;
pressFrench = true;
pressArabic = false;
pressGerman = false;
} else if (!pressEnglish || !pressGerman || !pressArabic) {
pressFrench = true;
} else {
pressFrench = false;
}
});
},
style: ElevatedButton.styleFrom(
elevation: 0,
alignment: Alignment.centerLeft,
onPrimary: pressFrench == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
primary: pressFrench == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
minimumSize: const Size(390, 70),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(
color: Color(0xFF3B3B3E),
width: 1,
),
),
),
child: TextButton.icon(
onPressed: () => {},
icon: Image.asset(
"assets/images/france.png",
),
label: const Text(
' French',
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.white,
height: 1,
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(17, 20, 17, 0),
child: ElevatedButton(
onPressed: () {
setState(() {
if (pressEnglish || pressGerman || pressFrench) {
pressEnglish = false;
pressFrench = false;
pressArabic = true;
pressGerman = false;
} else if (!pressEnglish || !pressGerman || !pressFrench) {
pressArabic = true;
} else {
pressArabic = false;
}
});
},
style: ElevatedButton.styleFrom(
alignment: Alignment.centerLeft,
onPrimary: pressArabic == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
primary: pressArabic == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
minimumSize: const Size(390, 70),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(
color: Color(0xFF3B3B3E),
width: 1,
),
),
),
child: TextButton.icon(
onPressed: () => {},
icon: Image.asset(
"assets/images/arabic.png",
),
label: const Text(
' Arabic',
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.white,
height: 1,
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(17, 20, 17, 0),
child: ElevatedButton(
onPressed: () {
setState(() {
if (pressArabic || pressEnglish || pressFrench) {
pressEnglish = false;
pressFrench = false;
pressArabic = false;
pressGerman = true;
} else if (!pressArabic || !pressEnglish || !pressFrench){
pressGerman = true;
}
else
{
pressGerman = false;
}
});
},
style: ElevatedButton.styleFrom(
alignment: Alignment.centerLeft,
onPrimary: pressGerman == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
primary: pressGerman == true
? const Color(0xFF7B61FF)
: const Color(0xFF16161E),
minimumSize: const Size(390, 70),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(
color: Color(0xFF3B3B3E),
width: 1,
),
),
),
child: TextButton.icon(
onPressed: () => {},
icon: Image.asset(
"assets/images/germany.png",
),
label: const Text(
' German',
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.white,
height: 1,
),
),
),
),
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|