In the previous article we’ve successfully designed all of the pages of our Instagram application, and in this article we’re going to do Routing in our application because we have so many pages in this app, so it’ll be good to do Routing to keep everything clean as this is series of Clean Architecture.
First in your main.dart file here in the MaterialApp() add a property onGenerateRoute: and call a method route from OnGenerateRoute class it’s not yet created but no worry we’re going to do it in a while.
main.dart.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Instagram Clone",
darkTheme: ThemeData.dark(),
onGenerateRoute: OnGenerateRoute.route,
home: MainScreen(),
);
}
}
Now create a new file in the lib directory and name it on_generate_route.dart and open that file and inside paste that code :
on_generate_route.dart
import 'package:flutter/material.dart';
import 'package:instagram_clone_app/consts.dart';
import 'package:instagram_clone_app/features/presentation/page/credential/sign_in_page.dart';
import 'package:instagram_clone_app/features/presentation/page/credential/sign_up_page.dart';
import 'package:instagram_clone_app/features/presentation/page/post/comment/comment_page.dart';
import 'package:instagram_clone_app/features/presentation/page/post/update_post_page.dart';
import 'package:instagram_clone_app/features/presentation/page/profile/edit_profile_page.dart';
class OnGenerateRoute {
static Route<dynamic>? route(RouteSettings settings) {
final args = settings.arguments;
switch(settings.name) {
case PageConst.editProfilePage: {
return routeBuilder(EditProfilePage());
}
case PageConst.updatePostPage: {
return routeBuilder(UpdatePostPage());
}
case PageConst.commentPage: {
return routeBuilder(CommentPage());
}
case PageConst.signInPage: {
return routeBuilder(SignInPage());
}
case PageConst.signUpPage: {
return routeBuilder(SignUpPage());
}
case PageConst.signUpPage: {
return routeBuilder(SignUpPage());
}
default: {
NoPageFound();
}
}
}
}
dynamic routeBuilder(Widget child) {
return MaterialPageRoute(builder: (context) => child);
}
class NoPageFound extends StatelessWidget {
const NoPageFound({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page not found"),
),
body: Center(child: Text("Page not found"),),
);
}
}
In this file we’ve created a class with a static method which we’re calling in our main.dart also to use GenerateRoutes and here is a method of pageBuilder() it simply returning MaterialPageRoute in order to keep our code clean we create a separate method for that and with this here is also a StatelessWidget which is simply NoPageFound like when in the switch case some case didn’t matched with the particular string or something else this default state will be emitted.
Now you may be wondering what is that PageConst this is basically a class in the const.dart file we don’t want to hardcode any sort of String in UI so we’ve created a separate class for our page constants
Add this code in your consts.dart
class PageConst {
static const String editProfilePage = "editProfilePage";
static const String updatePostPage = "updatePostPage";
static const String commentPage = "commentPage";
static const String signInPage = "signInPage";
static const String signUpPage = "signUpPage";
}
Now again go to your main.dart and there need some more modification replace your MaterialApp() with the code below.
MaterialApp(
debugShowCheckedModeBanner: false,
title: "Instagram Clone",
darkTheme: ThemeData.dark(),
onGenerateRoute: OnGenerateRoute.route,
initialRoute: "/",
routes: {
"/": (context) {
return SignInPage();
}
},
);
Having this MaterialApp() now search for all the Navigator.push() methods in your application and replace with the code below.
Navigator.pushNamed(context, PageConst.editProfilePage);
Remember this PageConst.editProfilePage is for going to EditProfilePage() you should change this String according to the pages you want to navigate.
Conclusion
In this part we have done Routing of our application, and in the next article we’ll finally go for the Backend stuff be readyJ. With this subscribe to eTechViral and hit the bell icon to make sure you get notified whenever new video is uploaded.
