Блог

Я застрял. У меня есть веревочка:

 "Fa Fo Fi Fe Fy Fu Fą Fęn af of if ef yf ufnnÓm Ót Ód Ól Ók Ós Ór Óp Óc Ónn Ów Óg Ół Óz Ójn mó tó dó ló kó só ró pó bó có nónwó gó łó zó jó"
 

и я хочу выглядеть так:

 Fa Fo Fi Fe Fy Fu Fą Fę
af of if ef yf uf

Óm Ót Ód Ól Ók Ós Ór Óp Óc Ón
mó tó dó ló kó só ró pó bó có nó
 

Эту часть я выполнил в:

 _renderItem(context, Level4Item item) {
  cardKeys.putIfAbsent(item.id, () => GlobalKey<FlipCardState>());
  cardKey = cardKeys[item.id]!;
  List<String> stringList = item.text.split("n");

  stringList.forEach((e) => print(e));

  return Container(
    height: double.maxFinite,
    child: ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemCount: stringList.length,
      itemBuilder: (context, i) => Text.rich(
        TextSpan(
          text: stringList[i],
          style: TextStyle(
              color: Colors.white,
              fontSize: 42,
          ),
        ),
      ),
    ),
  );
}
 

Теперь я хочу добавить таймер, чтобы изменить цвет каждой детали через 2 секунды. Например: после запуска приложения только слово: "Fa" должно быть красным, через 2 секунды только слово: "Fo" должно быть красным, через следующие 2 секунды только слово: "Fi" должно быть красным и т.д. До слова "nó" . Как я могу это сделать?

Вам нужно добавить две части:

Первая часть состоит в том, чтобы разделить еще раз, используя символ пробела, чтобы иметь текстовый интервал для каждого слова, а не только для всей строки.

Добавьте индекс currentlyHighlightedIndex , который будет увеличиваться по таймеру.

Затем вы связываете стиль либо по умолчанию, либо красный, если currentIndex == currentlyHighlightedIndex .

Теперь вторая часть состоит в том, чтобы установить таймер, который является простым таймером. :

 int currentlyHighlightedIndex = 0;

@override
 void initState() {
    _timer = new Timer.periodic(Duration(seconds: 2), (timer) {
    currentlyHighlightedIndex  ;
  });
  super.initState();
}

@override
 void dispose() {
   _timer.cancel();
   super.dispose();
}
 

 String text =
          "Fa Fo Fi Fe Fy Fu Fą Fęn af of if ef yf ufnnÓm Ót Ód Ól Ók Ós Ór Óp Óc Ónn Ów Óg Ół Óz Ójn mó tó dó ló kó só ró pó bó có nónwó gó łó zó jó";
  
  int active = 0;

  List<String> lines = [], words = [];
  
  late Timer timer;

  @override
  void initState() {
    super.initState();
    lines = text.split('n');
    words = text.replaceAll('n','').split(" ");
    timer = Timer.periodic(Duration(seconds:2),(t){
      if(active < words.length-1){
        active  ;
        setState((){});
      }else{
        timer.cancel();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor : Colors.white,
     body: Center(
       child: Column(
         mainAxisSize : MainAxisSize.min,
         children : lines
                      .map<Widget>((s) => 
                                   Row(
                        children : s.split(' ')
                      .map<Widget>((s) => Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(s,
                            style: TextStyle(
                                color: s == words[active] ? Colors.red : Colors.black)),
                      ))
                      .toList()))
                      .toList()),
       ),
    );
  }
  
  @override
  void dispose(){
    timer.cancel();
    super.dispose();
  }