local_hero icon indicating copy to clipboard operation
local_hero copied to clipboard

local_hero for GridView items

Open jimmy-robert opened this issue 4 years ago • 12 comments

Hello @letsar !

Great package as always 👍🏾 I really think this can be a game changer for many use cases.

I can't make it run with GridView items though, do you have any idea why?

Greetings from an former colleague from OAB 🙂

jimmy-robert avatar Sep 07 '20 16:09 jimmy-robert

Hi Jimmy 🙂. It's probably because of Repaint boundary. Try to set addRepaintBoundaries to false. I will look further later if it's not that.

letsar avatar Sep 07 '20 18:09 letsar

Ok, so that's because the RepaintBoundary as I said, but if your GridView is scrollable, it will not work as you expect. During the scroll, all items will change positions, so they will try to animate, resulting in an ugly user experience 😕.

letsar avatar Sep 07 '20 19:09 letsar

Indeed, I wish it worked with ListViews and GridViews, it would have been a great alternative to AnimatedList and (not existing) AnimatedGrid.

Great job though, other than in scrollable views it works like a charm. Already ⭐️ the repo.

jimmy-robert avatar Sep 08 '20 06:09 jimmy-robert

Yeah I didn't designed it to work under scrollable widgets while it could be quite interesting. I don't know how to handle that for the moment but maybe there is a solution. Thanks for the star :wink:

letsar avatar Sep 08 '20 06:09 letsar

Unfortunately that it doesn't work with ListViews and GridViews. I have an user interface where you can switch between a card layout and a list layout, and while the size does transition correctly the position is immediately changed.

Guess I'll just use a Navigator, as that also works for my use case :)

rbozan avatar Sep 12 '20 22:09 rbozan

Stick it in a custom TableGrid and it will work for you.

import 'package:flutter/material.dart';

class TableGrid extends StatelessWidget {
  /// A very simple grid without using scrollable solutions like [GridView]
  const TableGrid({
    Key key,
    this.columns = 2,
    @required this.children,
  }) : super(key: key);

  /// The number of columns to have in the width
  final int columns;

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        assert(constraints.hasBoundedWidth);
        final width = constraints.maxWidth;

        return Wrap(
          children: [
            for (var child in children)
              SizedBox(
                width: width / columns,
                child: child,
              ),
          ],
        );
      },
    );
  }
}

lukepighetti avatar Feb 28 '21 21:02 lukepighetti

@letsar Do you think this solution by @lukepighetti is similar enough in practicality to the flutter_sidekick SidekickTeamBuilder. Because that implementation is just what I would need for the project I am working on and seems local_hero might be lacking something of the sort.

Maybe you could point to an example solution or advise on whether I should fork flutter_sidekick, converting to null_safety before using in my project? Thanks

TJMusiitwa avatar Oct 18 '21 15:10 TJMusiitwa

Can anyone give me one example code that works on grid?

MarazMia avatar Dec 12 '21 18:12 MarazMia

This might be helpful to you https://gist.github.com/lukepighetti/df460db180b9f6cb3410e3cc91ed74e6

lukepighetti avatar Dec 13 '21 14:12 lukepighetti

Bumping this, I'd love to see scrollable views working with this plugin! I wanted to use it for my notes app (which would use a grid cards to show previews of the saved notes) but couldn't get this to work since I'd need a scrolling view :(

I hope you come back to give this some love soon!

TDuffinNTU avatar Jul 06 '22 19:07 TDuffinNTU

Bumping this, I'd love to see scrollable views working with this plugin! I wanted to use it for my notes app (which would use a grid cards to show previews of the saved notes) but couldn't get this to work since I'd need a scrolling view :(

I hope you come back to give this some love soon!

Did you find any working solution, I need to animate grid changes too

abdelaziz-mahdy avatar Sep 23 '22 10:09 abdelaziz-mahdy

I took a shot at patching this in. Until @letsar finds time for the PR you can use my fork and maybe supply feedback if it achieves your needs.

To use the fork directly from git put this in your pubspec.yaml:

  local_hero:
    git:
      url: https://github.com/Snonky/local_hero.git
      ref: feature/only-remount

To enable the scroll support set onlyAnimateRemount to true in your LocalHeroScope. This option supresses animations that come from position changes without tree surgery (e.g. scrolls or padding changes).

Before: local_hero_before

After: local_hero_after

Snonky avatar Oct 02 '23 12:10 Snonky