Функция на заказ эффект масштаба Ontap -- flutter поле с участием flutter-animation пол Связанный проблема

Flutter custom onTap scale effect


0
vote

проблема

русский

Я хотел бы создать пользовательский <код> onTap (или любой другой <код> onTap обратных вызовов, предоставленных <код> GestureDetector "индикатор", где содержимое (ребенок) Скарился и текст становится темнее, как это: Пример

Есть уже предварительный пакет для такого типа анимации? Если нет, не можете, по крайней мере, исправить фрагмент ниже.

Я попробовал создать один с помощью <код> AnimationController , <код> Transform.scale и различные комбинации <код> onTap обратных вызовов, но это довольно не отвечает (получает «застрял» все время )

Вот основной фрагмент:

 <код>  double squareScaleA = 1;   AnimationController _controllerA;   @override   void initState() {     _controllerA = AnimationController(         vsync: this,         lowerBound: 0.9,         upperBound: 1.0,         duration: Duration(milliseconds: 100));     _controllerA.addListener(() {       setState(() {         squareScaleA = _controllerA.value;       });     });     super.initState();   }    @override   Widget build(BuildContext context) {     return GestureDetector(       onTapDown: (dp) {         _controllerA.forward();       },       onTapUp: (dp) {         _controllerA.reverse();       },       child: Transform.scale(         scale: squareScaleA,         child: widget.child,       ),     );   }   
Английский оригинал

I would like to create custom onTap (or any on other onTap callbacks provided by GestureDetector "indicator" where content(child) is scaled-down and text becomes darker, like to this:example

Is there already a prebuilt package for that type of animation? If not can you at least fix snippet below.

I tried creating one using AnimationController, Transform.scale and various combinations of onTap callbacks but it's pretty unresponsive (gets 'stuck' all the time)

Here is a basic snippet:

 double squareScaleA = 1;   AnimationController _controllerA;   @override   void initState() {     _controllerA = AnimationController(         vsync: this,         lowerBound: 0.9,         upperBound: 1.0,         duration: Duration(milliseconds: 100));     _controllerA.addListener(() {       setState(() {         squareScaleA = _controllerA.value;       });     });     super.initState();   }    @override   Widget build(BuildContext context) {     return GestureDetector(       onTapDown: (dp) {         _controllerA.forward();       },       onTapUp: (dp) {         _controllerA.reverse();       },       child: Transform.scale(         scale: squareScaleA,         child: widget.child,       ),     );   } 
</div
     

Список ответов

0
 
vote

Вы можете попробовать этот паб. Вы можете изменить анимацию, как вы хотите. С Scalecoefficed вы можете настроить скорость. Если вы оберните на такой виджет, он будет выглядеть анимировано

https://pub.dev/packages/spring_button Пример;

 <код> SpringButton(           SpringButtonType.OnlyScale,           row(             "Increment",             Colors.deepPurpleAccent,           ),           onTapDown: (_) => incrementCounter(),           onLongPress: () => timer = Timer.periodic(             const Duration(milliseconds: 100),             (_) => incrementCounter(),           ),           onLongPressEnd: (_) {             timer?.cancel();           },         ),       ),   
 

You can try this pub pack. You can change the animation as you wish. With scaleCoefficient you can adjust the speed. If you wrap the So widget with it, it will look animated

https://pub.dev/packages/spring_button Example;

SpringButton(           SpringButtonType.OnlyScale,           row(             "Increment",             Colors.deepPurpleAccent,           ),           onTapDown: (_) => incrementCounter(),           onLongPress: () => timer = Timer.periodic(             const Duration(milliseconds: 100),             (_) => incrementCounter(),           ),           onLongPressEnd: (_) {             timer?.cancel();           },         ),       ), 
</div
 
 
 
 
0
 
vote

