Flutter中FloatingActionButton跳转页面失效，报Context问题求助

问题根源 #

你当前使用的context是myapp组件的上下文，这个上下文位于MaterialApp的外部层级，无法访问到MaterialApp内部维护的导航器（Navigator），所以点击按钮后页面跳转无响应。

解决方案一：将首页Scaffold抽为独立组件 #

把原本直接写在MaterialApp的home参数里的Scaffold抽成单独的组件，这样组件内部的上下文就属于MaterialApp的子树，能正常调用导航方法：

import 'package:flutter/material.dart';
import 'package:kitchen/Screen/FoodScreen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScreen(),
    );
  }
}

// 独立的首页组件
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white60,
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('Teach'),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.favorite),
          )
        ],
      ),
      body: const Center(
        child: Text('Add Content here'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const FoodScreen()),
          );
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.add),
      ),
    );
  }
}

解决方案二：用Builder组件包裹Scaffold #

如果不想新增组件，可以用Builder组件包裹Scaffold，Builder会提供一个属于MaterialApp子树的上下文，从而能正确访问导航器：

import 'package:flutter/material.dart';
import 'package:kitchen/Screen/FoodScreen.dart';

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

class myapp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) { // 这里的context属于MaterialApp子树
          return Scaffold(
            backgroundColor: Colors.white60,
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('Teach'),
              actions: [
                IconButton(onPressed:(){}, icon: const Icon(Icons.favorite),)
              ],
            ),
            body: const Center(child: Text('Add Content here')),
            floatingActionButton: FloatingActionButton(
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context)=>const FoodScreen()));
              },
              backgroundColor:Colors.green,
              child:const Icon(Icons.add),
            ),
          );
        },
      )
    );
  }
}

补充规范：完善FoodScreen组件 #

你的FoodScreen组件的build方法需要加上@override注解，符合Flutter代码规范：

import 'package:flutter/material.dart';

class FoodScreen extends StatelessWidget{
  const FoodScreen({Key ? key}) :super(key:key);

  @override
  Widget build(BuildContext context)
  {
    return const Scaffold(
        body:Center(child:Text('hello')));
  }
}

内容的提问来源于stack exchange，提问作者Allan