Creating a different count for each 10 items in the list used for Dart Flutter carouselSlider

user_18003111 0
Viewed 185

I have an application like this:

enter image description here

enter image description here

enter image description here

The purpose of the application is to show the spelling of the numbers in the list. Numbers and their spelling are in a list. List:

  List<wordAndMeaning> wordsList = [
    wordAndMeaning("1", "One", false),
    wordAndMeaning("2", "Two", false),
    wordAndMeaning("3", "Three", false),
    wordAndMeaning("4", "Four", false),
    wordAndMeaning("5", "Five", false),
    wordAndMeaning("6", "Six", false),
    wordAndMeaning("7", "Seven", false),
    wordAndMeaning("8", "Eight", false),
    wordAndMeaning("9", "Nine", false),
    wordAndMeaning("10", "Ten", false),
    wordAndMeaning("11", "Eleven", false),
    wordAndMeaning("12", "Twelve", false),
    wordAndMeaning("13", "Thirteen", false),
    wordAndMeaning("14", "Fourteen", false),
    wordAndMeaning("15", "Fifteen", false),
    wordAndMeaning("16", "Sixteen", false),
    wordAndMeaning("17", "Seventeen", false),
    wordAndMeaning("18", "Eighteen", false),
    wordAndMeaning("19", "Nineteen", false),
    wordAndMeaning("20", "Twenty", false),

For each list item, that is, for each number, there is 1 scrolling screen. The number 1 on the first screen, the number 2 on the second screen, the number 3 on the third screen, and so on, up to 20. I took the screen of the first 3 numbers as a photo.

enter image description here

Let's get to the real problem. I want to make the system of showing the spelling of this number from 1 to 20. As such, there will be 30 scrolling screens. This will be very inefficient and there will be too many scrolling screens.

As a solution to this problem, I thought of showing 5 numbers on each page. In other words, there will be a total of 4 scrolling screens and it will show the writing of 5 numbers on each page. For example, the first screen will look like this:

1: One

2: Two

3: Three

4: Four

5: Five

Of course, these numbers will appear as a list and each number will have an eye icon. I want the list to show the spelling of the 3rd number when I press the eye icon of the 3rd number.

How can I do this system I described?

Here is my code that creates a custom scrolling screen for each number:

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:getwidget/getwidget.dart';

class sayilarLearn_1 extends StatefulWidget {
  @override
  State<sayilarLearn_1> createState() => _sayilarLearn_1State();
}

class _sayilarLearn_1State extends State<sayilarLearn_1> {
  final CarouselController _controller = CarouselController();
  List<wordAndMeaning> wordsList = [
    wordAndMeaning("1", "One", false),
    wordAndMeaning("2", "Two", false),
    wordAndMeaning("3", "Three", false),
    wordAndMeaning("4", "Four", false),
    wordAndMeaning("5", "Five", false),
    wordAndMeaning("6", "Six", false),
    wordAndMeaning("7", "Seven", false),
    wordAndMeaning("8", "Eight", false),
    wordAndMeaning("9", "Nine", false),
    wordAndMeaning("10", "Ten", false),
    wordAndMeaning("11", "Eleven", false),
    wordAndMeaning("12", "Twelve", false),
    wordAndMeaning("13", "Thirteen", false),
    wordAndMeaning("14", "Fourteen", false),
    wordAndMeaning("15", "Fifteen", false),
    wordAndMeaning("16", "Sixteen", false),
    wordAndMeaning("17", "Seventeen", false),
    wordAndMeaning("18", "Eighteen", false),
    wordAndMeaning("19", "Nineteen", false),
    wordAndMeaning("20", "Twenty", false),

  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber[500],
        bottomOpacity: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text("Numbers", style: TextStyle(fontSize: 25),),
      ),
      backgroundColor: Colors.amber,
      body: Builder(builder: (context) {
        final double height = MediaQuery.of(context).size.height - 160;
        return Column(
          children: [
            CarouselSlider(
              carouselController: _controller,
              options: CarouselOptions(
                height: height,
                viewportFraction: 1.0,
                enlargeCenterPage: true,
              ),
              items: wordsList.map((wordAndMeaning word) { // <<<<<<<<<!!!!!
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(color: Colors.amber),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Expanded(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                
                                if (word.showMeaning) ...[
                                  Text(word.meaning,
                                      style: TextStyle(
                                          fontSize: 35, color: Colors.white)),
                                
                                Text(word.word,
                                    style:
                                        TextStyle(fontSize: 20, color: Colors.white)),
                                ],                          
                                if (!word.showMeaning) ...[
                                  Text(word.word,
                                      style: TextStyle(
                                          fontSize: 35, color: Colors.white)),
                                ],
                              ],
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          IconButton(
                            icon: Icon(Icons.remove_red_eye_sharp),
                            color: Colors.white,
                            iconSize: 25,
                            onPressed: () {
                              setState(() {
                                word.showMeaning = !word.showMeaning;
                              });
                            },
                          ),
                        ],
                      ),
                    );
                  },
                );
              }).toList(),
            ),
            Container(
              padding: EdgeInsets.all(5),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20)),
                  
              ),
              child: Column(
                children: [
                  
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          
                        ),
                        width: 55,
                        height: 55,
                        child: RaisedButton(
                          color: Colors.blue,
                          child: Icon(Icons.arrow_back_ios, size: 30, color: Colors.white,),
                          onPressed: () {
                            _controller.previousPage(
                                duration: const Duration(milliseconds: 100),
                                curve: Curves.easeInCirc,
                            );
                          },
                          // köşeyi yuvarlaştırma:
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                          
                        )
                        
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        width: 55,
                        height: 55,
                        child: Container(
                          child: RaisedButton(
                          color: Colors.blue,
                          child: Icon(Icons.arrow_forward_ios, size: 30, color: Colors.white,),
                          onPressed: () {
                            _controller.nextPage(
                                duration: const Duration(milliseconds: 100),
                                curve: Curves.easeInCirc,
                            );
                          },
                          // köşeyi yuvarlaştırma:
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                          
                        )
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        );
        
      }),
    );
  }
}

