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.

example/lib/main.dart

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

void main() {
  runApp(
    //const MyApp(),
    DevicePreview(
      builder: (context) => const MyApp(),
      enabled: !kReleaseMode,
    ),
  );
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeView(),
    );
  }
}

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

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

class _HomeViewState extends State<HomeView> {
  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, // Adjust itemCount based on your data
              itemBuilder: (context, index) {
                return FlexibleAnimatedContainer(
                  pictureDescribeText: Text(
                    'Item $index',
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: Colors.amber,
                      fontSize: 20,
                    ),
                  ),
                  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',
                  ),
                  isExpanded: expandedIndex == index,
                  onTap: () {
                    setState(
                      () {
                        expandedIndex = expandedIndex == index ? null : index;
                      },
                    );
                  },
                  onDoubleTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) {
                      return const SeconedView();
                    }));
                  },
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AppBar(
        title: const Text('AppBar'),
      ),
    );
  }
}