Início / coding / Perguntas / 79430351
Accepted
Jo Jo
Asked: 2025-02-11 22:38:54 +0800 CST

Contexto do Flutter appBar

  • 772

Estou aprendendo flutter. Abaixo está meu código básico. Recebo um erro dizendo que meu botão no appBar não tem acesso ao Navigator.

import 'package:flutter/material.dart';
import 'package:new_app/pages/first_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            actions: [
              IconButton(
                icon: Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => FirstPage()));},
                  )
            ]),
        body: Center(
          child: Text('Sample Text'),
        ),
      ),
    );
  }
}

Não entendi, pois parece estar diretamente sob Scaffold e MaterialApp, então deveria? Alguém pode me explicar isso em termos simples?

flutter

4 respostas

  1. Mova o scaffold para outra classe de widget. Porque o navigator precisa acessar o contexto do materialapp

    class Home extends StatelessWidget {
 const Home({super.key});

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(
                Icons.arrow_forward_ios,
                color: Colors.black,
              ),
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => FirstPage()));},
              )
        ]),
    body: Center(
      child: Text('Sample Text'),
    ),
   );
  }
}

    Então chame-o de In the MainApp

    class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: Home(), 
  ), 
 }
}
    • 0

  2. É melhor ter uma classe principal (geralmente sem estado) que carregue a primeira página do aplicativo.

    Esta deve ser a única classe que possui o widget MaterialApp.

    Aqui está um exemplo claro para sua pergunta:

    Classe principal:

    class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: HomePage(),
  ), 
 }

 Widget _getFirstPage() => HomePage()
}

    É bom se você definir um método que navegue entre páginas: OBSERVAÇÃO: Deve ser definido fora das classes e no escopo global.

    void pushTo(Widget page, BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => page,
      ),
    );
  }

    Classe HomePage:

    class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(
              Icons.arrow_forward_ios,
              color: Colors.black,
            ),
            onPressed: () {
              pushTo(HomePage(), context);
            },
          )
        ],
      ),
      body: Center(
        child: Text('Sample Text'),
      ),
    );
  }
}
    • 0

  3. O contexto que você usa com o Navigator é o contexto do widget MyApp que não suporta navegação (recupere do argumento da função de construção). Você precisa do contexto do widget MaterialApp.

    Opção 1: O mínimo necessário para obter um contexto válido do widget MaterialApp é usar um LayoutBuilder.

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LayoutBuilder(
        builder: (materialAppContext, constraints) {
          return Scaffold(
            appBar: AppBar(actions: [
              IconButton(
                icon: Icon(Icons.arrow_forward_ios, color: Colors.black),
                onPressed: () {
                  Navigator.push(materialAppContext, MaterialPageRoute(builder: (context) => FirstPage()));
                },
              ),
            ]),
            body: Center(
              child: Text('Sample Text'),
            ),
          );
        },
      ),
    );
  }

    Opção 2: Extraia o widget HomePage, para que seu contexto de construção fique abaixo do widget MaterialApp na árvore

    Meu aplicativo

    class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home: HomePage(),
  ), 
 }
}

    Página inicial

    class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(actions: [
        IconButton(
          icon: Icon(Icons.arrow_forward_ios, color: Colors.black),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => FirstPage()));
          },
        ),
      ]),
      body: Center(
        child: Text('Sample Text'),
      ),
    );
  }
}
    • 0
  4. Best Answer

    Pense nos widgets no Flutter como uma árvore, com o contexto apontando para qualquer nó que esteja sendo construído com a função build. No seu caso, você tem

    MyApp    <------ context
  --> MaterialApp
   (--> Navigator built within MaterialApp)
      --> Scaffold
        --> App Bar
          --> IconButton
        --> Center
          -->Text

    Então, quando você usa o contexto para encontrar o Navegador, você está usando um contexto para o MyApp que não está sob o navegador.

    Você pode criar uma nova subclasse de Widget Stateless ou Stateful para conter seu AppBar + IconButton, já que a função de construção dentro deles apontará para esse nível, ou você pode usar um Builder e definir o builderretorno de chamada (que tem um contexto apontando para o Builder) para retornar o AppBar + IconButton.

    Pergunta semelhante: aqui

    • 0

relate perguntas