Building a constructor to call items from the list when scrolling to other page on page view, Flutter

Question

I'm a beginner and trying to build a constructor that sets list items and getter calls them to view in page view when scrolling to next page. I have tried too many things but failed. Even though avoiding direct help to improve myself, I'm stuck and need a hand here.

import 'package:flutter/material.dart';

class Card {
  String image, name;

  Card({this.image, this.name});
}

class CardBrain {
  List<Card> _cardData = [
    Card(image: 'images/item1.jpg', name: 'item1'),
    Card(image: 'images/item2.jpg', name: 'item2'),
  ];

  String getCard() {
    return _cardData[_cardNumber].image;
  }

  String getname() {
    return _cardData[_cardNumber].name;
  }

  int _cardNumber = 0;

  void nextCard(int itemNumber) {
    if (_cardNumber == 0;){
      itemNumber++;
    }

  }
}
 
class Images extends StatefulWidget {
  @override
  _ImagesState createState() => _ImagesState();
}

class _ImagesState extends State<Images> {
  PageController pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: PageView(
        onPageChanged: cardBrain.nextStory(1),
        controller: pageController,
        children: <Widget>[
          Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[
                Image.asset(cardBrain.getCard(), fit: BoxFit.fitWidth),
                Text(cardBrain.getname(), ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

enter image description here

score 0 · Answer 1 · answered Jun 21 '20 at 12:26

First of all, you should use final to ensure that public member variables won't be changes arbitrarily. In addition, try to use const constructors as much as possible:

class Card {
  final String image;
  final String name;

  const Card({
    this.image, 
    this.name
  });
}

Consider overriding toString() which can be useful for debugging too. Use getters instead of getX() since we're not in Java (or any other language without properties). It looks better:

class CardBrain {  
  var _cardData = <Card>[
    Card(image: 'images/item1.jpg', name: 'item1'),
    Card(image: 'images/item2.jpg', name: 'item2'),
  ];

  var _cardNumber = 0;

  String get card => _cardData[_cardNumber].image;
  String get name => _cardData[_cardNumber].name;   

  void nextCard(int itemNumber) {
    if (_cardNumber == 0){
      itemNumber++;
    }
  }
}

I prefer using var and final to automatically deduce the type but it's not required. See the doc. You also have some problems in the widget:

onPageChanged: cardBrain.nextStory(1), // NO
onPageChanged: (index) => cardBrain.nextStory(1), // OK

Note that onPageChanged requires a function to be passed so you can use an anonymous function (like I did above). index is an integer. Using getters, the syntax also changes:

children: <Widget>[
  Image.asset(cardBrain.card, 
    fit: BoxFit.fitWidth
  ),
  Text(cardBrain.name),
],

Your code doesn't show what nextStory(int) does and we also don't know where cardBrain has been declared. You could initialize them like this:

class _ImagesState extends State<Images> {
  final cardBrain = CardBrain();
  final pageController = PageController();

  // other code...
}

Thanks! Helped a lot, but still not able to get to the second item screened when scrolling in page view. ''onPageChanged: (index) => cardBrain.nextStory(1),'' this supposed to be ''cardBrain.nextCard(1)'' I forgot to edit. Even after editing not getting next card screened. — omer ozmen, Jun 23 '20 at 10:22

Building a constructor to call items from the list when scrolling to other page on page view, Flutter

1 Answers1