flutter_quick_router 0.0.1
flutter_quick_router: ^0.0.1 copied to clipboard
The QuickRouter provides handy methods for navigating between routes using the Navigator widget in Flutter. It supports both regular and restorable routes and offers various transition types.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_quick_router/quick_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'QUICK ROUTER',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const HomeScreen(),
);
}
}
// A widget that defines the main screen of the app
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// A button that navigates to the second screen using the to() method
ElevatedButton(
onPressed: () {
context.to(const SecondScreen());
},
child: const Text('Go to second screen'),
),
// A button that navigates to the third screen using the pushReplacement() method
ElevatedButton(
onPressed: () {
context.pushReplacement(const ThirdScreen(),
result: 'Hello from home');
},
child: const Text('Replace with third screen'),
),
// A button that navigates to the fourth screen using the pushAndRemoveUntil() method
ElevatedButton(
onPressed: () {
context.pushAndRemoveUntil(
const FourthScreen(),
(route) => route.isFirst,
);
},
child:
const Text('Remove all except first and go to fourth screen'),
),
// A button that navigates to the fifth screen using the restorablePushAndRemoveUntil() method
ElevatedButton(
onPressed: () {
context.restorablePushAndRemoveUntil(
(context, arguments) => MaterialPageRoute(
builder: (context) => const FifthScreen(),
settings: const RouteSettings(name: '/fifth'),
),
(route) => false,
arguments: 'Some arguments',
);
},
child: const Text(
'Remove all and go to fifth screen with restoration'),
),
],
),
),
);
}
}
// A widget that defines the second screen of the app
class SecondScreen extends StatelessWidget {
const SecondScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Second Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// A button that returns to the previous screen using the back() method
ElevatedButton(
onPressed: () {
context.back('Hello from second');
},
child: const Text('Go back with result'),
),
// A button that replaces the current screen with the third screen using the replace() method
ElevatedButton(
onPressed: () {
context.replace(
old: this,
to: const ThirdScreen(),
);
},
child: const Text('Replace with third screen'),
),
// A button that replaces the route below the current one with the fourth screen using the replaceRouteBelow() method
ElevatedButton(
onPressed: () {
context.replaceRouteBelow(
anchor: this,
to: const FourthScreen(),
);
},
child: const Text('Replace route below with fourth screen'),
),
// A button that replaces the current screen with the fifth screen using the restorableReplace() method
ElevatedButton(
onPressed: () {
context.restorableReplace(
old: this,
to: (context, arguments) => MaterialPageRoute(
builder: (context) => const FifthScreen(),
settings: const RouteSettings(name: '/fifth'),
),
arguments: 'Some arguments',
);
},
child: const Text('Replace with fifth screen with restoration'),
),
],
),
),
);
}
}
// A widget that defines the third screen of the app
class ThirdScreen extends StatelessWidget {
const ThirdScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Third Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// A button that returns to the previous screen using the back() method
ElevatedButton(
onPressed: () {
context.to(const HomeScreen(),
transitions: QuickTransition.Size);
},
child: const Text('Go back with result'),
),
],
),
),
);
}
}
// A widget that defines the fourth screen of the app
class FourthScreen extends StatelessWidget {
const FourthScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Fourth Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// A button that returns to the previous screen using the back() method
ElevatedButton(
onPressed: () {
context.back('Hello from fourth');
},
child: const Text('Go back with result'),
),
],
),
),
);
}
}
// A widget that defines the fifth screen of the app
class FifthScreen extends StatelessWidget {
const FifthScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Fifth Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// A button that returns to the previous screen using the back() method
ElevatedButton(
onPressed: () {
context.back('Hello from fifth');
},
child: const Text('Go back with result'),
),
],
),
),
);
}
}