Questions tagged [hero]

38 questions
5
votes
0 answers

Flutter Hero in FutureBuilder

I am scratching my head to find an easy way to make a hero animation work when the target hero is in a FutureBuilder. I know this is not working because the hero image has to be be present on the very first frame of the second screen, which…
Mat
  • 81
  • 4
3
votes
1 answer

Flutter Hero multiple elements reverse animation starts in center

I am trying to create a hero animation with multiple elements, so far my code is as follows: main.dart: import 'package:animations/animations.dart'; import 'package:flutter/material.dart'; import 'package:flutter_playground/screen_two.dart'; import…
Ali Yucel Akgul
  • 1,101
  • 8
  • 27
  • 53
2
votes
2 answers

Why Hero doesn't work with Multiprovider?

I have a list of cards. When I tap a card, the BoxViewPage opens. If I use Hero and Multiprovider together, I get an error, but, if I use Hero and MultiProvider individually everything works correctly Why? List of Cards: return Hero( tag:…
Ricky
  • 103
  • 7
2
votes
2 answers

Is there a way to implement a SMOOTH hero animation for Image widget from BoxFit.cover to BoxFit.contain?

It's a very common UX pattern that we are experiencing everyday: Click an image in gallery, after a smooth transition, show the image in fullscreen mode and then you can zoom to view the details. But in Flutter, I found it's hard to implement such…
Ryan Hoo
  • 360
  • 7
  • 19
2
votes
1 answer

Is there a way to change animation speed?

In iOS swift I use HeroTransition library to make animations. Is there a way to change animation speed? let vc = DODViewController.init(with: project , projectType: .doodle, needToMapFolderIndex: nil) let heroId =…
isuru
  • 3,385
  • 4
  • 27
  • 62
1
vote
0 answers

Flutter Recreating the Hero Transition replacing Navigator with a custom Animator

Looking at the Flutter Hero Transition, it appears to move the tagged Widgets to an Overlay class that exists in all Navigator Widgets but sits above the main content in the stack. If this is correct, it allows the Hero to widgets to still respond…
Walrus
  • 19,801
  • 35
  • 121
  • 199
1
vote
2 answers

Hero image text not responsive on mobile phone

I'm looking for help with Hero image text. It's not responsive on mobile phone. Here is the code: /* The hero image */ .hero-image { /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to…
1
vote
0 answers

Hero image on mobile changes

I'm trying to add two new things to my hero images on the front page of https://webhost.pro/ and the hero on content pages https://webhost.pro/company/about-us/ First. On the front page Hero, I was hoping to have the mobile version slide by hand. As…
1
vote
1 answer

Issues with hero slider displaying on mobile device

Please help, i have a template that uses hero slider. The slider works fine in desktop but not on mobile. I was told to tweak the style.css file to resolve it. I have read some similar issues here but no solutions. Can anyone help with it? The…
1
vote
1 answer

Problem with responsiveness - Text in Hero-image

I Need Help. I want to create a hero-image, but I'm having trouble positioning the text. I want it to look like this: enter image description here When I do it my way, then I have a problem with RWD positioning later. Maybe it is possible to do it…
Yerba Mate
  • 113
  • 2
  • 9
1
vote
1 answer

How to achieve transition effect like this in flutter?

I tried Hero widget and page route to switch between pages like this gif. I had try with custom page route, use Stack widget to wrap two pages, and animated in buildTransitions, but it is hard to calculate scale alignment and hero widget didn't…
0
votes
0 answers

how to make a hero animation on flutter?

Tags only here, but gives the following error: "There are multiple heroes that share the same tag within a subtree." bool isRightAligned = false; bool t = false; class ProfileBottom extends StatefulWidget { final Profile profile; final int…
0
votes
0 answers

I want to create animation for my logo but it throws an error of The following assertion was thrown BoxConstraints has a negative minimum height

Hero( tag: 'login_hero', child: SizedBox( height: animation.value, //Value is going in -ve child: Image.asset('images/talkup_removebg.png'), ), …
0
votes
2 answers

Why my component doesn't show on my React page?

** This is the Navbar.jsx component which is displayed but the Hero.jsx component isnt working in the App.jsx main page for me , i have imported the Hero.jsx the same way that I have done to the navbar ** `import React from 'react' const Navbar =…
XIz
  • 1
  • 4
0
votes
0 answers

@keyframes not working properly for background images

https://stellar-selkie-0b4aa8.netlify.app/ For the above website I’m working on, the images in the hero are meant to change according to keyframes, but the problem is upon loading on some certain devices it’s crappy, and secondly, once I leave the…
1
2 3