Dynamically build a Flutter PageView

Question

I need some suggestions on how to use the PageView. I have an online project that allows users to build custom forms, complete with conditions that hide or show questions depending on the answers in other questions. The mobile project allows users to fill out these forms. I've been playing with the PageView, which works for this, but I'm struggling to figure out how to indicate the end to the PageView. Right now, it will allow scrolling to continue forever.

return PageView.builder(
  controller: _controller,
  onPageChanged: (int index) {
    FocusScope.of(context).requestFocus(FocusNode());
  },
  itemBuilder: (BuildContext context, int index) {
    if (index >= _form.controls.length) {
      print("Returning null");
      return null;
    }

    return FormControlFactory.createFormControl(
        _form.controls[index], null);
  },
);

Since I'm not sure until the end of the form how many elements how do end the scrolling?

Update: In my example, I try returning null, but it still scrolls past the end.

Update: Here is where I'm currently at:

class _FormViewerControllerState extends State<FormViewerController> {
  int _currentIndex = 0;
  List<FormGroupController> _groups = List();
  List<StreamSubscription> _subscriptions = List();
  Map<int, FormControlController> _controllerMap = Map();
  bool _hasVisibilityChanges = false;

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < widget.form.controls.length; i++) {
      var control = widget.form.controls[i];
      if (control.component == ControlType.header) {
        _groups.add(FormGroupController(
            form: widget.form,
            formResponses: widget.responses,
            headerIndex: i));
      }
    }
    _controllerMap[_currentIndex] = _getControl(_currentIndex);
    _subscriptions.add(FormsEventBus()
        .on<FormControlVisibilityChanging>()
        .listen(_onControlVisibilityChanging));
    _subscriptions.add(FormsEventBus()
        .on<FormControlVisibilityChanged>()
        .listen(_onControlVisibilityChanged));
  }

  @override
  Widget build(BuildContext context) {
    print("Building pageview, current index: $_currentIndex");
    return PageView.builder(
      controller: PageController(
        initialPage: _currentIndex,
        keepPage: true,
      ),
      onPageChanged: (int index) {
        print("Page changed: $index");
        _currentIndex = index;
        FocusScope.of(context).requestFocus(FocusNode());
      },
      itemBuilder: (BuildContext context, int index) {
        print("Building $index");
        _controllerMap[index] = _getControl(index);
        return _controllerMap[index].widget;
      },
      itemCount: _groups
          .map((g) => g.visibleControls)
          .reduce((curr, next) => curr + next),
    );
  }

  @override
  void dispose() {
    _subscriptions.forEach((sub) => sub.cancel());
    _groups.forEach((g) => g.dispose());
    super.dispose();
  }

  FormControlController _getControl(int index) {
    for (var group in _groups) {
      // We want to reduce the index so it can be local to group
      if (index >= group.visibleControls) {
        index -= group.visibleControls;
        continue;
      }

      for (var instance in group.instances) {
        // We want to reduce the index so it can be local to the instance
        if (index >= instance.visibleControls) {
          index -= instance.visibleControls;
          continue;
        }

        return instance.controls.where((c) => c.visible).elementAt(index);
      }
    }

    throw StateError("Weird, the current control doesn't exist");
  }

  int _getControlIndex(FormControlController control) {
    var index = 0;
    for (var group in _groups) {
      if (control.groupInstance.group.groupId != group.groupId) {
        index += group.visibleControls;
        continue;
      }

      for (var instance in group.instances) {
        if (control.groupInstance.groupInstanceId != instance.groupInstanceId) {
          index += instance.visibleControls;
          continue;
        }

        for (var c in instance.controls.where((c) => c.visible)) {
          if (c.control.id != control.control.id) {
            index++;
            continue;
          }
          return index;
        }
      }
    }

    throw StateError("Weird, can't find the control's index");
  }

  _onControlVisibilityChanging(FormControlVisibilityChanging notification) {
    _hasVisibilityChanges = true;
  }

  _onControlVisibilityChanged(FormControlVisibilityChanged notification) {
    if (!_hasVisibilityChanges) {
      return;
    }

    setState(() {
      print("Setting state");
      var currentControl = _controllerMap[_currentIndex];
      _controllerMap.clear();
      _currentIndex = _getControlIndex(currentControl);
      _controllerMap[_currentIndex] = currentControl;
    });

    _hasVisibilityChanges = false;
  }
}

The problem now is that if the changes result in a new page before the current one, in order to stay on the same page, the page index has to change so that it stays on the current one and that part isn't working. The build method is getting called multiple times and ends up showing the original index for some reason.

Here some sample print statements that show what I mean:

flutter: Control Text Box 2 (5) visible: true
flutter: Group instance Section 2 (1) visible controls: 1 -> 2
flutter: Group 1 clearing visible controls count
flutter: Setting state
flutter: Building pageview, current index: 2
flutter: Building 1
flutter: Building 2
flutter: Building pageview, current index: 2
flutter: Building 1

So I'm on index 1 at the beginning. I choose something on that view that results in a new page being inserted before index 1, so a NEW index 1. I call set state to set the current index to 2 since that is the new index of the current view. As you can see, the build method in the widget gets called twice, the first once renders index 1 and 2 in the page view, but the next one only renders index 1 even though the initial index is set to 2.

Answer 1

Since I'm unable to run the minimal repro you've posted. I tried to replicate the behavior locally from a sample app. From my tests, returning null on itemBuilder works as expected. I'm using Flutter stable channel version 1.22.0

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

int pageViewIndex;

class _MyHomePageState extends State<MyHomePage> {
  ActionMenu actionMenu;
  final PageController pageController = PageController();
  int currentPageIndex = 0;
  int pageCount = 1;

  @override
  void initState() {
    super.initState();
    actionMenu = ActionMenu(this.addPageView, this.removePageView);
  }

  addPageView() {
    setState(() {
      pageCount++;
    });
  }

  removePageView(BuildContext context) {
    if (pageCount > 1)
      setState(() {
        pageCount--;
      });
    else
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text("Last page"),
      ));
  }

  navigateToPage(int index) {
    pageController.animateToPage(
      index,
      duration: Duration(milliseconds: 300),
      curve: Curves.ease,
    );
  }

  getCurrentPage(int page) {
    pageViewIndex = page;
  }

  createPage(int page) {
    return Container(
      child: Center(
        child: Text('Page $page'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          actionMenu,
        ],
      ),
      body: Container(
        child: PageView.builder(
          controller: pageController,
          onPageChanged: getCurrentPage,
          // itemCount: pageCount,
          itemBuilder: (context, position) {
            if (position == 5) return null;
            return createPage(position + 1);
          },
        ),
      ),
    );
  }
}

enum MenuOptions { addPageAtEnd, deletePageCurrent }
List<Widget> listPageView = List();

class ActionMenu extends StatelessWidget {
  final Function addPageView, removePageView;
  ActionMenu(this.addPageView, this.removePageView);

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<MenuOptions>(
      onSelected: (MenuOptions value) {
        switch (value) {
          case MenuOptions.addPageAtEnd:
            this.addPageView();
            break;
          case MenuOptions.deletePageCurrent:
            this.removePageView(context);
            break;
        }
      },
      itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
        PopupMenuItem<MenuOptions>(
          value: MenuOptions.addPageAtEnd,
          child: const Text('Add Page at End'),
        ),
        const PopupMenuItem<MenuOptions>(
          value: MenuOptions.deletePageCurrent,
          child: Text('Delete Current Page'),
        ),
      ],
    );
  }
}

Here how the sample app looks.