Is it possible to display different link pages by Navigator.push? - flutter

Question

I am developing by flutter for web.
It is currently possible to go from the main page to the profile page, but is it possible to keep those URLs separate?
For example:
Main page : https:// testapp.com/home
Profile page: https:// testapp.com/profile
When I execute the profilePage() function, Navigator.push will take me to the Profile page.
void profilePage() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => showProfile(),
),
);
}
showProfile is executed with a different dart file to complete the page navigation.
class showProfile extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: const Center(
child: Text("Test App",
style:
TextStyle(color: Colors.black)),
)),
body: Container(
height: double.infinity,
color: Colors.white,
),
);
}
}
Currently, the Main page and Profile page have the same URL (https:// testapp.com/#/).
Therefore, even if the user types testapp.com/profile, they cannot jump to the profile page.
My purpose is to go to a different URL in Navigator.
Thank you.

Answer 1

Add this dependancy/plugin.
Now, Create a file with name routing.dart and add this code:-
class FluroRouting {
static final router = FluroRouter();
static Handler _profileHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
Profile());
static Handler _homeHandler = Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) =>
HomePage());
static void setupRouter() {
router.define('/home', handler: _homeHandler,);
router.define('/profile', handler: _profileHandler,);
router.notFoundHandler = Handler(
handlerFunc: (BuildContext? context, Map<String, dynamic> params) =>HomePage()
);
}
static void navigateToPage({String routeName,BuildContext context}) {
router.navigateTo(context, routeName, transition: TransitionType.none);
}
static void pushAndClearStackToPage({String routeName,BuildContext context}) {
router.navigateTo(context, routeName, clearStack: true,transition: TransitionType.none);
}
}
Now you need to initialize and setup these routes so modify your void main as:-
void main()async {
FluroRouting.setupRouter();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'My Website',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/home',
onGenerateRoute: FluroRouting.router.generator,
);
}
}
And whenever you need to navigate then simply use the below code:-
FluroRouting.navigateToPage(routeName:"/profile",context:context);

Answer 2

This web site helped my issue.
https://medium.com/flutter/flutter-web-navigating-urls-using-named-routes-307e1b1e2050
Solution;
Write the following code in the main function.
void main() {
runApp(MaterialApp(
initialRoute: '/',
routes: {
'/profile': (context) => ProfilePage(),
},
title: "test",
home: (),
));
}
Declare the following in the widget whose URL you want to be "domain.com/ profile" (To be exact, "domain.com/#/profile").
class ProfilePage extends StatelessWidget {
static const String route = '/profile';
}
And finally, call this.
onPressed: () {
Navigator.of(context).pushNamed(ProfilePage.route);
},