Exploring Flutter Navigator 2.0: VRouter
Flutter has made it quite easy to develop complex UIs for developers.
Flutter is a very performant app development framework that is written in Dart. It interacts efficiently and very easily on a native device. It is supported by Google.
Flutter automated testing empowers you to meet high responsiveness in your application as it helps in discovering bugs and various issues in your application. Flutter is a tool for developing mobile, desktop, web applications with code & is a free and open-source tool.
Hello friends In this blog, we will learn about Exploring Flutter Navigator 2.0: VRouter?. In this, we will see how to use Flutter Navigator 2.0: VRouter. so let’s get started.
Table Of Contents :
Exploring Flutter Navigator:
We use the router to handle the routing of any page, as its name suggests, by using the router package, we can manage the routing of our page, for this, we just need to create different routes for our page. For this, we have to define the route parameter.
Implementation:
Let us now see how we add all these packages to our pubspec.
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :dependencies:
vrouter: ^1.1.0Step 1: Install :
You can install packages from the command line:
flutter pub getStep 2: Importing :
import 'package:vrouter/vrouter.dart';Step 3: Enable AndriodX :
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueCode Implementation:
You need to implement it in your code respectively:
First of all, to handle the routing of any screen, we will use the VRouter widget as I have initialized this package in the implementation, in we will use the routes parameter to create our different routes and define it as below I have defined through a code reference for understanding.
VRouter(
initialUrl: '/homeItem',
routes: [
VWidget(
path: '/homeItem',
widget: HomeItemScreen(homeItemScreen: homeItem),
stackedRoutes: [
VWidget(
path: r':title',
widget: Builder(
builder: (context) => DetailsScreen(
homeItem: homeItem.firstWhere(
(homeItem) =>
homeItem.title ==
context.vRouter.pathParameters['title'],
),
),
),
),
],
),
VRouteRedirector(path: r':_(.+)', redirectTo: '/books'),
],
),Now we will create an item list whose item class will be defined in the widget of the VRouter widget.
Before creating the list of items we will create a model class as I have referenced in the code below.
class HomeItem {
final String img;
final String title;
final String price;
HomeItem(this.img, this.title, this.price);
}After this, we have taken the listview widget in which we have shown the image, title, and price of the item and on click of its item, a list detail screen will open.
ListView(
children: [
for (var homeItem in homeItemScreen)
GestureDetector(
onTap: () {
context.vRouter.push('${homeItem.title}');
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15, top: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
height: 85,
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
homeItem.img,
fit: BoxFit.cover,
height: 85,
width: 100,
),
),
SizedBox(
width: 15,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(homeItem.title,
style: TextStyle(
fontFamily: 'Poppins Regular',
fontWeight: FontWeight.w700,
fontSize: 13)),
SizedBox(
height: 2,
),
Text(homeItem.price,
style: TextStyle(
fontSize: 12, fontFamily: 'Poppins Medium')),
],
),
],
),
),
),
],
),Now our item list is ready and visible and when we click on it, it goes to the next page whose detail class we have defined in our detail screen in builder inside stackedRoutes in the router so that the routing of our page handles.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
homeItem.img,
height: 200,
fit: BoxFit.cover,
width: 1000,
),
),
SizedBox(
height: 20,
),
Text(homeItem.title, style: Theme.of(context).textTheme.headline6),
SizedBox(
height: 10,
),
Text(homeItem.price, style: Theme.of(context).textTheme.subtitle1),
],
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:vrouter/vrouter.dart';
void main() {
List<HomeItem> homeItem = [
HomeItem('assets/images/hanging-lamp.png', 'Hamnger Lamp', '\$56.00'),
HomeItem('assets/images/furniture.png', 'Decor Furniture', '\$70.00'),
HomeItem('assets/images/home-decor.png', 'Decoration Item', '\$34.00'),
HomeItem('assets/images/marble-table.png', 'Marble Table', '\$48.00'),
HomeItem('assets/images/portable-speaker.png', 'Portable Speaker', '\$68.00'),
HomeItem('assets/images/hanging-lamp.png', 'Hamnger Lamp', '\$56.00'),
HomeItem('assets/images/furniture.png', 'Decor Furniture', '\$70.00'),
];
runApp(
VRouter(
initialUrl: '/homeItem',
routes: [
VWidget(
path: '/homeItem',
widget: HomeItemScreen(homeItemScreen: homeItem),
stackedRoutes: [
VWidget(
path: r':title',
widget: Builder(
builder: (context) => DetailsScreen(
homeItem: homeItem.firstWhere(
(homeItem) =>
homeItem.title ==
context.vRouter.pathParameters['title'],
),
),
),
),
],
),
VRouteRedirector(path: r':_(.+)', redirectTo: '/homeItem'),
],
),
);
}
class HomeItem {
final String img;
final String title;
final String price;
HomeItem(this.img, this.title, this.price);
}
class HomeItemScreen extends StatelessWidget {
final List<HomeItem> homeItemScreen;
HomeItemScreen({required this.homeItemScreen});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade100,
appBar: AppBar(
title: Text('VRouter Demo'),
),
body: ListView(
children: [
for (var homeItem in homeItemScreen)
GestureDetector(
onTap: () {
context.vRouter.push('${homeItem.title}');
},
child: Container(
margin: EdgeInsets.only(left: 15, right: 15, top: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
height: 85,
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
homeItem.img,
fit: BoxFit.cover,
height: 85,
width: 100,
),
),
SizedBox(
width: 15,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(homeItem.title,
style: TextStyle(
fontFamily: 'Poppins Regular',
fontWeight: FontWeight.w700,
fontSize: 13)),
SizedBox(
height: 2,
),
Text(homeItem.price,
style: TextStyle(
fontSize: 12, fontFamily: 'Poppins Medium')),
],
),
],
),
),
),
],
),
);
}
}
class DetailsScreen extends StatelessWidget {
final HomeItem homeItem;
DetailsScreen({
required this.homeItem,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('Detail Screen'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
homeItem.img,
height: 200,
fit: BoxFit.cover,
width: 1000,
),
),
SizedBox(
height: 20,
),
Text(homeItem.title, style: Theme.of(context).textTheme.headline6),
SizedBox(
height: 10,
),
Text(homeItem.price, style: Theme.of(context).textTheme.subtitle1),
],
),
),
);
}
}Conclusion:
In this article, I have explained Exploring Flutter Navigator 2.0: VRouter, which you can modify and experiment with according to your own, this little introduction was from the Exploring Flutter Navigator 2.0: VRouter demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Exploring Flutter Navigator 2.0: VRouter In Flutter in your flutter project. We showed you what the Exploring Flutter Navigator 2.0: VRouter is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
