Flutter - Provider 变量更改时触发导航

Question

我正在尝试在初始应用启动时显示启动画面，直到我正确检索到所有数据。检索由名为“ProductData”的类完成。一旦准备好，我想从启动页面导航到应用程序的主屏幕。

不幸的是，我找不到触发运行这种导航并侦听提供程序的方法的好方法。

这是我用来测试这个想法的代码。具体来说，我想运行命令 Navigator.pushNamed(context, 'home');当变量 shouldProceed 变为 true 时。不幸的是，下面的代码给了我错误，“在构建期间调用了 setState() 或 markNeedsBuild()。”

import 'package:catalogo/firebase/ProductData.dart';
import 'package:flutter/material.dart';=
import 'package:provider/provider.dart';

class RouteSplash extends StatefulWidget {
  @override
  _RouteSplashState createState() => _RouteSplashState();
}

class _RouteSplashState extends State<RouteSplash> {
  bool shouldProceed = false;

  @override
  Widget build(BuildContext context) {
    shouldProceed =
        Provider.of<ProductData>(context, listen: true).shouldProceed; 
    if (shouldProceed) {
      Navigator.pushNamed(context, 'home'); <-- The error occurs when this line is hit.
    } else {
      return Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
  }
}

有没有更好的方法来根据提供者的结果导航到页面？

Answer 1

如果您仍在等待数据，您应该显示加载初始屏幕，而不是尝试导航到新视图，并且一旦更改显示您的主主视图，如下所示：

import 'package:catalogo/firebase/ProductData.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {
  bool shouldProceed = Provider.of<ProductData>(context, listen: true).shouldProceed;

  @override
  Widget build(BuildContext context) {
    if(shouldProceed){
      return Home();
    }else{
      return RouteSplash();
    }
  }
}

Answer 2

在本例中使用 BlocListener：

BlocListener(
    bloc: BlocProvider.of<DataBloc>(context),
    listener: (BuildContext context, DataState state) {
        if (state is Success) {              
            Navigator.of(context).pushNamed('/details');
        }              
    },
    child: BlocBuilder(
        bloc: BlocProvider.of<DataBloc>(context),
        builder: (BuildContext context, DataState state) {        
            if (state is Initial) {
                return Text('Press the Button');
            }
            if (state is Loading) {
                return CircularProgressIndicator();
            }  
            if (state is Success) {
                return Text('Success');
            }  
            if (state is Failure) {
                return Text('Failure');
            }
        },
    }
)

来源：https://github.com/felangel/bloc/issues/201

Answer 3

我想我有一个可以满足 OP 要求的解决方案。如果您将初始屏幕设为Stateful，则可以添加PostFrameCallback。这避免了在 build 运行时调用 Navigator 的任何问题。然后，您的回调可以调用Provider 需要读取数据的任何例程。这个读取数据例程可以传递一个包含Navigator 命令的进一步回调。

在我的解决方案中，我添加了进一步的回调，以便启动屏幕至少可见一秒钟（您可以在此处选择您认为合理的持续时间）。不幸的是，这会产生竞争条件，因此我需要导入 synchronized 包以避免出现问题。

import 'package:flutter/material.dart';
import 'package:reflect/utils/constants.dart';
import 'category_screen.dart';
import 'package:provider/provider.dart';
import 'package:reflect/data_models/app_prefs.dart';
import 'dart:async';
import 'dart:core';
import 'package:synchronized/synchronized.dart';

class LoadingScreen extends StatefulWidget {
  static const id = 'LoadingScreen';

  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {
  bool readPrefsDone = false;
  bool timeFinished = false;
  Lock _lock = Lock();

  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<AppPrefs>(context, listen: false).readPrefs(readDone);
      Timer(Duration(seconds: 1), () {
        timerDone();
      });
    });
  }

  void timerDone() async {
    _lock.synchronized(() {
      if (readPrefsDone) {
        pushMainScreen();
      }
      timeFinished = true;
    });
  }

  void readDone() {
    _lock.synchronized(() {
      if (timeFinished) {
        pushMainScreen();
      }
      readPrefsDone = true;
    });
  }

  void pushMainScreen() {
    Navigator.pushReplacement(
      context,
      PageRouteBuilder(
        pageBuilder: (context, animation, animation2) => CategoryScreen(),
        transitionDuration: Duration(seconds: 1),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Hero(
              tag: kFishLogoTag,
              child: Image(
                image: AssetImage('assets/fish_logo.png'),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Text(
              'Reflect',
              style: TextStyle(
                fontSize: 30,
                color: Color(0xFF0000cc),
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    ));
  }
}

Answer 4

遇到此问题的任何其他人都可以使用此代码

Future.delayed(Duration.zero, () => Navigate.toView(context));

这会导航到另一个屏幕而不会出现构建错误