导航操作请求的上下文不包括导航错误。

huangapple
go评论101阅读模式
英文:

Navigator operation requested with a context that does not include a Navigator error

问题

当我想要在Flutter中进行页面导航时，会出现错误：“使用不包含导航器的上下文请求导航器操作。” 我的代码如下。

...

void main() => runApp(const Reservation());

class Reservation extends StatefulWidget {
  const Reservation({super.key, });

  @override
  State<Reservation> createState() => _ReservationState();
}

class _ReservationState extends State<Reservation> {

  TextEditingController username = TextEditingController();
  TextEditingController password = TextEditingController();
  @override
  void initState() {
    username.text = "";
    password.text = "";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Paynasoft",
      debugShowCheckedModeBanner: false,
      home: Scaffold(

        appBar:  AppBar(
          backgroundColor: Colors.green,
          title: Image.asset('image/6.png', fit: BoxFit.cover, height: 32,),

        ),
        body: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.all(20),
            child: Column(
                children: [

                  Container(

                      padding: const EdgeInsets.all(40),
                      child: Image.asset('image/paynasoft.png', fit: BoxFit.cover, height: 180,)),

                  TextField(
                      controller: username,
                      decoration: InputDecoration(
                        labelText: "Username",
                        prefixIcon: const Icon(Icons.people),
                        border: myinputborder(),
                        enabledBorder: myinputborder(),
                        focusedBorder: myfocusborder(),

                      )
                  ),
                  Container(height: 20,),
                  TextField(
                    controller: password,
                    decoration: InputDecoration(
                      prefixIcon: const Icon(Icons.lock),
                      labelText: "Password",
                      enabledBorder: myinputborder(),
                      focusedBorder: myfocusborder(),
                    ),
                  ),

                  Container(
                    child: Padding(padding: EdgeInsets.all(25),),
                  ),

                  Container(
                    height: 50,
                    width: 350,
                    child:

                    FloatingActionButton.extended(
                      label: Text("Login", style: TextStyle(fontSize: 25,),),
                      backgroundColor: Colors.green,
                      onPressed: () {Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const MobileScreenLayout(),
                        ),
                      );},
                    ),

                  ),
                  Container(
                    child: Padding (padding: EdgeInsets.all(7),),
                  ),
                  TextButton(
                    style: TextButton.styleFrom(
                      textStyle: const TextStyle(fontSize: 18),
                    ),
                    onPressed: () {},
                    child: const Text('I forgot my password?'),
                  ),

                ]),

          ),
        ),

      ),

    );



  }

  OutlineInputBorder myinputborder(){ 
    return OutlineInputBorder( 
        borderRadius: BorderRadius.all(Radius.circular(20)),
        borderSide: BorderSide(
          color:Colors.green,
          width: 3,
        )
    );
  }

  OutlineInputBorder myfocusborder(){
    return OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(20)),
        borderSide: BorderSide(
          color:Colors.green,
          width: 3,
        )
    );
  }
}

class MobileScreenLayout extends StatefulWidget {
  const MobileScreenLayout({Key? key}) : super(key: key);

  @override
  State<MobileScreenLayout> createState() => _MobileScreenLayoutState();
}

class _MobileScreenLayoutState extends State<MobileScreenLayout> {
  int _page = 0;
  late PageController pageController; 

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  @override
  void dispose() {
    super.dispose();
    pageController.dispose();
  }

  void onPageChanged(int page) {
    setState(() {
      _page = page;
    });
  }

  void navigationTapped(int page) {
    pageController.jumpToPage(page);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: pageController,
        onPageChanged: onPageChanged,
        children: homeScreenItems,
      ),
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: mobileBackgroundColor,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: (_page == 0) ? primaryColor : secondaryColor,
            ),
            label: '',
            backgroundColor: primaryColor,
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.search,
                color: (_page == 1) ? primaryColor : secondaryColor,
              ),
              label: '',
              backgroundColor: primaryColor),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.add_circle,
                color: (_page == 2) ? primaryColor : secondaryColor,
              ),
              label: '',
              backgroundColor: primaryColor),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.favorite,
              color: (_page == 3) ? primaryColor : secondaryColor,
            ),
            label: '',
            backgroundColor: primaryColor,
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
              color: (_page == 4) ? primaryColor : secondaryColor,
            ),
            label: '',
            backgroundColor: primaryColor,
          ),
        ],
        onTap: navigationTapped,
        currentIndex: _page,
      ),
    );
  }
}
英文:

when I want to do page navigation with flutter, "Navigator operation requested with a context that does not include a Navigator." I get an error. My codes are like this.
..................................................................................................................................................................................

