apptomate_custom_expansion_tile 0.0.3

An enhanced expansion tile widget with extensive customization options for building interactive expandable content sections.

example/lib/main.dart

import 'package:apptomate_custom_expansion_tile/apptomate_custom_expansion_tile.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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom ExpansionTile')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // Basic Example
            const SizedBox(height: 16),
            const Text('Basic Example', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomExpansionTile(
              title: 'Basic Expansion Tile',
              leading: const Icon(Icons.folder),
              children: [
                ListTile(title: const Text('Item 1'), onTap: () {}),
                ListTile(title: const Text('Item 2'), onTap: () {}),
              ],
            ),

            // Advanced Example with Border and Shadow
            const SizedBox(height: 24),
            const Text('With Border & Shadow', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomExpansionTile(
              title: 'Premium Expansion Tile',
              subtitle: const Text('Tap to expand'),
              leading: const Icon(Icons.folder_special, color: Colors.blue),
              trailing: const Icon(Icons.more_vert),
              initiallyExpanded: true,
              border: Border.all(color: Colors.blue.shade200, width: 1.5),
              borderRadius: BorderRadius.circular(12),
              shadow: [
                BoxShadow(
                  color: Colors.blue.withOpacity(0.2),
                  blurRadius: 8,
                  spreadRadius: 2,
                  offset: const Offset(0, 2),
                ),
              ],
              backgroundColor: Colors.blue[50],
              collapsedBackgroundColor: Colors.blue[100],
              expandedBackgroundColor: Colors.blue[100],
              children: [
                const ListTile(
                  leading: Icon(Icons.file_copy),
                  title: Text('Document 1'),
                  subtitle: Text('PDF File'),
                ),
                const ListTile(
                  leading: Icon(Icons.file_copy),
                  title: Text('Document 2'),
                  subtitle: Text('Excel File'),
                ),
              ],
              onExpansionChanged: () => debugPrint('Expansion state changed'),
            ),

            // Compact Dense Example
            const SizedBox(height: 24),
            const Text('Compact Dense Mode', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomExpansionTile(
              title: 'Compact Settings',
              leading: const Icon(Icons.settings, size: 20),
              dense: true,
              childrenSpacing: 4,
              showDivider: false,
              children: [
                ListTile(
                  dense: true,
                  leading: const Icon(Icons.palette, size: 20),
                  title: const Text('Appearance'),
                  onTap: () {},
                ),
                ListTile(
                  dense: true,
                  leading: const Icon(Icons.notifications, size: 20),
                  title: const Text('Notifications'),
                  onTap: () {},
                ),
              ],
            ),

            // Dark Mode Example
            const SizedBox(height: 24),
            const Text('Dark Mode Style', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Theme(
              data: ThemeData.dark(),
              child: CustomExpansionTile(
                title: 'Dark Mode Tile',
                leading: const Icon(Icons.nightlight_round),
                collapsedBackgroundColor: Colors.grey[800],
                backgroundColor: Colors.grey[850],
                children: [
                  ListTile(
                    title: const Text('Dark Mode Option 1', style: TextStyle(color: Colors.white70)),
                    onTap: () {},
                  ),
                  ListTile(
                    title: const Text('Dark Mode Option 2', style: TextStyle(color: Colors.white70)),
                    onTap: () {},
                  ),
                ],
              ),
            ),

            // Disabled Example
            const SizedBox(height: 24),
            const Text('Disabled State', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            CustomExpansionTile(
              title: 'Disabled Tile',
              leading: const Icon(Icons.lock),
              enableTap: false,
              children: [
                ListTile(title: const Text('This content is not accessible'), onTap: () {}),
              ],
            ),
          ],
        ),
      ),
    );
  }
}