flexible_animated_container 0.0.5

A Flutter package that provides a flexible and animated container widget. This widget supports expansion and collapse with smooth animations and allows you to display text and images inside it.

Easy to use only call widget name

Features

Animated container supports expansion and collapse with smooth animations and allows you to display text and images inside it.

Demo Video

Watch the demo video to see the package in action:

Watch the demo video

Getting started

• In the pubspec.yaml of your flutter project, add the following dependency:

  dependencies:
    flexible_animated_container: ^0.0.5
  

• In your library add the following import:

  import 'package:flexible_animated_container/flexible_animated_container.dart';
  

Usage

Easy to use only call widget name

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const HomeView(),
    );
  }
}

class HomeView extends StatefulWidget {
  const HomeView({super.key});

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  // Keeps track of which item is currently expanded.
  int? expandedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 200,
          width: double.infinity,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (context, index) {
                return FlexibleAnimatedContainer(
                  pictureDescribeText: Text(
                    'Item $index',
                    // Adds ellipsis if the text overflows.
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: Colors.amber,
                      fontSize: 20,
                    ),
                  ),

                  // In this example we use NetworkImage
                  imageProvider: const NetworkImage(
                    'https://img.freepik.com/free-photo/representation-user-experience-interface-design-smartphone_23-2150165977.jpg?t=st=1722952880~exp=1722956480~hmac=e9c5cdd7e4f91dbc6e0f1bcec2c3f2d2c7e29dbdd17957fd7a7384e01fa20759&w=900', // URL for the image (placeholder).
                  ),

                  // Determines if the container is expanded.
                  isExpanded: expandedIndex == index,
                  onTap: () {
                    setState(
                      () {
                        // Toggles the expansion of the container when tapped.
                        expandedIndex = expandedIndex == index ? null : index;
                      },
                    );
                  },
                  onDoubleTap: () {
                    // Navigates to SeconedView when the container is double-tapped.
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) {
                      return const SeconedView();
                    }));
                  },
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Seconed view'), // Title of the AppBar.
      ),
      body: const Center(
        child: Text(
          'Content of the second view', // Placeholder text for the second view.
          style: TextStyle(fontSize: 24), // Style of the placeholder text.
        ),
      ),
    );
  }
}

Important

• You can use onDoubleTap to make any actions you do as onTap is used to expand and collapse container.

Thanks

• Thank you for using the package ❤❤
• Created by Seif Eldin Hatem Mahmoud ❤