CODEWITHSUNDEEP
flutterdart
Zusaid
Zusaid

Reputation: 1

Show number of ListTile according to a condition

I want to develop an app about five books all with different number of chapters e.g

  1. Book A - 20 chapters
  2. Book B - 14 chapters
  3. Book C - 23 chapters
  4. Book D - 18 chapters
  5. Book E - 19 chapters

I have done :

the signIn page the the signUp page and the the choose book page

I want to do :

the choose chapter page

NOTE: BOTH the choose book page AND the choose chapter page USE LISTTILE

When it came to the choose chapter page i had a problem with displaying the number of ListTiles according to book type, should i create different choose chapter pages for each book (i was afraid of repetition of code) or there is a feature in Flutter that lets you show number of ListTiles according to certain condition (if its available) the condition in my case being the book type

I need a guide to whether i should :

  1. Create different choose chapter pages for each book.
  2. Use a feature in Flutter that lets you update ListTiles according to certain condition.

In the the choose book page one of the ListTile

CODE I TRIED SO FAR

ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage("assets/books/book_a.jpg"),
          ),
          title: Text(
            'Book A',
          ),
          subtitle: Text('2348033980943')
          onTap: ()
          {
            //can i define no.ofchapters here and take the value on to the next screen??
            int number_of_chapters = 20,
            Navigator.pushNamed(context, ChooseChapterScreen.id);
          },
        ),`

Upvotes: 0

Views: 1741

Answers (2)

Jay Mungara
Jay Mungara

Reputation: 7148

class Chapters{
   String title;
   List<String> chapters;

   Chapters(this.title,this.chapters);
}

              // Inside your tap method
              onTap: ()
              {
                List<String> chaptersList= ["Chapter 1", "Chapter 2", "Chapter 3"];
                // you can pass arguments with named routes
                Navigator.pushNamed
                       (context, 
                       **Your_Next_Screen**,
                       arguments: Chapters(                               
                       'Book A',                              
                       chaptersList,       
                       ),                                                                                                                 
                );
              },

Inside your build method of the Your_Next_Screen retrieve the data like,

@override
  Widget build(BuildContext context) {
    // Extract the arguments from the current ModalRoute settings and cast
    // them as Chapters.
    final Chapters args = ModalRoute.of(context).settings.arguments;

    var title= args.title;
    var list= args.chapters;

    return Scaffold(
      // your widget
    );
  }
}

Upvotes: 1

George Rappel
George Rappel

Reputation: 7207

You can use a ListView.builder()(Docs) for that. It takes some parameters, like the number of items you want to build, and a builder method to be called for each of the N elements you wish to build.

ListView.builder(
  itemCount: book.chapters.length, // Use the number of chapters here
  itemBuilder: (BuildContext context, int index) {
    // Each chapter will be a ListTile, you can add more parameters, or use whatever widget
    return ListTile(title: Text("Chapter $index"));
  }
)

Here's an example by the Flutter team.

Upvotes: 0

Related Questions