Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation improved and integrated transition effects in application #57

Merged
merged 2 commits into from
Oct 13, 2024
Merged

Navigation improved and integrated transition effects in application #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f8dd34
navigation improved with integration of transition effects
WednesdaySP Oct 13, 2024
c9da851
improved app navigation and integrated transition effects
WednesdaySP Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions lib/views/pages/locate_blood_banks/locate_blood_banks.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ class _LocateBloodBanksState extends State<LocateBloodBanks> {

return Scaffold(
appBar: AppBar(
leading: IconButton(onPressed: (){
Navigator.pop(context);
}, icon: Icon(Icons.arrow_back_ios)),
centerTitle: true,
title: const Text('Locate Blood Banks'),
),
body: Column(
Expand Down
15 changes: 11 additions & 4 deletions lib/views/pages/login/login.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,20 @@ class _LoginPageState extends State<LoginPage> {
body: BlocConsumer<AuthCubit, AuthState>(
listener: (context, state) {
if (state is Authenticated) {
Navigator.push(
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => HomePage(
email: emailController.text,
name: state.user.name,
),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
transitionDuration: const Duration(milliseconds: 900), // Adjust duration as needed
),
);
}
Expand All @@ -96,7 +103,7 @@ class _LoginPageState extends State<LoginPage> {
Image.asset(
'assets/images/login.jpg',
width: double.infinity,
height: double.infinity,
height: 670,
fit: BoxFit.cover,
),

Expand Down
14 changes: 11 additions & 3 deletions lib/views/pages/main_home/home_pages/home_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,17 @@ class _HomeScreenState extends State<HomeScreen> {
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LocateBloodBanks(),
));
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const LocateBloodBanks(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
transitionDuration: const Duration(milliseconds: 900), // Adjust duration as needed
),);

},
),
HomeCard(
Expand Down
13 changes: 9 additions & 4 deletions lib/views/pages/main_home/homepage.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,8 @@ class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
final controller =
Get.put(NavigationController(widget.name ?? "No Name", widget.email!));
print(widget.name);
final controller = Get.put(NavigationController(widget.name ?? "No Name", widget.email!));

return Scaffold(
bottomNavigationBar: Obx(
() => NavigationBar(
Expand Down Expand Up @@ -56,7 +55,13 @@ class _HomePageState extends State<HomePage> {
),
),
body: Obx(
() => controller.getScreens()[controller.selectedIndex.value],
() => AnimatedSwitcher(
duration: const Duration(milliseconds: 800), // Duration of the fade effect
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(opacity: animation, child: child);
},
child: controller.getScreens()[controller.selectedIndex.value],
),
),
);
}
Expand Down
2 changes: 2 additions & 0 deletions lib/views/pages/profile/profile_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ class _ProfileScreenState extends State<ProfileScreen> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
title: const Text('Profile'),
),
body: BlocBuilder<ProfileCubit, ProfileState>(
Expand Down
14 changes: 11 additions & 3 deletions lib/views/pages/register/signup.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,15 +151,23 @@ class _SignuppageState extends State<Signuppage> {
showSnackBar(context, state.message);
}
if (state is Authenticated) {
Navigator.push(
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomePage(
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => HomePage(
name: nameController.text,
email: emailController.text.trim(),
),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
transitionDuration: const Duration(milliseconds: 900), // Adjust duration as needed
),
);

}
},
builder: (context, state) {
Expand Down
62 changes: 37 additions & 25 deletions lib/views/pages/welcome/welcome_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,29 @@ class FrontPage extends StatelessWidget {
var screenWidth = MediaQuery.of(context).size.width;
var screenHeight = MediaQuery.of(context).size.height;

// Define the transition effect function
Route _createRoute(Widget page) {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => page,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = 0.0;
const end = 6.0;
const curve = Curves.easeInOut;

var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return FadeTransition(
opacity: animation.drive(tween),
child: child,
);
},
transitionDuration: const Duration(milliseconds: 700), // Increase the duration to 700ms
);
}

return Scaffold(
body: Stack(
children: [
//IMAGE
// IMAGE
Image.asset(
'assets/images/home.png',
fit: BoxFit.cover,
Expand All @@ -25,56 +44,49 @@ class FrontPage extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Signuppage(),
)),
onTap: () => Navigator.of(context).push(_createRoute(const Signuppage())),
child: Center(
child: Container(
height: screenHeight * 0.07,
width: screenWidth * 0.85,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(30))),
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(30)),
),
child: const Center(
child: Text(
'Sign up',
style: TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.w500),
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.w500,
),
),
),
),
),
),
const SizedBox(
height: 20,
),
const SizedBox(height: 20),
Padding(
padding: EdgeInsets.only(bottom: screenHeight * 0.04),
child: InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const LoginPage(),
)),
onTap: () => Navigator.of(context).pushReplacement(_createRoute(const LoginPage())),
child: Center(
child: Container(
height: screenHeight * 0.07,
width: screenWidth * 0.85,
decoration: BoxDecoration(
color: Colors.green.shade900,
borderRadius:
const BorderRadius.all(Radius.circular(30))),
color: Colors.green.shade900,
borderRadius: const BorderRadius.all(Radius.circular(30)),
),
child: const Center(
child: Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w500),
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w500,
),
),
),
),
Expand Down