animated_folder

Description:

animated folder

Package Description #
This package provides an "AnimationFolder" widget, which represents a folder with animated sheets that expand when tapped or hovered over. It offers an intuitive way to display content within a folder with interactive animations, enhancing user experience.
Features #
-Animated folder with expanding sheets
-Interactive animations triggered by tap or hover
(on web, the default is AnimationBy.hover,on mobile, the default is AnimationBy.tap)

Optional animationBy parameter to specify the animation trigger method (default is depending on the platform).
-Customizable duration, size, color for animations


Getting Started #
To start using this package, you need to have Flutter installed. Then, you can simply add the package to your pubspec.yaml file:
dependencies:
animation_folder: ^x.x.x # Replace with the latest version
copied to clipboard
For more detailed instructions on installation and usage, check out the animation_folder package on pub.dev.
Usage #
Here's a simple example of how to use the AnimationFolder widget:
import 'package:animated_folder/animated_folder.dart';
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: AnimatedFolder(
width: 300,
/// without animationBy, the default is depend on platform
/// on web, the default is AnimationBy.hover
/// on mobile, the default is AnimationBy.tap
animationBy: AnimationBy.tap,
/// without animationDuration, the default is 300ms
duration: const Duration(milliseconds: 500),
/// without mainColor, the default is Color(0xFF56AAF3)
mainColor: Colors.red,
/// without folderColor, the default is [Color(0xFFE8E9EC), Color(0xFFD9D9D9), Color(0xFFBFBFBF), mainColor]
/// the length of folderColor must be 4 or null
folderSheetColors: const [
Colors.red,
Colors.green,
Colors.blue,
Colors.yellow,
],
/// it will be placed on the front of the folder
child: const Center(
child: Text('Hello World'),
)
),
),
);
}
}
copied to clipboard