flutter Navigator推送方法dispose MaterialApp？

Question

我想导航 MyApp -> Home -> SearchStore 但它不起作用。

这是我的 MyApp 、 Home 、 SearchStore Widget 代码

我的应用程序小部件

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: AppStyle().appTheme,
      home: Scaffold(
        body: FutureBuilder(
          future: checkUserInfo(context),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: SvgPicture.asset(
                  'assets/brand/big_logo.svg',
                ),
              );
            } else if (snapshot.data!) {
              return const Home();
            } else {
              return const SignIn();
            }
          },
        ),
      ),
    );
  }
}

主页小部件

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'search store',
          style: AppStyle().appTheme.textTheme.displayLarge,
        ),
        SizedBox(
          height: 20,
        ),
        Hero(
          tag: 'hero',
          child: TextField(
            readOnly: true,
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => SearchStore(),
                ),
              );
            },
            decoration: InputDecoration(
              prefixIcon: Icon(Icons.search),
              prefixIconColor: AppStyle().brandColor,
              hintText: 'need store name',
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: AppStyle().brandColor,
                  width: 1.5,
                ),
                borderRadius: BorderRadius.circular(15),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: AppStyle().brandColor,
                  width: 1.5,
                ),
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ),
        )
      ],
    );
  }
}

搜索商店小部件

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Hero(
            tag: 'hero',
            child: TextField(
              readOnly: false,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                prefixIconColor: AppStyle().brandColor,
                hintText: 'need store name',
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: AppStyle().brandColor,
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: AppStyle().brandColor,
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我想要 Navigator 推送主页 -> SearchStore 小部件，但是当使用 Navigator.push 方法时，出现错误

这是错误调用堆栈

debugCheckHasMaterial.<anonymous closure> (c:\Users\jun\flutter\packages\flutter\lib\src\material\debug.dart:38)
debugCheckHasMaterial (c:\Users\jun\flutter\packages\flutter\lib\src\material\debug.dart:63)
_TextFieldState.build (c:\Users\jun\flutter\packages\flutter\lib\src\material\text_field.dart:1324)
StatefulElement.build (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5592)
ComponentElement.performRebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5480)
StatefulElement.performRebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5643)
Element.rebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5196)
ComponentElement._firstBuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5462)
StatefulElement._firstBuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5634)
ComponentElement.mount (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5456)
Element.inflateWidget (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:4335)
Element.updateChild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:3846)
ComponentElement.performRebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5505)
Element.rebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5196)
ComponentElement._firstBuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5462)
ComponentElement.mount (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5456)
Element.inflateWidget (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:4335)
Element.updateChild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:3846)
ComponentElement.performRebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5505)
StatefulElement.performRebuild (c:\Users\jun\flutter\packages\flutter\lib\src\widgets\framework.dart:5643

这是调试控制台

No Material widget found.
TextField widgets require a Material widget ancestor within the closest LookupBoundary.
In Material Design, most widgets are conceptually "printed" on a sheet of material. In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.
To introduce a Material widget, you can either directly include one, or use a widget that contains Material itself, such as a Card, Dialog, Drawer, or Scaffold.
The specific widget that could not find a Material ancestor was: TextField

这是 WidgetTree

我该怎么办？ 我认为 textField 需要 MaterialApp 但 Navigator 推送方法 -> MateriApp 上的新 UiStack -> 没有 MaterialApp

• 包裹MaterialAPP和脚手架

 Hero(
                        tag: 'hero',
                        child: TextField(
                          readOnly: true,
                          onTap: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => MaterialApp(
                                  home: Scaffold(
                                    body: SearchStore(),
                                  ),
                                ),
                              ),
                            );
                          },
                          decoration: InputDecoration(
                            prefixIcon: Icon(Icons.search),
                            prefixIconColor: AppStyle().brandColor,
                            hintText: 'need store name.',
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: AppStyle().brandColor,
                                width: 1.5,
                              ),
                              borderRadius: BorderRadius.circular(15),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: AppStyle().brandColor,
                                width: 1.5,
                              ),
                              borderRadius: BorderRadius.circular(15),
                            ),
                          ),
                        ),
                      )

但同样的错误调用堆栈，调试控制台

我不知道我该怎么办

Answer 1

我建议每个屏幕都应该有自己的

Scaffold()

。

因此，将未来的构建器推到

MaterialApp

小部件中的脚手架上方，如下所示：

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: AppStyle().appTheme,
      home: FutureBuilder(
          future: checkUserInfo(context),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return LoadingScreen();
              
            } else if (snapshot.hasData) {
              return const Home();
            } else {
              return const SignIn();
            }
          },
        ),
    );
  }
}

每个屏幕都被脚手架包围：

示例：主页

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'search store',
          ),
          SizedBox(
            height: 20,
          ),
          Hero(
            tag: 'hero',
            child: TextField(
              readOnly: true,
              onTap: () {

                print('Pressed..........');
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                fillColor: Colors.orange,
                filled: true,
                hintText: 'need store name',
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

对登录和加载屏幕执行相同的操作。

希望对您有帮助。