Я нашел проблему с моим кодом, анимация была «обратной», на OnTapdown вызовет <код> child для расширения (ничего не произошло с момента <код> child уже было в максимальном масштабе) Итак, я просто обратный <код> _controllerA.reverse и <код> _controllerA.forward (фактически заменил <код> _controllerA.forward с <код> _controllerA.fling ). Это окончательный код:

 <код> new0  

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

 

I found the issue with my code, the animation was "reversed", on onTapDown would cause child to expand (nothing happened since child was already at max scale), so I just reversed _controllerA.reverse and _controllerA.forward (actually replaced _controllerA.forward with _controllerA.fling). This is final code:

class OnTapScaleAndFade extends StatefulWidget {   final Widget child;   final void Function() onTap;   const OnTapScaleAndFade({Key key, this.child, this.onTap}) : super(key: key);    @override   _OnTapScaleAndFadeState createState() => _OnTapScaleAndFadeState(); }  class _OnTapScaleAndFadeState extends State<OnTapScaleAndFade>     with TickerProviderStateMixin {   double squareScaleA = 1;   AnimationController _controllerA;   @override   void initState() {     _controllerA = AnimationController(       vsync: this,       lowerBound: 0.98,       upperBound: 1.0,       value: 1,       duration: Duration(milliseconds: 10),     );     _controllerA.addListener(() {       setState(() {         squareScaleA = _controllerA.value;       });     });     super.initState();   }    @override   Widget build(BuildContext context) {     return GestureDetector(       behavior: HitTestBehavior.translucent,       onTap: () {         _controllerA.reverse();         widget.onTap();       },       onTapDown: (dp) {         _controllerA.reverse();       },       onTapUp: (dp) {         Timer(Duration(milliseconds: 150), () {           _controllerA.fling();         });       },       onTapCancel: () {         _controllerA.fling();       },       child: Transform.scale(         scale: squareScaleA,         child: widget.child,       ),     );   }    @override   void dispose() {     _controllerA.dispose();     super.dispose();   } } 

Feel free to add your custom gesture callbacks, I needed only onTap.

</div
 
 

Связанный проблема

1  Детонация - Codemagic - IOS сборки не в состоянии  ( Flutter codemagic ios build fail ) 
<Р> Я пытаюсь создать приложение для IOS сделали с флаттера. <Р> Я не имею макинтош устройства, чтобы сделать работу, так что я пытаюсь создать свой файл IPA ...

0  Flutter ListView вызывает дубликаты значений при нажатии  ( Flutter listview causing duplicates values when pressing back ) 
У меня есть две категории типа фильтрации, чтобы получить список постов, а затем перейти на страницу детализации. Я создал новый список, чтобы получить пост. ...

2  Как я решу трепетать IOS ошибки с помощью Android Studio?  ( How i solve flutter ios error using android studio ) 
Отладка сборки Установите и запустите успешно, когда я пойду на выпуску своей ошибки ниже. === Создание целевого бегуна Project Runner с выпуском конфигура...

1  Ошибка трепетания "Функция сборки возвращена null"  ( Flutter error a build function returned null ) 
Я добавил два выпадающих кнопки в моем приложении. Значения выбора 2-й кнопки зависят от 1-й кнопки и появляются формы, связанные со значением в 2-й кнопке...

0  Флаттер на родном приложении Android, сзади не работает  ( Flutter in native android app back pressed not working ) 
Я прочитал много тем, но ничего не работает и был действительно же, что мой. Я пытаюсь добавить вспышки трепетания внутри нативного проекта Android, у меня ...

1  Получить PlatformException (исключение, неизвестные входные сигналы, нуль) с трепетом Google Signin  ( Get platformexceptionexception unknown signinoption null with google signin ) 
Я пытаюсь использовать метод SigninWithGoogle из пакета AUTH. https://pub.dev/packages/auth У меня есть следующее исключение и трассировка стека. <код...