void main() =&gt; runApp(const Reservation());
class Reservation extends StatefulWidget {
const Reservation({super.key, });
@override
State&lt;Reservation&gt; createState() =&gt; _ReservationState();
}
class _ReservationState extends State&lt;Reservation&gt; {
TextEditingController username = TextEditingController();
TextEditingController password = TextEditingController();
@override
void initState() {
username.text = &quot;&quot;;
password.text = &quot;&quot;;
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: &quot;Paynasoft&quot;,
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar:  AppBar(
backgroundColor: Colors.green,
title: Image.asset(&#39;image/6.png&#39;, fit: BoxFit.cover, height: 32,),
),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(40),
child: Image.asset(&#39;image/paynasoft.png&#39;, fit: BoxFit.cover, height: 180,)),
TextField(
controller: username,
decoration: InputDecoration(
labelText: &quot;Username&quot;,
prefixIcon: const Icon(Icons.people),
border: myinputborder(),
enabledBorder: myinputborder(),
focusedBorder: myfocusborder(),
)
),
Container(height: 20,),
TextField(
controller: password,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.lock),
labelText: &quot;Password&quot;,
enabledBorder: myinputborder(),
focusedBorder: myfocusborder(),
),
),
Container(
child: Padding(padding: EdgeInsets.all(25),),
),
Container(
height: 50,
width: 350,
child:
FloatingActionButton.extended(
label: Text(&quot;Login&quot;, style: TextStyle(fontSize: 25,),),
backgroundColor: Colors.green,
onPressed: () {Navigator.push(
context,
MaterialPageRoute(
builder: (context) =&gt; const MobileScreenLayout(),
),
);},
),
),
Container(
child: Padding (padding: EdgeInsets.all(7),),
),
TextButton(
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 18),
),
onPressed: () {},
child: const Text(&#39;I forgot my password?&#39;),
),
]),
),
),
),
);
}
OutlineInputBorder myinputborder(){ //return type is OutlineInputBorder
return OutlineInputBorder( //Outline border type for TextFeild
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(
color:Colors.green,
width: 3,
)
);
}
OutlineInputBorder myfocusborder(){
return OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(
color:Colors.green,
width: 3,
)
);
}
}

screen.dart

class MobileScreenLayout extends StatefulWidget {
const MobileScreenLayout({Key? key}) : super(key: key);
@override
State&lt;MobileScreenLayout&gt; createState() =&gt; _MobileScreenLayoutState();
}
class _MobileScreenLayoutState extends State&lt;MobileScreenLayout&gt; {
int _page = 0;
late PageController pageController; // for tabs animation
@override
void initState() {
super.initState();
pageController = PageController();
}
@override
void dispose() {
super.dispose();
pageController.dispose();
}
void onPageChanged(int page) {
setState(() {
_page = page;
});
}
void navigationTapped(int page) {
//Animating Page
pageController.jumpToPage(page);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: pageController,
onPageChanged: onPageChanged,
children: homeScreenItems,
),
bottomNavigationBar: CupertinoTabBar(
backgroundColor: mobileBackgroundColor,
items: &lt;BottomNavigationBarItem&gt;[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: (_page == 0) ? primaryColor : secondaryColor,
),
label: &#39;&#39;,
backgroundColor: primaryColor,
),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
color: (_page == 1) ? primaryColor : secondaryColor,
),
label: &#39;&#39;,
backgroundColor: primaryColor),
BottomNavigationBarItem(
icon: Icon(
Icons.add_circle,
color: (_page == 2) ? primaryColor : secondaryColor,
),
label: &#39;&#39;,
backgroundColor: primaryColor),
BottomNavigationBarItem(
icon: Icon(
Icons.favorite,
color: (_page == 3) ? primaryColor : secondaryColor,
),
label: &#39;&#39;,
backgroundColor: primaryColor,
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: (_page == 4) ? primaryColor : secondaryColor,
),
label: &#39;&#39;,
backgroundColor: primaryColor,
),
],
onTap: navigationTapped,
currentIndex: _page,
),
);
}
}

答案1

得分: 2

由于您直接从MaterialApp小部件导航，所以出现了错误。我们需要创建一个新的有状态或无状态小部件以使其正常工作。

import 'package:flutter/material.dart';

void main() => runApp(const Reservation());

class Reservation extends StatefulWidget {
  const Reservation({
    super.key,
  });

  @override
  State<Reservation> createState() => _ReservationState();
}

class _ReservationState extends State<Reservation> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Paynasoft',
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}

class Homepage extends StatefulWidget {
  const Homepage({super.key});

  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  TextEditingController username = TextEditingController();
  TextEditingController password = TextEditingController();
  @override
  void initState() {
    username.text = '';
    password.text = '';
    super.initState();
  }

