I have an application like this:
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.
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.
CodePudding user response：
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!