apptomate_custom_dropdown 0.0.1

This CustomDropDown widget is a reusable, customizable dropdown widget in Flutter that allows you to create dropdown menus with enhanced styling and behavior.

apptomate_custom_button

A customizable Flutter button with a loading state, gradient background, and icons.

---

📝 Description

apptomate_custom_dropdown is a reusable, customizable dropdown widget in Flutter that allows you to create dropdown menus with enhanced styling and behavior. It extends StatelessWidget and supports various customizations, including icon, text style, shadow, and elevation.

---

🚀 Features

✅ Customizable dropdown menu options ✅ Supports dynamic data type (T) ✅ Customizable icon, border, color, and text style ✅ Allows mapping of display values ✅ Elevation and shadow customization ✅ Flexible width and height

---

📲 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_dropdown: ^0.0.1

Basic Example

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  final List<String> options = ['Option 1', 'Option 2', 'Option 3'];
  String? selectedOption;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom DropDown Example')),
      body: Center(
        child: CustomDropDown<String>(
          items: options,
          value: selectedOption,
          onChanged: (value) {
            selectedOption = value;
            print("Selected: $value");
          },
          hint: 'Choose an option',
          backgroundColor: Colors.white,
          borderColor: Colors.blue,
          borderRadius: 12.0,
          elevation: 4.0,
          shadowColor: Colors.grey,
          dropDownIcon: Icon(Icons.arrow_drop_down, color: Colors.blue),
          dropDownTextStyle: TextStyle(color: Colors.black, fontSize: 16),
          selectedDropdownTextStyle: TextStyle(color: Colors.red, fontSize: 16),
        ),
      ),
    );
  }
}

✅ With displayMapper

class Option {
  final int id;
  final String name;

  Option(this.id, this.name);
}

final List<Option> options = [
  Option(1, 'Option A'),
  Option(2, 'Option B'),
];

CustomDropDown<Option>(
  items: options,
  value: selectedOption,
  onChanged: (value) {
    setState(() {
      selectedOption = value;
    });
  },
  displayMapper: (option) => option.name,
);

🎨 Styling Example

CustomDropDown<String>(
  items: ['Item 1', 'Item 2', 'Item 3'],
  value: 'Item 1',
  onChanged: (value) {},
  backgroundColor: Colors.white,
  borderColor: Colors.blue,
  borderRadius: 16.0,
  elevation: 4.0,
  shadowColor: Colors.grey,
  dropDownIcon: Icon(Icons.arrow_drop_down, color: Colors.blue),
  dropDownTextStyle: TextStyle(fontSize: 14, color: Colors.black),
  selectedDropdownTextStyle: TextStyle(fontSize: 14, color: Colors.red),
);

---

✅ Best Practices

✔️ Use displayMapper when working with objects. ✔️ Keep onChanged non-null for proper state updates. ✔️ Ensure items list is not empty. ✔️ Keep value within the range of items to avoid errors.

---

🚀 Complete Code

CustomDropDown<String>(
  items: ['Item 1', 'Item 2', 'Item 3'],
  value: 'Item 1',
  onChanged: (value) {},
  backgroundColor: Colors.white,
  borderColor: Colors.blue,
  borderRadius: 16.0,
  elevation: 4.0,
  shadowColor: Colors.grey,
  dropDownIcon: Icon(Icons.arrow_drop_down, color: Colors.blue),
  dropDownTextStyle: TextStyle(fontSize: 14, color: Colors.black),
  selectedDropdownTextStyle: TextStyle(fontSize: 14, color: Colors.red),
);