  OutlineInputBorder myinputborder() {
    return const OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(20)),
      borderSide: BorderSide(
        color: Colors.green,
        width: 3,
      ),
    );
  }

  OutlineInputBorder myfocusborder() {
    return const OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(20)),
      borderSide: BorderSide(
        color: Colors.green,
        width: 3,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Image.asset(
          'image/6.png',
          fit: BoxFit.cover,
          height: 32,
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              Container(
                padding: const EdgeInsets.all(40),
                child: Image.asset(
                  'image/paynasoft.png',
                  fit: BoxFit.cover,
                  height: 180,
                ),
              ),
              TextField(
                controller: username,
                decoration: InputDecoration(
                  labelText: 'Username',
                  prefixIcon: const Icon(Icons.people),
                  border: myinputborder(),
                  enabledBorder: myinputborder(),
                  focusedBorder: myfocusborder(),
                ),
              ),
              Container(
                height: 20,
              ),
              TextField(
                controller: password,
                decoration: InputDecoration(
                  prefixIcon: const Icon(Icons.lock),
                  labelText: 'Password',
                  enabledBorder: myinputborder(),
                  focusedBorder: myfocusborder(),
                ),
              ),
              Container(
                child: const Padding(
                  padding: EdgeInsets.all(25),
                ),
              ),
              SizedBox(
                height: 50,
                width: 350,
                child: FloatingActionButton.extended(
                  label: const Text(
                    'Login',
                    style: TextStyle(
                      fontSize: 25,
                    ),
                  ),
                  backgroundColor: Colors.green,
                  onPressed: () {
                     Navigator.push(
                       context,
                       MaterialPageRoute(
                         builder: (context) => const MobileScreenLayout(),
                      ),
                    );
                  },
                ),
              ),
              Container(
                child: const Padding(
                  padding: EdgeInsets.all(7),
                ),
              ),
              TextButton(
                style: TextButton.styleFrom(
                  textStyle: const TextStyle(fontSize: 18),
                ),
                onPressed: () {},
                child: const Text('I forgot my password?'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这应该解决您的问题。

英文:

Since you are directly navigating from the MaterialApp widget you are getting the error. we need to create a new stateful or stateless widget to get this working.

import &#39;package:flutter/material.dart&#39;;
void main() =&gt; runApp(const Reservation());
class Reservation extends StatefulWidget {
const Reservation({
super.key,
});
@override
State&lt;Reservation&gt; createState() =&gt; _ReservationState();
}
class _ReservationState extends State&lt;Reservation&gt; {
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: &#39;Paynasoft&#39;,
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
const Homepage({super.key});
@override
State&lt;Homepage&gt; createState() =&gt; _HomepageState();
}
class _HomepageState extends State&lt;Homepage&gt; {
TextEditingController username = TextEditingController();
TextEditingController password = TextEditingController();
@override
void initState() {
username.text = &#39;&#39;;
password.text = &#39;&#39;;
super.initState();
}
OutlineInputBorder myinputborder() {
//return type is OutlineInputBorder
return const OutlineInputBorder(
//Outline border type for TextFeild
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(
color: Colors.green,
width: 3,
),
);
}
OutlineInputBorder myfocusborder() {
return const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(
color: Colors.green,
width: 3,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: Image.asset(
&#39;image/6.png&#39;,
fit: BoxFit.cover,
height: 32,
),
),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(40),
child: Image.asset(
&#39;image/paynasoft.png&#39;,
fit: BoxFit.cover,
height: 180,
),
),
TextField(
controller: username,
decoration: InputDecoration(
labelText: &#39;Username&#39;,
prefixIcon: const Icon(Icons.people),
border: myinputborder(),
enabledBorder: myinputborder(),
focusedBorder: myfocusborder(),
),
),
Container(
height: 20,
),
TextField(
controller: password,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.lock),
labelText: &#39;Password&#39;,
enabledBorder: myinputborder(),
focusedBorder: myfocusborder(),
),
),
Container(
child: const Padding(
padding: EdgeInsets.all(25),
),
),
SizedBox(
height: 50,
width: 350,
child: FloatingActionButton.extended(
label: const Text(
&#39;Login&#39;,
style: TextStyle(
fontSize: 25,
),
),
backgroundColor: Colors.green,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =&gt; const MobileScreenLayout(),
),
);
},
),
),
Container(
child: const Padding(
padding: EdgeInsets.all(7),
),
),
TextButton(
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 18),
),
onPressed: () {},
child: const Text(&#39;I forgot my password?&#39;),
),
],
),
),
),
);
}
}

This should solve your problem

huangapple
  • 本文由 发表于 2023年7月18日 02:26:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76707175.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定