so I have the following routes defined in my main.dart file:
routes: {
'/sign-in': (context) => BlocProvider(
lazy: false,
create: (_) => AuthCubit(),
child: const LandingPage(),
),
'/home': (context) => const HomeLandingPage(),
'/sign-up': (context) => const SignUpLandingPage(),
'/language-selection': (context) => const SelectionLanguageScreen(),
'/camera-page': (context) => CameraPage(),
'/web-add-page': (context) => const WebAddPage()
},
The problem is that some of them are just child widgets of a parent screen. e.g: '/web-add-page' is inside '/home' The following are the child views of /home :
final screens = [ //screens is a List<Widget>
const WebAddPage(),
const WebUpdateProducts(),
const WebUpdateCategories(),
const WebUpdateStores(),
const WebUpdateUsers()
];
Big picture problem is that I CAN'T use Navigator.Push() because I'm not navigating to a new screen, I'm just replacing the content of the '/home' with a child widget (treated as a screen) which allows me to keep the navbar and left column menu, but not updating the ourl route in the browser. When I enter / Home, url look like: locahost:4200/home, after I open the add View it should update to .../home/web-add-page or whatever but I can't find the way to do it.
Here's the entire file:
class WebHomeView extends StatefulWidget {
const WebHomeView({Key? key}) : super(key: key);
@override
State<WebHomeView> createState() => _WebHomeViewState();
}
class _WebHomeViewState extends State<WebHomeView> {
final screens = [
const MainMenuWebPage(),
const WebTickets(),
const WebMovements(),
const WebOrders()
];
int _screenIndex = 0;
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => HomeBloc(),
child: BlocConsumer<HomeBloc, HomeState>(
builder: (context, state) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).primaryColor,
title: const Text('Mercaditos Project',
style: TextStyle(fontSize: 20)),
actions: [
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Log Out'),
),
child: IconButton(
onPressed: () {
FirebaseAuth.instance.signOut();
},
icon: const Icon(
Icons.output,
size: 30,
)),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Main Menu'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.mainMenu
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.house,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 0;
});
},
),
),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Tickets'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.tickets
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.receipt,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 1;
});
},
),
),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Movements'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.movements
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.print_outlined,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 2;
});
},
),
),
),
JustTheTooltip(
tailLength: 0,
preferredDirection: AxisDirection.down,
content: const Padding(
padding: EdgeInsets.all(5.0),
child: Text('Orders'),
),
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
shape: const CircleBorder(),
primary: state.option == AppBarOptions.orders
? Colors.grey.shade800
: Theme.of(context).primaryColor),
child: Icon(Icons.assignment,
color: Theme.of(context).backgroundColor),
onPressed: () {
setState(() {
_screenIndex = 3;
});
},
),
),
),
context
.watch<AuthCubit>()
.state
.currentUSer
?.photoUrl
?.isEmpty ==
null
? const Padding(
padding: EdgeInsets.all(8.0),
child: CircleAvatar(
foregroundImage:
AssetImage("assets/userIcon.png")),
)
: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
foregroundImage: NetworkImage(
'${context.watch<AuthCubit>().state.currentUSer?.photoUrl}')),
),
],
),
body: AnimatedSwitcher(
transitionBuilder:
(Widget child, Animation<double> animation) {
final inAnimation = Tween<Offset>(
begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
.animate(animation);
final outAnimation = Tween<Offset>(
begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
.animate(animation);
if (child.key == ValueKey(screens[state.screenIndex])) {
return ClipRect(
child: SlideTransition(
position: inAnimation,
child: child,
),
);
} else {
return ClipRect(
child: SlideTransition(
position: outAnimation,
child: child,
),
);
}
},
duration: Duration(milliseconds: 100),
child: screens[_screenIndex])); // Need to update url here somehow according to routes defined in my main.dart`
},
listener: (context, state) {},
),
);
}
}
this is similar to the structure that im working, i pressed the buttons to change the widget (that i use as a screen) that is inside the blue square without making a new navigation to another screen, just changing the widget but i need to try to implement the routes because i need to update the url pad when im changing the widgets
