调用 SetState() 时，如何避免带有 UniqueKey 的 Flutter FutureBuilder 闪烁？

Question

I have a PageView (parent PageView) and each of its pages is a StatefulWidget that returns FutureBuilder . The FutureBuilder itself will return a PageView (child PageView), too. Because I want both parent and child PageView to keep page, so both parent and child widget are implemented with AutomaticKeepAliveClientMixin .

Each page is assigned a UniqueKey because the pages are dynamic, meaning users can delete some pages or add pages. However when SetState() is called, there're two problems: 1 the whole page flickers; 2 the child PageView jumps back to page at index 0.

If I don't use UniqueKey , these two issues disappear. But then after adding or deleting pages, you can't refresh the pages.

Any advice are appreciated, thanks!

Codes that shows the Flickering:

void main() async {
  runApp(
    MaterialApp(
      title: 'Test',
      home: Scaffold(
        body: Bar(),
      ),
    ),
  );
}

class Bar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _BarState();
}

class _BarState extends State<Bar> {
  List<Widget> pages;

  final controller = PageController(initialPage: 0, keepPage: true);
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    pages = [
      Center(child: PageWithFutureBuilder(key: UniqueKey())),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          PageWithFutureBuilder(key: UniqueKey()),
          RaisedButton(
            onPressed: () {
              refresh();
            },
            child: new Icon(
              Icons.refresh,
              color: Colors.blue,
              size: 30.0,
            ),
          )
        ],
      ),
    ];
    return PageView(
      controller: controller,
      children: pages,
    );
  }

  void refresh() async {
    setState(() {});
  }
}

class PageWithFutureBuilder extends StatefulWidget {
  PageWithFutureBuilder({Key key}) : super(key: key);
  @override
  State<StatefulWidget> createState() => _PageWithFutureBuilderState();
}

Future test() async {
  return;
}

class _PageWithFutureBuilderState extends State<PageWithFutureBuilder> {
  Future future;
  @override
  void initState() {
    future = test();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (ocntext, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting)
          return Container(
            color: Colors.black,
            child: Center(child: CircularProgressIndicator()),
          );
        else if (snapshot.connectionState == ConnectionState.done) {
          return Center(child: Text('test text'));
        } else
          return Container();
      },
    );
  }
}

Swipe to the 2nd page, then click on the button, you'll see the flickering. As to the codes of jumping back to page at index 0 , they're too complex to put here, and it's probably the same reason with the flickering.

Answer 1

I think I've found the right solution. Basically it's caused by using a wrong Key . Using a UniqueKey makes Flutter regarding the child widget as different so it re-initialized new child widget every time it rebuilds. Hence the flickering and jumping back to page at index 0.

Instead of using a UniqueKey , use a value key. In my case each of my child parent has a unique object ID , so I use Key(objectID) as the key. So when SetState() get called, flutter will know some widgets can be reused since they have the same key, so the flickering disappears and it won't jump back to page at index 0.