LocalHeroTransform

local hero transform is A Flutter package for creating seamless hero transitions between grid and list views with enhanced customization and performance for optimize user experience .

ScreenShots

** source code here**	**	** source code here**

Platform Support

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

✨Features

• Seamless Transitions: Beautiful hero animations between grid and list views
• Highly Customizable: Full control over card content and styling
• Responsive Design: Works on all screen sizes and devices
• Performance Optimized: Smooth animations even with many items
• Flexible API: Adapts to various use cases and designs

Installation

Add local_hero_transform to your pubspec.yaml file:

dependencies:
local_hero_transform: ^1.0.6

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 tabController;
final  List<DateModel> itemsMode;// Your model

MyHomePage({required this.tabController,required this.itemsMode});

@override
Widget build(BuildContext context) {
return  LocalHeroViews(
      tabController: tabController,
      textDirection: TextDirection.ltr,
      itemCount: itemsMode.length,
      itemsModel:(index) => ItemsModel(
      name: Text(itemsMode[index].name),
      title: Text(itemsMode[index].title),
      subTitle: Text(itemsMode[index].subTitle),
      favoriteIconButton: IconButton(onPressed: () {}, icon: Icon(Icons.add)),
      subTitleIcon: const Icon(Icons.location_on_outlined, color: Color(0xFF95979A), size: 10),
      image:  DecorationImage(image: NetworkImage(itemsMode[index].imageUri)),
     ),
   );
  }
 }

Card Loading, Themes, and Image Loading

isLoading

The isLoading property in CardStyleMode determines whether the card should display a loading shimmer effect instead of its normal content. This is useful for indicating loading states while data is being fetched.

Example:

ItemsModel(
  // ... other properties ...
  cardStyleMode: CardStyleMode(
    isLoading: true, // Show shimmer loading effect
  ),
  // ...
)

isDarkMode

The isDarkMode property in CardStyleMode switches the card's appearance between dark and light themes. It affects background, shimmer, and item colors for better visibility and style consistency.

Example:

ItemsModel(
  // ... other properties ...
  cardStyleMode: CardStyleMode(
    isDarkMode: true, // Use dark theme colors for the card
  ),
  // ...
)

You can dynamically set this based on your app's theme:

final isDarkMode = Theme.of(context).brightness == Brightness.dark;
ItemsModel(
  // ...
  cardStyleMode: CardStyleMode(isDarkMode: isDarkMode),
  // ...
)

loadingImageBuilder

The loadingImageBuilder property in ItemsModel allows you to customize the widget shown while the card's image is loading. This is especially useful for showing shimmer or placeholder widgets.

Example:

ItemsModel(
  // ... other properties ...
  loadingImageBuilder: (context, child, loadingProgress) {
    return CustomShimmer(isDark: true); // Show shimmer while loading image
  },
  // ...
)

Full Example:

ItemsModel(
  name: Text('Location Name'),
  title: Text('Place'),
  subTitle: Text('Subtitle'),
  image: DecorationImage(image: NetworkImage('https://example.com/image.png')),
  favoriteIconButton: Icon(Icons.favorite_border),
  cardStyleMode: CardStyleMode(
    isLoading: false, // Set true to show shimmer
    isDarkMode: Theme.of(context).brightness == Brightness.dark,
  ),
  loadingImageBuilder: (context, child, loadingProgress) {
    return CustomShimmer(isDark: Theme.of(context).brightness == Brightness.dark);
  },
)

Customization

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

LocalHeroViews(
tabController: _controller,
transitionDuration: Duration(milliseconds: 500),
designSize: Size(360, 640),
 itemCount: itemsMode.length,
itemsModel:(index) => ItemsModel(
name: Text(itemsMode[index].name),
title: Text(itemsMode[index].title),
subTitle: Text(itemsMode[index].subTitle),
favoriteIconButton: IconButton(onPressed: () {}, icon: Icon(Icons.add)),
subTitleIcon: const Icon(Icons.location_on_outlined, color: Color(0xFF95979A), size: 10),
image: DecorationImage(image: NetworkImage(itemsMode[index].imageUri)),
),
)

🎨 Advanced Customization

see example code here

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository

Create your feature branch (git checkout -b feature/AmazingFeature)

Commit your changes (git commit -m 'Add some AmazingFeature')

Push to the branch (git push origin feature/AmazingFeature)

Open a Pull Request