如何在颤动的主页中导航屏幕？答案

【问题标题】：how navigate screen in main page on flutter?如何在颤动的主页中导航屏幕？
【发布时间】：2021-09-18 04:11:12
【问题描述】：

我想在主页上等待 5 秒并显示加载动画，然后导航到另一个页面。这是我的代码

import 'mainPage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'dart:async';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.cyan,
        body: Builder(
          builder: (context) => Center(
            child: Container(
              child: SpinKitCubeGrid(color: Colors.white, size: 50.0),
            ),
          ),
        ),
      ),
    );
  }

  Future loadData() async {
    return new Timer(Duration(seconds: 5), () {
      setState(() {
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => MainPage()));
      });
    });
  }
}

但我收到了这个错误：

未处理的异常：使用不包含导航器的上下文请求导航器操作。

我该怎么办？

【问题讨论】：

标签： android flutter flutter-android

【解决方案1】：

也许这对你有帮助

static Route route() {
 return MaterialPageRoute<void>(builder: (_) => MyApp());
}

 onPressed: () => Navigator.of(context).push<void>(MainPage.route()),
................

 static Route route() {
return MaterialPageRoute<void>(builder: (_) => MainPage());
  }

  onPressed: () => Navigator.of(context).push<void>(MyApp.route()),

【讨论】：

【解决方案2】：

你可以这样试试吗？我没有运行代码，而是展示了基本思想。只需传递上下文并从构建函数中调用它。

class _MyAppState extends State<MyApp> {
  bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    loadData(context);

    return MaterialApp(
      ...
    );
  }

  Future loadData(context) async {
    ...
  }
}

【讨论】：

【解决方案3】：

用MaterialApp 包裹MyApp，这将提供正确的context 到Navigator

void main() {
  runApp(MaterialApp(home: MyApp()));
}

【讨论】：

【解决方案4】：

您需要context 才能使用Navigator 导航。

要在不使用 context 的情况下进行导航，您可以使用名为 GetX 的包

例子：

在您的 MaterialApp 前添加“Get”，将其变成 GetMaterialApp
```
 GetMaterialApp( // Before: MaterialApp(
   home: MyHome(),
 )
```
导航到新屏幕：
```
 Get.to(NextScreen());
```

【讨论】：