Myujth

I am trying to have some buttons in a drawer that the user can top on and be taken to another page/widget. However, it gives me an error and doesn't work. I'm not really sure what the issue is considering I'm doing this in another project and it works, additionally I checked the cookbook on Flutter's docs for how to do navigation and it also looks fine based on that.

Here is my drawer code which is inside a Scaffold widget:

Drawer(
 child: Column(
 children: <Widget>[
 AppBar(
 automaticallyImplyLeading: false,
 title: Text('Looped In'),
 ),
 ListTile(
 leading: Icon(Icons.info),
 title: Text('About'),
 onTap: () 
 Navigator.of(context).pushNamed('/about');
 ,
 ),
 ],
 ),
),

Here is the error traceback that I'm getting

flutter: The following assertion was thrown while handling a gesture:
flutter: Navigator operation requested with a context that does not include a Navigator.
flutter: The context used to push or pop routes from the Navigator must be that of a widget that is a
flutter: descendant of a Navigator widget.
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.dart:1273:9)
flutter: #1 Navigator.of (package:flutter/src/widgets/navigator.dart:1280:6)
flutter: #2 MyAppState.build.<anonymous closure> (file:///Users/garrettlove/Documents/learn/Flutter/loopt_in/lib/main.dart:59:29)
flutter: #3 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:507:14)
flutter: #4 _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:562:30)
flutter: #5 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
flutter: #6 TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:242:9)
flutter: #7 TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:204:7)
flutter: #8 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
flutter: #9 _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:147:20)
flutter: #10 _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121:22)
flutter: #11 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101:7)
flutter: #12 _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64:7)
flutter: #13 _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48:7)
flutter: #14 _invoke1 (dart:ui/hooks.dart:153:13)
flutter: #15 _dispatchPointerDataPacket (dart:ui/hooks.dart:107:5)
flutter:
flutter: Handler: onTap
flutter: Recognizer:
flutter: TapGestureRecognizer#2d408(debugOwner: GestureDetector, state: ready, won arena, finalPosition:
flutter: Offset(98.5, 222.5), sent tap down)

EDIT
Here is everything I have:

import 'package:flutter/material.dart';

import './pages/home.dart';
import './pages/categories.dart';
import './pages/about.dart';
import './pages/contact.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget 
 @override
 State<StatefulWidget> createState() 
 return MyAppState();
 


class MyAppState extends State<MyApp> 
 int _selectedTab = 0;
 final _pageOptions = [
 HomePage(),
 CatPage(),
 ];

 Widget _buildDrawer(BuildContext context) 
 return Drawer(
 child: Column(
 children: <Widget>[
 AppBar(
 automaticallyImplyLeading: false,
 backgroundColor: Color.fromRGBO(135, 142, 136, 1.0),
 title: Text('Looped In'),
 ),
 ListTile(
 leading: Icon(Icons.info, color: Color.fromRGBO(247, 203, 21, 1.0),),
 title: Text('About'),
 onTap: () 
 //Navigator.of(context).pushNamed('/about');
 Navigator.of(context).push(MaterialPageRoute(builder: (context) => AboutPage()));
 ,
 ),
 ],
 ),
 );
 

 @override
 Widget build(BuildContext context) 
 return MaterialApp(
 theme: ThemeData(
 accentColor: Color.fromRGBO(245, 93, 62, 1.0),
 primaryTextTheme: TextTheme(
 title: TextStyle(color: Colors.white),
 ),
 ),
 routes: <String, WidgetBuilder>
 '/home': (BuildContext context) => HomePage(),
 '/about': (BuildContext context) => AboutPage(),
 '/contact': (BuildContext context) => ContactPage(),
 ,
 home: Scaffold(
 drawer: _buildDrawer(context),
 appBar: AppBar(
 title: Text('Looped In'),
 backgroundColor: Color.fromRGBO(
 135,
 142,
 136,
 1.0,
 ),
 ),
 body: Container(
 padding: EdgeInsets.symmetric(horizontal: 10.0),
 child: _pageOptions[_selectedTab],
 ),
 bottomNavigationBar: BottomNavigationBar(
 currentIndex: _selectedTab,
 onTap: (int index) 
 setState(() 
 _selectedTab = index;
 );
 ,
 fixedColor: Color.fromRGBO(118, 190, 208, 1.0),
 items: [
 BottomNavigationBarItem(
 icon: Icon(Icons.home),
 title: Text('Everything'),
 ),
 BottomNavigationBarItem(
 icon: Icon(Icons.category),
 title: Text('Categories'),
 ),
 ],
 ),
 ),
 );
 

You probably need a string in "about" Screen before Widget build

static const String routeName = "/about";

or just use this

onPressed: () 
 Navigator.of(context).push(MaterialPageRoute(
 builder: (context) => new AboutScreen()));
 

You need to make sure that context that you are using for Navigator has a parent MaterialApp or this error will occur. Wrapping your Scaffold widget with MaterialApp should solve the issue.

Also in your MaterialApp make sure to provide the route parameter with the route '/about'

It should look something like this:

 MaterialApp(
 routes: <String, WidgetBuilder>
 '/about': (BuildContext context) => AboutPage()
 ,
 home: Scaffold(),
 );

EDIT:

Below you can find the solution based on your code. It works I tested. All you have to do is wrap your Scaffold with Builder like shown below:

home: Builder(
 builder: (context) => Scaffold(
 drawer: _buildDrawer(context),
 appBar: AppBar(
 title: Text('Looped In'),
 backgroundColor: Color.fromRGBO(
 135,
 142,
 136,
 1.0,
 ),
 ),