custom_scrollable_layout 0.0.2

A customizable Flutter widget for creating scrollable screens with fixed header, content, and footer sections.

🏆 Custom Scrollable Layout

A highly customizable Flutter layout that supports a fixed header, a scrollable content section, and a fixed footer.

---

🚀 Features

✅ Supports a fixed or scrollable header
✅ Dynamic height for all sections
✅ Footer remains fixed at the bottom
✅ Clean and responsive design

---

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  custom_scrollable_layout:0.0.1

Run the following command:

flutter pub get

---

Usage

✅ Basic Example

Use the CustomScrollableLayout widget like this:

import 'package:custom_scrollable_layout/custom_scrollable_layout.dart';

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollableLayout(
      isHeaderFixed: true,
      headerSection: Container(
        padding: const EdgeInsets.all(16),
        color: Colors.blue,
        child: const Text(
          'Fixed Header Section',
          style: TextStyle(color: Colors.white, fontSize: 24),
          textAlign: TextAlign.center,
        ),
      ),
      contentSection: Column(
        children: List.generate(
          30,
          (index) => ListTile(
            title: Text('Item $index'),
          ),
        ),
      ),
      footerSection: ElevatedButton(
        onPressed: () {},
        child: const Text('Confirm'),
      ),
    );
  }
}

---

✅ Parameters

Parameter	Type	Description	Default
headerSection	Widget?	Widget to display at the top of the screen	null
contentSection	Widget?	Scrollable widget in the middle	null
footerSection	Widget?	Widget fixed at the bottom of the screen	null
isHeaderFixed	bool	If true, header will stay fixed at the top	false

---

✅ Example with Scrollable Header

If you want the header to scroll with the content:

CustomScrollableLayout(
  isHeaderFixed: false,
  headerSection: Container(
    padding: const EdgeInsets.all(16),
    color: Colors.green,
    child: const Text(
      'Scrollable Header',
      style: TextStyle(color: Colors.white, fontSize: 20),
      textAlign: TextAlign.center,
    ),
  ),
  contentSection: Column(
    children: List.generate(
      20,
      (index) => ListTile(title: Text('Item $index')),
    ),
  ),
  footerSection: ElevatedButton(
    onPressed: () {},
    child: const Text('Submit'),
  ),
);

---

🎯 Best Practices

• Keep the header simple for better UX when isHeaderFixed = true.
• Ensure the footer is not too tall to avoid covering content.
• Use Expanded for dynamic sizing in the content section.

---

🌟 Why Use This Package?

✅ Clean and reusable layout
✅ Handles both fixed and scrollable headers
✅ Flexible and easy to integrate

---

📄 License

This project is licensed under the MIT License.

---

🙌 Contributing

Feel free to open issues and pull requests. Contributions are welcome!