I've been trying to use namedRoutes with a custom 'NavLink' component to add to my drawer but the links are not navigating to the clicked screen. They do not throw error logs when I click them so I don't know what is happening.
main.dart
import 'package:flutter/material.dart';
import 'package:hire_me/homepage.dart';
import 'package:hire_me/screens/notFound.dart';
import 'package:hire_me/screens/todoList.dart';
import 'package:hire_me/screens/nodeJs.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Portfolio',
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 36.0,
fontWeight: FontWeight.bold,
color: Colors.black),
headline2:
TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
bodyText1:
TextStyle(fontSize: 12.0, fontWeight: FontWeight.normal))),
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/todoList': (context) => TodoList(),
'/nodeJs': (context) => NodeJs(),
'/notFound': (context) => NotFound(),
});
}
}
Homepage component
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Carlos Gumucio'),
centerTitle: true,
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('More from me')),
NavLink(title: 'Todo List', route: '/todoList'),
NavLink(title: 'NodeJs API', route: '/nodeJs'),
],
)),
body: SingleChildScrollView(...
navLink.dart component
import 'package:flutter/material.dart';
class NavLink extends StatelessWidget {
const NavLink({Key? key, this.title = 'link here', this.route = '/notFound'})
: super(key: key);
final String title;
final String route;
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
// go to route ... Navigator.push(context, route)
Navigator.pushNamed(context, route);
// close the nav after navigating
Navigator.pop(context);
});
}
}
pubspec.yaml
name: hire_me
description: Reach me hub.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
url_launcher: ^6.0.4
material_design_icons_flutter: ^4.0.5955
google_fonts: ^2.0.0
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/images/
flutter doctor
[√] Flutter (Channel beta, 2.2.0-10.3.pre, on Microsoft Windows [Versión 10.0.19042.985], locale
es-CL)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio
[√] VS Code (version 1.56.0)
[√] Connected device (2 available)
• No issues found!
Well, I see that you pop the screen right after you pushed it:
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
// go to route ... Navigator.push(context, route)
Navigator.pushNamed(context, route);
// close the nav after navigating
Navigator.pop(context); // This will pop your last pushed route
});
}
Try to comment out the line with Navigator.pop(context);
.
EDIT 1:
For having the drawer closed before you push a new route:
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title),
onTap: () {
// close the nav before navigating
Navigator.pop(context); // This will pop your last pushed
// go to route ... Navigator.push(context, route)
Navigator.pushNamed(context, route);
route
});
}