Search code examples
flutterdartflutter-pageview

Flutter pageview, add new elements at runtime


In my project I have a Pageview which contains widgets from a list. In runtime I add more elements to this list to show it in the Pageview. If I don't specify itemCounter than I can run out of index but I can see the new pages, however, if use itemCounter, the new page will not appear. For the itemCounter I use the length of my list. How can I add new elements runtime to a pageview?

In this case I can add new elements, but I can run out of index:

child: PageView.builder(
          controller: pageController,
          //itemCount: _dummy.length,
          itemBuilder: (context, position) {
            return _dummy[position];
          },
        ),
      ),

This is case the new pages doesn't even show up. It's like the itemCounter doesn't change.

child: PageView.builder(
          controller: pageController,
          itemCount: _dummy.length,
          itemBuilder: (context, position) {
            return _dummy[position];
          },
        ),
      ),

Solution

  • in this widget, when you clickfab it will create another page in PageView.

    import 'package:flutter/material.dart';
    
    class PageViewOnRuntime extends StatefulWidget {
      PageViewOnRuntime({Key? key}) : super(key: key);
    
      @override
      _PageViewOnRuntimeState createState() => _PageViewOnRuntimeState();
    }
    
    class _PageViewOnRuntimeState extends State<PageViewOnRuntime> {
      final PageController pageController = PageController();
    
      int numberOfPage = 2;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: PageView.builder(
            controller: pageController,
            itemCount: numberOfPage,
            itemBuilder: (context, index) {
              return Container(
                color: index % 2 == 0 ? Colors.cyanAccent : Colors.blueGrey,
                alignment: Alignment.center,
                child: Text(index.toString()),
              );
            },
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                numberOfPage++;
              });
            },
            child: Icon(Icons.add),
          ),
        );
      }
    }
    
    

    let me know , if you need something else .