5

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.

chrisdrobison
  • 1,323
  • 2
  • 13
  • 24
  • `return null` from `itemBuilder`? – pskink Dec 24 '18 at 18:29
  • Already tried that, as shown in my example above. Scrolls right past the end. – chrisdrobison Dec 24 '18 at 18:30
  • ooops, i must be blind ;-) – pskink Dec 24 '18 at 18:31
  • ok, looking at the code of `page_view.dart` it looks like `itemCount` is passed directly to `SliverChildBuilderDelegate` so you have to provide it – pskink Dec 24 '18 at 18:35
  • That's the problem, it will change throughout the life of what is being scrolled depending on the answers given. – chrisdrobison Dec 24 '18 at 18:38
  • so simply rebuild your `StatefulWidget` (which returns `PageView` from its `build()` method) with a new `itemCount` – pskink Dec 24 '18 at 18:40
  • It does not appear to work correctly for changes that add a page before the current, thus forcing you to somehow tell the pageview that it is actually on a new page index than before. – chrisdrobison Jan 03 '19 at 22:22
  • 1
    I have found some success setting the key field on the pageview. When visibility changes occur, I update the pageview key to a new key which forces a new widget to be built. But, it still does a double build for some reason if an earlier page appears. – chrisdrobison Jan 08 '19 at 02:14

1 Answers1

7

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.

demo

Omatt
  • 8,564
  • 2
  • 42
  • 144