CODEWITHSUNDEEP
flutter
Chris
Chris

Reputation: 175

onTap go to next list item (Flutter)

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,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 1

Views: 3318

Answers (2)

Chris
Chris

Reputation: 175

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,

Upvotes: 1

Marcel
Marcel

Reputation: 9569

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)
    ));
  },
)

Upvotes: 1

Related Questions