Thanks in advance for the help.

dart flutter android
1 Answers

One way to do this is by creating a new widget that can act as a list.

For example:

class WordAndMeaningColumn extends StatelessWidget {
  const WordAndMeaningColumn({
    Key? key,
    required this.wordAndMeanings,
  }): super(key: key);

  final List<WordAndMeaning> wordAndMeanings;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: wordAndMeanings.map((data) {
        return Expanded(
          child: WordAndMeaning(
            word: data.word,
            meaning: data.meaning,
          ),
        );
      }).toList(),
    );
  }
}

class WordAndMeaning extends StatefulWidget {
  const WordAndMeaning({
    Key? key,
    required this.word,
    required this.meaning,
  }): super(key: key);

  final String word;
  final String meaning;
   
  @override
  State<StatefulWidget> createState() => _WordAndMeaningState();
}

class _WordAndMeaningState extends State<WordAndMeaning> {

  bool showMeaning = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(widget.word),
      subtitle: Visibility(
        visible: showMeaning,
        child: Text(widget.meaning),
      ),
      trailing: IconButton(
        icon: const Icon(Icons.remove_red_eye_sharp),
        color: Colors.white,
        iconSize: 25,
        onPressed: () {
          setState(() {
            showMeaning = !showMeaning;
          });
        },
      ),
    );
  }

}


class SayilarLearn1 extends StatefulWidget {
  const SayilarLearn1({Key? key}): super(key: key);

  @override
  State<StatefulWidget> createState() => _SayilarLearn1State();
}

class _SayilarLearn1State extends State<SayilarLearn1> {
  
  final CarouselController _controller = CarouselController();

  final List<WordAndMeaningColumn> wordsList = const [
    WordAndMeaningColumn(
      wordAndMeanings: [
        WordAndMeaning(word: 'One', meaning: '1'),
        WordAndMeaning(word: 'Two', meaning: '2'),
        WordAndMeaning(word: 'Three', meaning: '3'),
        WordAndMeaning(word: 'Four', meaning: '4'),
        WordAndMeaning(word: 'Five', meaning: '5'),
      ],
    ),
    WordAndMeaningColumn(
      wordAndMeanings: [
        WordAndMeaning(word: 'Six', meaning: '6'),
        WordAndMeaning(word: 'Seven', meaning: '7'),
        WordAndMeaning(word: 'Eight', meaning: '8'),
        WordAndMeaning(word: 'Nine', meaning: '9'),
        WordAndMeaning(word: 'Ten', meaning: '10'),
      ],
    ),
    WordAndMeaningColumn(
      wordAndMeanings: [
        WordAndMeaning(word: 'Eleven', meaning: '11'),
        WordAndMeaning(word: 'Twelve', meaning: '12'),
        WordAndMeaning(word: 'Thirteen', meaning: '13'),
        WordAndMeaning(word: 'Fourteen', meaning: '14'),
        WordAndMeaning(word: 'Fifteen', meaning: '15'),
      ],
    ),
    WordAndMeaningColumn(
      wordAndMeanings: [
        WordAndMeaning(word: 'Sixteen', meaning: '16'),
        WordAndMeaning(word: 'Seventeen', meaning: '17'),
        WordAndMeaning(word: 'Eighteen', meaning: '18'),
        WordAndMeaning(word: 'Nineteen', meaning: '19'),
        WordAndMeaning(word: 'Twenty', meaning: '20'),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber[500],
        bottomOpacity: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: const Text('Numbers', style: TextStyle(fontSize: 25),),
      ),
      backgroundColor: Colors.amber,
      body: Column(
        children: [
          Expanded(
            child: CarouselSlider.builder(
              carouselController: _controller,
              itemCount: wordsList.length,
              options: CarouselOptions(
                viewportFraction: 1,
                enlargeCenterPage: true,
              ),
              itemBuilder: (context, itemIndex, pageViewIndex) {
                return wordsList[itemIndex];
              },
            ),
          ),

          Container(
            padding: const EdgeInsets.all(5),
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      width: 55,
                      height: 55,
                      child: ElevatedButton(
                        onPressed: () {
                          _controller.previousPage(
                            duration: const Duration(milliseconds: 100),
                            curve: Curves.easeInCirc,
                          );
                        },
                        style: ElevatedButton.styleFrom(
                          primary: Colors.blue,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                        ),
                        child: const Icon(
                          Icons.arrow_back_ios,
                          size: 30,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    const SizedBox(width: 10),
                    const SizedBox(width: 10,),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      width: 55,
                      height: 55,
                      child: ElevatedButton(
                        onPressed: () {
                          _controller.nextPage(
                            duration: const Duration(milliseconds: 100),
                            curve: Curves.easeInCirc,
                          );
                        },
                        style: ElevatedButton.styleFrom(
                          primary: Colors.blue,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                        ),
                        child: const Icon(
                          Icons.arrow_forward_ios,
                          size: 30,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

I refactored some of your code to simplify some things. Hopefully this will point you in the right direction!

user_130890960
Related