无法在提供者中的容器外部设置状态

Question

我知道问题出在问题上，我试图在呈现Widget之前在Provider中设置状态，但是我在哪里可以做到这一点。仅在容器小部件中？但是除非有按钮或其他东西，否则我无法这样做。

希望您能在这里解决问题。

任何提示，我将不胜感激！

我的错误：

setState() or markNeedsBuild() called during build.

或

The setter 'lastPage=' was called on null.
Receiver: null
Tried calling: lastPage=true

如果我在这里设置状态

  _detectLastPage() {
    int currentPage = this.currentStep == null ? 1 : this.currentStep + 1;

    if (currentPage == 1 && this.currentStep == null) {
      this._onFirstPage();
    } else if (currentPage == this.totalSteps) {
      this.lastPage = true;
      _welcomeBloc.lastPage = true;
      this._onLastPage();
    } else {
      this.lastPage = false;
      _welcomeBloc.lastPage = true;
    }
  }

我的小部件：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:ui_flutter/screens/welcome/welcome_bloc.dart';

class Footer extends StatelessWidget {
  final int currentStep;
  final int totalSteps;
  final Color activeColor;
  final Color inactiveColor;
  final Duration duration;
  final Function onFinal;
  final Function onStart;

  final double radius = 10.0;
  final double distance = 4.0;

  Container stepper;
  Container nextArrow;
  bool lastPage;
  WelcomeBloc _welcomeBloc;

  Footer({
    this.activeColor,
    this.inactiveColor,
    this.currentStep,
    this.totalSteps,
    this.duration,
    this.onFinal,
    this.onStart,
  }) {
    this._detectLastPage();
    this._makeStepper();
    this._makeNextArrow();
  }

  @override
  Widget build(BuildContext context) {
    print('footer is launching');

    final WelcomeBloc _welcome = Provider.of<WelcomeBloc>(context);
    _welcomeBloc = _welcome;
    // this._welcomeBloc.lastPage = true; // I'd like to set the state here

    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          this.stepper,
          this.nextArrow,
          RaisedButton(
            child: Text('kdfljds'),
            onPressed: () {
              print(_welcomeBloc.lastPage);
              _welcomeBloc.lastPage = true; // I can access from here BUT CANNOT access outside this container
            },
          )
        ],
      ),
    );
  }

  _makeCirle(activeColor, inactiveColor, position, currentStep) {
    currentStep = currentStep ?? 0;
    Color color = (position == currentStep) ? activeColor : inactiveColor;

    return Container(
      height: this.radius,
      width: this.radius,
      margin: EdgeInsets.only(left: this.distance, right: this.distance),
      decoration: BoxDecoration(
          color: color,
          border: Border.all(color: activeColor, width: 2.0),
          borderRadius: BorderRadius.circular(50.0)),
    );
  }

  _makeStepper() {
    List<Container> circles = List();

    for (var i = 0; i < totalSteps; i++) {
      circles.add(
        _makeCirle(this.activeColor, this.inactiveColor, i, this.currentStep),
      );
    }

    this.stepper = Container(
      child: Row(
        children: circles,
      ),
    );
  }

  _makeNextArrow() {
    this.nextArrow = Container(
      child: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: GestureDetector(
            onTap: () {
              _welcomeBloc.controller.nextPage(
                duration: this.duration ?? Duration(milliseconds: 500),
                curve: Curves.easeInOut,
              );
            },
            child: Icon(
              Icons.arrow_forward,
            )),
      ),
    );
  }

  _onLastPage() {
    if (this.onFinal != null) {
      this.onFinal();
    }
  }

  _onFirstPage() {
    if (this.onStart != null) {
      this.onStart();
    }
  }

  _detectLastPage() {
    int currentPage = this.currentStep == null ? 1 : this.currentStep + 1;

    if (currentPage == 1 && this.currentStep == null) {
      this._onFirstPage();
    } else if (currentPage == this.totalSteps) {
      this.lastPage = true;
      this._onLastPage();
    } else {
      this.lastPage = false;
    }
  }
}

BlocFile

import 'package:flutter/material.dart';

class WelcomeBloc extends ChangeNotifier {

  PageController _controller = PageController();
  int _currentPage;
  bool _lastPage = false;

  bool get lastPage => _lastPage; 

  set lastPage(bool value){
    print(value);
    _lastPage = value;
    notifyListeners();
  }

  int get currentPage => _currentPage;

  set currentPage(int value) {
    _currentPage = value;
    notifyListeners();
  }

  get controller => _controller;

  nextPage(Duration duration, Curves curve){
    controller.nextPage(duration: duration, curve: curve);
  }
}

[![error screen with StateLess, since I use Provider][1]][1]

