时间戳

首页 > 解决方案 > 来自 MaterialApp 构建器的导航器

flutter - 来自 MaterialApp 构建器的导航器

问题描述

我正在尝试将我的整个应用程序嵌入到 AppBar 和页脚中。所以我尝试为我的 MaterialApp 提供一个自定义生成器，看起来像这样（为了清楚起见，我用按钮替换了页脚和应用栏）

import 'package:epicture/scenes/Landing.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      initialRoute: '/',
      builder: (context, child) => Container(
          child: FlatButton(
                child: Text('Click me'),
                onPressed: () => Navigator.of(context).pushNamed('/app'),
      )),
      // In my current code
      builder: (context, child) => Embedder(child),
      routes: <String, WidgetBuilder>{
        '/': (context) => Landing(),
        '/app': (context) => Text('My App !'),
      },
    );
  }
}

但是在按下“点击我”按钮时，会出现一个错误，指出上下文没有导航器

the context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget

但实际上，该按钮是一个页脚，可以单击以从每个页面更改页面。

我想知道如何从自定义构建器访问导航器，如果我只是朝着错误的方向前进，在我的应用程序的每个页面中都有相同的模式（页脚 + 页眉）

标签： flutterdart

解决方案

您无法从内部访问Navigator，因为由此返回的任何小部件都将成为导航器的父级。contextbuilderbuilder

那么，我该怎么办？我可以在这里访问导航器，如何？

是的！您可以创建一个GlobalKey并将其传递给您的MaterialApp. 然后使用该密钥访问Navigator您的builder.

例子：

import 'package:epicture/scenes/Landing.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> _navigator = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      initialRoute: '/',
      navigatorKey: _navigator,
      builder: (context, child) {
        return Container(
          child: FlatButton(
            child: Text('Click me'),
            onPressed: () => _navigator.currentState.pushNamed('/app'),
          ),
        );
      },
      routes: <String, WidgetBuilder>{
        '/': (context) => Landing(),
        '/app': (context) => Text('My App !'),
      },
    );
  }
}

希望有帮助！

推荐阅读