local_hero_transform 1.0.6 copy "local_hero_transform: ^1.0.6" to clipboard
local_hero_transform: ^1.0.6 copied to clipboard

local hero transform is a Flutter package that simplifies seamless transitions between items in grid and list views using local hero animations, enhancing your app's visual appeal

LocalHeroTransform License: MIT #

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 #

Image 1 Image 2 Image 3
** 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 #

Image 1

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

150
likes
150
points
358
downloads

Publisher

unverified uploader

Weekly Downloads

local hero transform is a Flutter package that simplifies seamless transitions between items in grid and list views using local hero animations, enhancing your app's visual appeal

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_screenutil

More

Packages that depend on local_hero_transform