我在这里这样称呼：

_detectLastPage() {
    int currentPage =
        this.widget.currentStep == null ? 1 : this.widget.currentStep + 1;

    if (currentPage == 1 && this.widget.currentStep == null) {
      this._onFirstPage();
    } else if (currentPage == this.widget.totalSteps) {
      this.lastPage = true;
      setState(() {
        _welcomeBloc.lastPage = true;
      });
      this._onLastPage();
    } else {
      this.lastPage = false;
      setState(() {
        _welcomeBloc.lastPage = false;
      });
    }
  }

而且没有SetState似乎是同样的错误...

如果我从您的示例的initState内部调用此错误。只是忘了你附上它

Answer 1

您不能在setState中使用StatelessWidget方法。将其转换为StatefulWidget，然后在setState方法中调用initState。

赞

class Footer extends StatefulWidget {
  final int currentStep;
  final int totalSteps;
  final Color activeColor;
  final Color inactiveColor;
  final Duration duration;
  final Function onFinal;
  final Function onStart;

  Footer({
    this.activeColor,
    this.inactiveColor,
    this.currentStep,
    this.totalSteps,
    this.duration,
    this.onFinal,
    this.onStart,
  });

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


class _FooterState extends State<Footer> {


  final double radius = 10.0;
  final double distance = 4.0;

  Container stepper;
  Container nextArrow;
  bool lastPage;
  WelcomeBloc _welcomeBloc;

  @override
  void initState(){
    this._detectLastPage();
    this._makeStepper();
    this._makeNextArrow();
    final WelcomeBloc _welcome = Provider.of<WelcomeBloc>(context);
    _welcomeBloc = _welcome;
    setState((){
     this._welcomeBloc.lastPage = true; // Where to use setState
    });
  }

  @override
  Widget build(BuildContext context) {
    print('footer is launching');


    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          this.stepper,
          this.nextArrow,
          RaisedButton(
            child: Text('kdfljds'),
            onPressed: () {
              print(_welcomeBloc.lastPage);
              _welcomeBloc.lastPage = true; // I can access from here BUT CANNOT access outside this container
            },
          )
        ],
      ),
    );
  }

  _makeCirle(activeColor, inactiveColor, position, currentStep) {
    currentStep = currentStep ?? 0;
    Color color = (position == currentStep) ? activeColor : inactiveColor;

    return Container(
      height: this.radius,
      width: this.radius,
      margin: EdgeInsets.only(left: this.distance, right: this.distance),
      decoration: BoxDecoration(
          color: color,
          border: Border.all(color: activeColor, width: 2.0),
          borderRadius: BorderRadius.circular(50.0)),
    );
  }

  _makeStepper() {
    List<Container> circles = List();

    for (var i = 0; i < totalSteps; i++) {
      circles.add(
        _makeCirle(this.activeColor, this.inactiveColor, i, this.currentStep),
      );
    }

    this.stepper = Container(
      child: Row(
        children: circles,
      ),
    );
  }

  _makeNextArrow() {
    this.nextArrow = Container(
      child: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: GestureDetector(
            onTap: () {
              _welcomeBloc.controller.nextPage(
                duration: this.duration ?? Duration(milliseconds: 500),
                curve: Curves.easeInOut,
              );
            },
            child: Icon(
              Icons.arrow_forward,
            )),
      ),
    );
  }

  _onLastPage() {
    if (this.onFinal != null) {
      this.onFinal();
    }
  }

  _onFirstPage() {
    if (this.onStart != null) {
      this.onStart();
    }
  }

  _detectLastPage() {
    int currentPage = this.currentStep == null ? 1 : this.currentStep + 1;

    if (currentPage == 1 && this.currentStep == null) {
      this._onFirstPage();
    } else if (currentPage == this.totalSteps) {
      this.lastPage = true;
      this._onLastPage();
    } else {
      this.lastPage = false;
    }
  }
}

Answer 2

如果我做对了，您正在尝试用圆圈（指示符）模仿PageView导航。

要这样做，有很多好的资源，还有一些类似的软件包： This example或this package

但是对于您的代码，我用两种方法编写了它：

第一种方法

