LocalHeroTransform License: MIT

local hero transform is a powerful Flutter package designed to simplify the creation of seamless transitions between items in grid and list views. By leveraging local hero animations, this package enhances the visual appeal of your app while providing a smooth user experience.

Screen Shoots

Image 1 Image 2 Image 3
** source code here** ** ** source code here**

Platform Support

Android iOS MacOS Web Linux Windows
✔️ ✔️ ✔️ ✔️ ✔️ ✔️

✨Features

  • Easy Integration: Effortlessly integrate local hero animations in your Flutter applications with minimal setup.
  • Dynamic Page Transitions: Create engaging transitions between items in both grid and list layouts, enhancing user interaction.
  • Customizable Animation And Widgets: Control the duration and design size and position widgets of transitions to fit the overall style of your app.
  • Nested Navigation: Utilize a nested Navigator to maintain the general navigation state of your app while providing fluid page switching.
  • Responsive Design: Built with responsiveness in mind, ensuring your animations look great on all screen sizes in mobiles apps.

Installation

Add local_hero_transform to your pubspec.yaml file:

dependencies:
local_hero_transform: ^0.0.7

Usage

Example Here's a basic example of how to implement Local Hero Transform in your Flutter application:

import 'package:flutter/material.dart';
import 'package:local_hero_transform/local_hero_transform.dart';

class MyHomePage extends StatelessWidget {
final TabController _controller;

MyHomePage(this._controller);

@override
Widget build(BuildContext context) {
return LocalHero(
controller: _controller,
pages: [/* Your pages with hero tags here */],
);
}
}

⚠️ Important Notes

This package does not support full responsiveness on web and desktop platforms due to the wide variety of use cases. As such, the package cannot manage all scenarios effectively. However, it does provide the flexibility to customize any widget with the animations of your choice.

Customization

You can customize the transition duration and design size as follows:

LocalHero(
controller: _controller,
transitionDuration: Duration(milliseconds: 500),
designSize: Size(360, 640),
pages: [
/* Your pages with hero tags here */
CardGridView(),CardGridView(),
],
)
  • Customization widgets in CardOptionalParameters
CardGridView(
tagHero: index,// Unique tag for the hero animation based on the index.
textDirection: textDirection,
cardModel: HeroCardModel(
name: locations[index].name,
title: locations[index].place,
imageUrl: locations[index].imageUrl,
subTitle: locations[index].place,
),
optionalParameters:CardOptionalParameters(
onPressedFavoriteIcon: () => log('favorite'),
favoriteIconButton: ,
image: ,
name: ,
subtitle: ,
title: ,
),
);
  • Base CardListView
CardListView(
tagHero: index,// Unique tag for the hero animation based on the index.
textDirection: textDirection,
cardModel: HeroCardModel(
name: locations[index].name,
title: locations[index].place,
imageUrl: locations[index].imageUrl,
subTitle: locations[index].place,
),
optionalParameters:CardOptionalParameters(
onPressedFavoriteIcon: () => log('favorite'),
favoriteIconButton: ,
image: ,
name: ,
subtitle: ,
title: ,
),
);

Additional information

This package supports customizable UI for both web and desktop with mobile applications. You can explore its capabilities by testing the provided example here

Contributions

Contributions are welcome! If you have suggestions or improvements, feel free to open an issue or pull request.

Libraries

local_hero_transform