1

I have a ListView.builder showing a list, when i click on an item it shows details of that item on the next page (FlashcardDetailsPage).

I'd like to show the next list item when i tap the IconButton in the class FlashcardDetailsPage. So i'd like this button to skip to the next list item. Any ideas?

class FlashcardListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: allFlashcards.length,
        itemBuilder: (context, int index) {
          return ListTile(
            title: Text(allFlashcards[index].actReg),
            subtitle: Text(allFlashcards[index].question),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => FlashcardDetailPage(
                      flashcardToShow: allFlashcards[index]),
                ),
              );
            },
          );
        });
  }
}

class FlashcardDetailPage extends StatefulWidget {
  final Flashcard flashcardToShow;

  FlashcardDetailPage({Key key, @required this.flashcardToShow})
      : super(key: key);

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

class _FlashcardDetailPageState extends State<FlashcardDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(242, 242, 242, 1),
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.flashcardToShow.actReg),
      ),
      body: Column(
        children: <Widget>[
          Container(
            child: Card(
                margin: EdgeInsetsDirectional.fromSTEB(20, 20, 20, 0),
                child: Center(
                  child: Text(
                    widget.flashcardToShow.question,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 30),
                  ),
                )),
          ),
          Container(
            height: 100.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.skip_next),
                  iconSize: 32.0,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

2 Answers 2

1

You could just replace the screen with another one showing the next card:

IconButton(
  icon: Icon(Icons.skip_next),
  iconSiz: 32,
  onTap: () {
    int currentIndex = allFlashcards.indexOf(widget.flashcardToShow);
    if (currentIndex >= allFlashcards.length) return;

    var nextFlashcard = allFlashcards[currentIndex + 1];
    Navigator.of(context).pushReplacement(MaterialPageRoute(
      builder: (ctx) => FlashDetailsPage(flashcardToShow: nextFlashcard)
    ));
  },
)
1
  • Thanks mate that put me on the right track! I didn't want to keep opening new pages, but i used the same logic you had above to run a method, i'll post it below. Cheers!
    – Chris
    Mar 21, 2019 at 20:36
1

Thanks Marcel for the direction! I used your logic for a method. To avoid opening a new page every time I pressed the button, i did this & it's working:

void _skipFlashcard () {
    setState(() {
      int currentIndex = allFlashcards.indexOf(widget.flashcardToShow);
      var nextFlashcard = allFlashcards[currentIndex + 1];
      widget.flashcardToShow = nextFlashcard;
    });
  }

IconButton(
                  icon: Icon(Icons.skip_next),
                  iconSize: 32.0,
                  onPressed: _skipFlashcard,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.