这是您的代码和使用提供程序。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (BuildContext context) => WelcomeBloc(),
      child: Consumer<WelcomeBloc>(
        builder: (BuildContext context, value, Widget child) {
          PageController controller = value.controller;
          print('object');
          return MaterialApp(
            home: Scaffold(
              body: Stack(
                children: <Widget>[
                  PageView(
                    controller: controller,
                    children: List.generate(
                        10, (i) => Center(child: Text('Page $i'))),
                    onPageChanged: (i) {
                      value.currentPage = i;
                    },
                  ),
                  Footer(
                    activeColor: Colors.red,
                    duration: Duration(seconds: 1),
                    inactiveColor: Colors.yellow,
                    onFinal: () {},
                    onStart: () {},
                    totalSteps: 10,
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

class Footer extends StatefulWidget {
  final int totalSteps;
  final Color activeColor;
  final Color inactiveColor;
  final Duration duration;
  final Function onFinal;
  final Function onStart;
  final double radius;
  final double distance;

  Footer({
    this.activeColor,
    this.inactiveColor,
    this.totalSteps,
    this.duration,
    this.onFinal,
    this.onStart,
    this.radius = 10.0,
    this.distance = 4.0,
  });

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

class _FooterState extends State<Footer> {
  bool lastPage;
  WelcomeBloc _welcomeBloc;

  @override
  Widget build(BuildContext context) {
    final WelcomeBloc _welcome = Provider.of<WelcomeBloc>(context);

    _welcomeBloc = _welcome;

    // this._welcomeBloc.lastPage = true; // I'd like to set the state here

    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          _makeStepper(),
          _makeNextArrow(),
        ],
      ),
    );
  }

  _makeCircle(activeColor, inactiveColor, position, currentStep) {
    currentStep = currentStep ?? 0;
    Color color = (position == currentStep) ? activeColor : inactiveColor;

    return Container(
      height: widget.radius,
      width: widget.radius,
      margin: EdgeInsets.only(left: widget.distance, right: widget.distance),
      decoration: BoxDecoration(
          color: color,
          border: Border.all(color: activeColor, width: 2.0),
          borderRadius: BorderRadius.circular(50.0)),
    );
  }

  _makeNextArrow() {
    return Container(
      child: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: GestureDetector(
            onTap: () async {
              await _welcomeBloc.nextPage(widget.duration, Curves.easeInOut);
              setState(() {});
            },
            child: Icon(
              Icons.arrow_forward,
            )),
      ),
    );
  }

  _makeStepper() {
    return Container(
      child: Row(
        children: List.generate(
          widget.totalSteps,
          (i) => _makeCircle(
            this.widget.activeColor,
            this.widget.inactiveColor,
            i,
            _welcomeBloc.currentPage,
          ),
        ),
      ),
    );
  }

  _onLastPage() {
    if (this.widget.onFinal != null) {
      this.widget.onFinal();
    }
  }

  _onFirstPage() {
    if (this.widget.onStart != null) {
      this.widget.onStart();
    }
  }

  _detectLastPage() {
    int currentPage =
        _welcomeBloc.currentPage == null ? 1 : _welcomeBloc.currentPage + 1;

    if (currentPage == 1 && _welcomeBloc.currentPage == null) {
      this._onFirstPage();
    } else if (currentPage == this.widget.totalSteps) {
      this.lastPage = true;
      this._onLastPage();
    } else {
      this.lastPage = false;
    }
  }
}

class WelcomeBloc extends ChangeNotifier {
  final PageController _controller = PageController();
  int _currentPage = 0;
  bool _lastPage = false;

  bool get lastPage => _lastPage;

  set lastPage(bool value) {
    _lastPage = value;
    notifyListeners();
  }

  int get currentPage => _currentPage;

  set currentPage(int value) {
    _currentPage = value;
    notifyListeners();
  }

  PageController get controller => _controller;

  Future<void> nextPage(Duration duration, Curve curve) {
    currentPage = controller.page.floor() + 1;
    return controller.nextPage(duration: duration, curve: curve);
  }
}

第二种方法

在第二篇文章中，我删除了提供程序的内容，因为可以通过使用PageController功能在没有它的情况下完成。

import 'package:flutter/material.dart';

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  PageController controller = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            PageView(
              controller: controller,
              children: List.generate(
                10,
                (i) => Center(child: Text('Page $i')),
              ),
              onPageChanged: (page) {
                setState(() {});
              },
            ),
            Footer(
              currentPage: controller.hasClients ? controller.page.floor() : 0,
              activeColor: Colors.red,
              inactiveColor: Colors.yellow,
              totalSteps: 10,
              onTap: () async {
                await controller.nextPage(
                  duration: Duration(seconds: 1) ?? Duration(milliseconds: 500),
                  curve: Curves.easeInOut,
                );
                setState(() {});
              },
            )
          ],
        ),
      ),
    );
  }
}

class Footer extends StatelessWidget {
  final int totalSteps;
  final Color activeColor;
  final Color inactiveColor;
  final double radius;
  final double distance;
  final int currentPage;
  final GestureTapCallback onTap;

