apptomate_custom_dropdown 0.0.3

apptomate_custom_dropdown: ^0.0.3 copied to clipboard

example/lib/main.dart

import 'package:apptomate_custom_dropdown/apptomate_custom_dropdown.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:  CustomDropDownWidget(),
    );
  }
}

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

  @override
  _DropDownExampleState createState() => _DropDownExampleState();
}

class _DropDownExampleState extends State<CustomDropDownWidget> {
  MyItem? selectedValue;
  List<MyItem> items = [
    MyItem(id: "1", name: 'Option 1'),
    MyItem(id: "2", name: 'Option 2'),
    MyItem(id: "3", name: 'Option 3'),
    MyItem(id: "4", name: 'Option 4'),
    MyItem(id: "5", name: 'Option 5'),
    MyItem(id: "6", name: 'Option 6'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom DropDown')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 300,
              child: CustomDropDown<MyItem>(
                items: items,
                value: selectedValue,
                hint: 'Select Option',
                backgroundColor: Colors.white,
                borderColor: Colors.white,
                focusedBorderColor: Colors.black,
                borderRadius: 8,
                elevation: 4,
                displayMapper: (MyItem item) => item.name,
                shadowColor: Colors.black26,
                height: 50,
                hintStyle: TextStyle(color: Colors.grey[700], fontSize: 16),
                selectedTextStyle: TextStyle(
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                ),
                dropDownTextStyle: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.normal,
                  fontSize: 16,
                ),
                padding: const EdgeInsets.symmetric(horizontal: 16),
                dropdownMaxHeight: 200,
                iconEnabledColor: Colors.blue,
                itemPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                selectedItemBackgroundColor: Color.alphaBlend(
                  Colors.blue.withAlpha(25),
                  Colors.white,
                ),
                hoverColor: Colors.grey.withAlpha(40),
                onChanged: (value) {
                  setState(() {
                    selectedValue = value;
                  });
                  print('Selected: $value');
                },
              ),
            ),
            const SizedBox(height: 20),
            Text(
              'Selected: ${selectedValue?.name ?? "None"}',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

class MyItem {
  final String id;
  final String name;

  MyItem({required this.id, required this.name});

  @override
  String toString() => name;
}