J'ai traversé de nombreux tutoriels et je ne peux pas basculer entre deux couleurs en vérifiant si l'index est pair ou impair.
Voici mon code: P>
class PageTwoState extends State<PageTwo> {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemExtent: 250.0,
itemBuilder: (context, index) => Container(
padding: EdgeInsets.all(10.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(5.0),
color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
child: Center(
child: Text(index.toString()),
),
),
),
);
}
}
3 Réponses :
Si vous voulez générer des couleurs aléatoires, utilisez ceci:
Si vous connaissez le nombre d'éléments de la liste, vous pouvez avoir une liste des couleurs que vous souhaitez: < Pré> xxx Importer 'dart: math'; Couleur: Colors.Primaires [Aléatoire ( ) .nextint (couleurs.Primaires.length)],
Hey @hardik Kumar, en fait, je ne suis pas sûr du nombre d'éléments de ma liste, parfois cela dépasse plus de centaines et parfois seulement 2-3 éléments.
@Praveengupta Vous pouvez mettre un module de l'index pour obtenir la couleur des couleurs telles que ceci: couleurs [index% 5] qui devrait résoudre votre problème
J'ai édité mon code pour générer des couleurs aléatoires. Vous pouvez vérifier maintenant
Ce qui suit est un exemple qui utilise Colortween code> pour créer un gradient avec des couleurs de début et de fin cohérentes. class PageTwoState extends State<PageTwo> {
ColorTween color = ColorTween(begin: Colors.amberAccent, end: Colors.orangeAccent);
@override
Widget build(BuildContext context) {
int listLen = 15; //Input the length of the list you retrieve from firebase here
//The gradient will adjust for variations in length by itself as your database changes.
return ListView.builder(
itemCount: listLen,
itemExtent: 250.0,
itemBuilder: (context, index) => Container(
padding: EdgeInsets.all(10.0),
child: Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(5.0),
color: color.lerp(index/(listLen-1)),
child: Center(
child: Text(index.toString()),
),
),
),
);
}
}
Une option serait de générer des couleurs aléatoires et de les enregistrer dans une liste pour vérifier si elles sont déjà utilisées par l'un de vos éléments. Voici une façon de le faire:
List<Color> _alreadyUsedColors = [];
Color _randomColor() {
Color newColor = Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
while (_alreadyUsedColors.contains(newColor))
newColor = Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0);
_alreadyUsedColors.add(newColor);
return newColor;
}
// Then use it like this in your widget
Material(
elevation: 4.0,
borderRadius: BorderRadius.circular(5.0),
color: _randomColor(),
child: Center(child: Text(index.toString())),
)
Comment vouloir avoir la couleur? Voulez-vous qu'il soit aléatoire ou une sorte de gradient? Comment vous attendez-vous à calculer une couleur d'un index?
Ya une sorte de gradient.
Je veux le calculer par l'index. Dois-je définir une sorte de tableau?
Cela dépend vraiment de votre application. Vous pouvez prédéfinir un tableau si vous connaissez le nombre d'éléments à l'avance ou vous pouvez utiliser un
Colortween pour créer de manière dynamique un gradient avec une liste de longueur variable.Ok je vais lire Colortween, non je ne connais pas le nombre d'éléments.
En supposant que vous sachiez quelles couleurs le début et la fin du
listview devrait être, cela devrait être une bonne application deColortween .Si ce ne serait pas compliqué, pouvez-vous partager un petit extrait de code sinon je vais passer à travers.
Ouais je pouvais. Pourriez-vous me fournir une couleur initiale et finale? Est-ce une liste infinie?
Amberaccent à OrangeEccent.
Laissez-nous Continuez cette discussion dans le chat .