  Footer({
    this.activeColor,
    this.inactiveColor,
    this.totalSteps,
    this.radius = 10.0,
    this.distance = 4.0,
    this.currentPage,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          _makeStepper(),
          _makeNextArrow(),
        ],
      ),
    );
  }

  _makeCircle(activeColor, inactiveColor, position) {
    Color color = (position == currentPage) ? activeColor : inactiveColor;

    return Container(
      height: radius,
      width: radius,
      margin: EdgeInsets.only(left: distance, right: distance),
      decoration: BoxDecoration(
          color: color,
          border: Border.all(color: activeColor, width: 2.0),
          borderRadius: BorderRadius.circular(50.0)),
    );
  }

  _makeNextArrow() {
    return Container(
      child: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: GestureDetector(
            onTap: onTap,
            child: Icon(
              Icons.arrow_forward,
            )),
      ),
    );
  }

  _makeStepper() {
    return Container(
      child: Row(
        children: List.generate(
          totalSteps,
          (i) => _makeCircle(
            this.activeColor,
            this.inactiveColor,
            i,
          ),
        ),
      ),
    );
  }
}

Answer 3

因此，我的错误的解决方法是在didChangeDependencies挂钩中。

在构建Widget的那一刻，我试图更改上面的状态（这就是我得到的方式）。

因此，我只需要在构建小部件之前或之后运行它。

这就是代码中的样子：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:ui_flutter/screens/welcome/welcome_bloc.dart';
import 'package:flutter/scheduler.dart';

class Footer extends StatefulWidget {
  final int currentStep;
  final int totalSteps;
  final Color activeColor;
  final Color inactiveColor;
  final Duration duration;
  final Function onFinal;
  final Function onStart;

  Footer({
    this.activeColor,
    this.inactiveColor,
    this.currentStep,
    this.totalSteps,
    this.duration,
    this.onFinal,
    this.onStart,
  }) {}

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

class _FooterState extends State<Footer> {
  final double radius = 10.0;
  final double distance = 4.0;
  Container stepper;
  Container nextArrow;
  bool lastPage;
  WelcomeBloc _welcomeBloc;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    final WelcomeBloc _welcome = Provider.of<WelcomeBloc>(context);
    _welcomeBloc = _welcome;
    this._detectLastPage();
  }

  @override
  Widget build(BuildContext context) {
    this._makeStepper();
    this._makeNextArrow();

    return Container(
      alignment: Alignment.bottomCenter,
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          this.stepper,
          this.nextArrow,
        ],
      ),
    );
  }

  _makeCirle(activeColor, inactiveColor, position, currentStep) {
    currentStep = currentStep == null ? 0 : currentStep - 1;
    Color color = (position == currentStep) ? activeColor : inactiveColor;

    return Container(
      height: this.radius,
      width: this.radius,
      margin: EdgeInsets.only(left: this.distance, right: this.distance),
      decoration: BoxDecoration(
          color: color,
          border: Border.all(color: activeColor, width: 2.0),
          borderRadius: BorderRadius.circular(50.0)),
    );
  }

  _makeStepper() {
    List<Container> circles = List();

    for (var i = 0; i < widget.totalSteps; i++) {
      circles.add(
        _makeCirle(this.widget.activeColor, this.widget.inactiveColor, i,
            this.widget.currentStep),
      );
    }

    this.stepper = Container(
      child: Row(
        children: circles,
      ),
    );
  }

  _makeNextArrow() {
    this.nextArrow = Container(
      child: Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: GestureDetector(
            onTap: () {
              _welcomeBloc.controller.nextPage(
                duration: this.widget.duration ?? Duration(milliseconds: 500),
                curve: Curves.easeInOut,
              );
            },
            child: Icon(
              Icons.arrow_forward,
            )),
      ),
    );
  }

  _onLastPage() {
    if (this.widget.onFinal != null) {
      this.widget.onFinal();
    }
  }

  _onFirstPage() {
    if (this.widget.onStart != null) {
      this.widget.onStart();
    }
  }

  _detectLastPage() {
    // Here I've got inaccurate data 

    int currentPage =
        this.widget.currentStep == null ? 1 : this.widget.currentStep;

    if (currentPage == 1 && this.widget.currentStep == null) {
      this._onFirstPage();
    } else if (currentPage == this.widget.totalSteps) {
      print('lastPage detected');
      setState(() {
        this.lastPage = true;
      });
      _welcomeBloc.lastPage = true;
      this._onLastPage();
    } else {
      setState(() {
        this.lastPage = false;
      });
      _welcomeBloc.lastPage = false;
    }
  }
}

P.S .：但我在数据准确性方面还面临另一个问题。在那个钩子中，我只能使class属性比准确的落后一步。

• 详细信息：ExecutorService