Flutter: how to make card expand to whole screen?

user_13109948 0
Viewed 1886

I have some cards in gridview. I want ontap of any card, they should expand to whole screen.

this are the cards,

HAVE TO DELETE IMAGES BECAUSE OF CONFIDENTIALITY

I want them to expand to whole screen like this,

what I have tried,

-> I have tried using OpenContainer widget,

-> custom hero animation

but they both use pageroute but I want them to do it without the page route because there is some content like appbar which would be same for both screen so I don't want them rebuild it everytime user tap on any of the card. if anyone can lead me to right direction that would be awesome

flutter-animation dart flutter
3 Answers

Take a look at this package: https://pub.dev/packages/animations

if you don't like using pageroute you can just switch your widget using StatefulWidget and Visibility.

And wrap your Card with InkWell then use the onTap / onPressed callback to set change the state so the Visibility will start work now

  1. Create a function
Widget transition(Widget _child) {
  return PageTransitionSwitcher(
    duration: const Duration(milliseconds: 800),
    transitionBuilder: (
      Widget child,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
    ) {
      return SharedAxisTransition(
        child: child,
        animation: animation,
        secondaryAnimation: secondaryAnimation,
        transitionType: SharedAxisTransitionType.horizontal,
      );
    },
    child: _child,
  );
}
  1. Add it on your scaffold:
    transition(child:condition ? widget_1 : widget_2);
user_77530910

I'm not 100% sure what you meant by expand to the whole screen, but you probably need to use the Hero() widget, wrap each widget you want to expand with a Hero() widget and give it a tag: 'spo2' for example, make a new screen for the second image, wrap each card with a Hero() and the same tag in the previous screen for the expanded card.

For further reading check out https://api.flutter.dev/flutter/widgets/Hero-class.html

user_128585070

Try using a dialogue and animating the opening.

user_133053880
Related