Question 266539 in Flutter Question posted in
The official Flutter documentation can be found here.

How to display only the last element in Flutter

I have a bookmark list and I want to display only the Last/recent bookmark Book in the UI but couldn’t figure out a way to do it so any help or suggestion would be really appreciated.

I tried bookmarkedBook.last; but still didn’t work.

  List<BookModel> bookmarkedBook = [];
  late int bookId = 1;
  @override
  void initState() {
    super.initState();
    _updateTotalBookmarks();
  }

  void _updateTotalBookmarks() {
    final bookmarkController =
        provider.Provider.of<BookmarkController>(context, listen: false);
    setState(() {
      bookmarkedBook = bookmarkController.bookinStorage
          .where((book) => bookmarkController.isBookBookmarked(book.id ?? -1))
          .toList();

      bookmarkedBook.last;
    });
  }



                    SingleChildScrollView(
                      child: provider.Consumer<BookmarkController>(
                        builder: (context, data, child) {
                          return Column(
                            children: [
                              ListView.builder(
                                physics: NeverScrollableScrollPhysics(),
                                shrinkWrap: true,
                                itemCount: bookmarkedBook.length,
                                itemBuilder: (BuildContext context, int index) {
                                  final book = bookmarkedBook[index];
                                  return GestureDetector(
                                    onTap: () {
                                    },
                                    child: Container(
                                      height: 200,
                                      width: 130, // Specify the desired width
                                      padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: [
                                          Image.asset(
                                            book.bookCoverPic ?? '',
                                            height: 150,
                                            width: 190,
                                          ),
                                        ],
                                      ),
                                    ),
                                  );
                                },
                              ),
                            ],
                          );
                        },
                      ),
                    ),
Tags:

3

Answers


  1. 0

    According to my understanding you want to just slow the last bookmark into your UI.

    In your ListView.builder you have given the itemCount as bookmarkedBook.length, so what it will do? it will populate all the bookmarks into your ListView. Now what you need to do?

    Solution:

    1- set ListView’s length as 1 (it will create only one item for listView)

    2- refactor your itemBuilder, set book in itemBuilder like this

    final book = bookmarkedBook.last;

    P.S. remove bookmarkedBook.last from your _updateTotalBookmarks() method

    Login or Signup to reply.
  2. 0

    Do you want to display just the last bookmark (one bookmark)? or do you want to display bookmarks from recent to oldest?(Question from comments)

    Case one: show only the last bookmark(only one )

    final numbers = <int>[1, 2, 3];
print(numbers.last); // 3

    Case 2: display bookmarks from recent to oldest

    • Reverse your list first

       

        var myList = [24, 56, 84, 92];
  var reversedList = new List.from(myList.reversed);
    Login or Signup to reply.
  3. 0

    you can achieve this by adding a timestamp in the BookModel, then sort by that in reverse order before you take the first.

    so your model will look like:

    class BookModel {
  int id;
  String title; 
  DateTime timestamp;

  BookModel({
    required this.id,
    required this.title, 
    required this.timestamp
  });
}

    then when adding a bookmark you’ll have to set the timestamp, something like:

    BookModel book = BookModel(
  id: 1,
  title: 'Book Title',
  timestamp: DateTime.now()
);

    and then use the timestamp to sort the bookmark list in descending order:

    bookmarkedBook.sort((a, b) => b.timestamp.compareTo(a.timestamp));

    so the first element will be the most recent like:

    BookModel mostRecent = bookmarkedBook.first;

    now you can display the most recent
    you can refer to this documentation on how you can sort lists according to the order specified by the compare function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search