1  Другое исключение было брошено: «Пакет:»: «Пахашка / SRC / виджеты / Navigator.dart»: Неудачное утверждение: Линия 3803 POS 12: '_History.isnoTempty': не правда  ( Another exception was thrown packageflutter src widgets navigator dart fail ) 
Я использовал Persistent_bottom_nav_bar библиотека в моем приложении. Когда я использую навигатор для отображения нового экрана, а затем показать ошибки. ...

0  Импортировка внешних библиотек Android на проект трепетания  ( Importing android external libraries into a flutter project ) 
Как успешно интегрировать внешние библиотеки в проект трепетания. У меня есть внешний SDK SampleLib.aar файл, и мне нужно использовать его в моем приложении...

0  Сделайте условие, которое может индексировать наборы данных правильным образом в трепетании  ( Make a condition that can index the datasets together in a correct way in flutte ) 
У меня есть вопрос о том, когда я использую две разные наборы данных (изображения и AMP; пользователи). Набор данных изображений включает изображения продукта...

0  Обнаружение изображений лица и растительного лица трепетание Firebase ML  ( Detect face and crop face image flutter firebase ml ) 
Здесь мне нужно обрезать выявленные лица и сохранить как изображение / файл. Я могу определить лицо с закругленным прямоугольником. Как обрезать область обнар...

9  Слушать состояние ориентации на трепетании; до и после ротации  ( Listen to orientation state in flutter before after rotation ) 
<Код> OrientationBuilder сообщает об изменении ориентации после того, как произошло полное преобразование, то после этого возникает восстановление. Есть ли...

0  Как получить все поля из запроса DIO в трепетаре  ( How to get all fields from dio request in flutter ) 
Я использую Dio, чтобы получить запрос от этой API: API Пример Ответ похож на: <код> { "count": 87, "next": "https://swapi.co/api/people/?page=2", "pr...

2  Даже после обновления Thurter Doctor говорит, попробуйте повторно установить или обновлять свой Android SDK Manager  ( Even after updating flutter doctor says try re installing or updating your andro ) 
Скриншот SDK location Вот мой флатательный доктор Резюме <код> Running flutter doctor... Doctor summary (to see all details, run flutter doctor -v): [√] ...

0  Как трепетать файлы записи в iOS iPhone "Найти на моем телефоне" Папка  ( How to flutter write files to ios iphone find on my phone folder ) 
Моя цель - позволить моему приложению писать и читать файлы, созданные моим приложением. Например, напишите, а затем разрешите пользователю электронной почты ...

1  Нежелательный разрыв между элементами в списке флаттер  ( Unwanted gap between items in listview flutter ) 
У меня есть список, содержание которого динамически. ListView используется для отображения списка динамических виджетов. Заполнено listView, используя код ниж...

Связанный проблема

1  Детонация - Codemagic - IOS сборки не в состоянии 
0  Flutter ListView вызывает дубликаты значений при нажатии 
2  Как я решу трепетать IOS ошибки с помощью Android Studio? 
1  Ошибка трепетания "Функция сборки возвращена null" 
0  Флаттер на родном приложении Android, сзади не работает 
1  Получить PlatformException (исключение, неизвестные входные сигналы, нуль) с трепетом Google Signin 
1  Другое исключение было брошено: «Пакет:»: «Пахашка / SRC / виджеты / Navigator.dart»: Неудачное утверждение: Линия 3803 POS 12: '_History.isnoTempty': не правда 
0  Импортировка внешних библиотек Android на проект трепетания 
0  Сделайте условие, которое может индексировать наборы данных правильным образом в трепетании 
0  Обнаружение изображений лица и растительного лица трепетание Firebase ML 
9  Слушать состояние ориентации на трепетании; до и после ротации 
0  Как получить все поля из запроса DIO в трепетаре 
2  Даже после обновления Thurter Doctor говорит, попробуйте повторно установить или обновлять свой Android SDK Manager 
0  Как трепетать файлы записи в iOS iPhone "Найти на моем телефоне" Папка 
1  Нежелательный разрыв между элементами в списке флаттер