Animated Switcher в сочетании с Streambuilder с учетом регистра

Следующий вопрос:

Мне удалось продвинуться намного дальше с моим приложением-калькулятором дозировки и процедурой управления состоянием, и теперь я пытаюсь масштабировать вещи визуально.

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

Я предполагаю, что либо использовал не того ребенка, либо что-то вроде уникального ключа отсутствует (что я не знаю, как реализовать)

Вот необходимые части моего кода:

Выпадающее меню:

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child:DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: selectedItem,
          onChanged: (String string) => setState(() {
            streamController.sink.add(string);
            return selectedItem = string;
          }),
          selectedItemBuilder: (BuildContext context) {
            return items.map<Widget>((String item) {
              return Text(item,
                //style: TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              );
            }).toList();
          },
          items: items.map((String item) {
            return DropdownMenuItem<String>(
              child: Text('$item',
                //style: TextStyle(fontWeight: FontWeight.bold),
                textAlign: TextAlign.right,
              ),
              value: item,
            );
          }).toList(),
        ),
      ),
    );
  }
}

StreamBuilder и AnimatedSwitcher:

StreamBuilder(
            stream: streamController.stream,
            builder: (context, snapshot) {
               return AnimatedSwitcher(
                   duration: Duration(seconds: 1),
                    child: updateBestandteile(snapshot.data),
               );
            },
          ),

Пример условия:

Padding updateBestandteile(String i) {
    switch (i) {

      case "MMF":
      {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            height: 200,
            decoration: BoxDecoration(
              color: b,
              borderRadius: BorderRadius.circular(10.0)
              ),
            child: Align(
              alignment: Alignment.center,
              child: Row(
                children: [
                  Column(
                    children: [
                      Text('Zu verwendende Präparate:',
                        style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('Medetomidin 1mg/ml'),
                      Text('Midazolam 5mg/ml'),
                      Text('Fentanyl 0.5mg/ml'),
                      Text('NaCl 0,9%'),
                    ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  ),
                  Column(
                    children: [
                      Text('Anzumischende Menge:',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text((MedetomidindosierungmgprokgKGW*selectedamount*selectedweight/(1000*Medetomidinmgproml)).toString()+"ml"),
                      Text((MidazolamdosierungmgprokgKGW*selectedamount*selectedweight/(1000*Midazolammgproml)).toString()+"ml"),
                      Text((FentanyldosierungmgprokgKGW*selectedamount*selectedweight/(1000*Fentanylmgproml)).toString()+"ml"),
                      Text((((MedetomidindosierungmgprokgKGW*selectedamount*selectedweight/(1000*Medetomidinmgproml))+(MidazolamdosierungmgprokgKGW*selectedamount*selectedweight/(1000*Midazolammgproml))+(FentanyldosierungmgprokgKGW*selectedamount*selectedweight/(1000*Fentanylmgproml)))*4).toString()+"ml"),
                  ],
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          ),
        ),
      ),
      );
      }
      break;

Надеюсь, вы сможете помочь, как в прошлый раз :) Заранее спасибо! Ваше здоровье, п

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
498
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема может заключаться в том, что вы не устанавливаете ключ. Если новый дочерний виджет имеет тот же тип, что и старый тип виджета, то AnimatedSwitcher НЕ будет анимировать между ними, поскольку с точки зрения фреймворка они являются одним и тем же виджетом. Установите уникальный ValueKey для каждого дочернего виджета, который вы хотите анимировать.

Пожалуйста, обратитесь к Flutter Docs для AnimatedSwitcher и ознакомьтесь с видео AnimatedSwitcher Widget of the Week от Flutter Team.

Если «новый» дочерний элемент имеет тот же тип и ключ виджета, что и «старый» дочерний элемент, но с другими параметрами, то AnimatedSwitcher не сделает переход между ними, поскольку, что касается каркаса, это один и тот же виджет, и существующий виджет можно обновить с помощью новые параметры. Чтобы принудительно выполнить переход, установите ключ на каждый дочерний виджет, который вы хотите считать уникальным (обычно ValueKey в данных виджета, который отличает этот дочерний элемент от другие).

Спасибо, это было решение! Мне просто нужно было добавить key:ValueKey(xy) к каждой опции, работает именно так, как я хотел :) Хорошего дня!

Patrick B 12.12.2020 19:57

Пожалуйста, примите и лайкните мой ответ, если он помог вам решить вашу проблему. Спасибо и вам тоже хорошего дня!!!

bluenile 12.12.2020 20:29

Другие вопросы по теме