app_dropdown_picker 0.1.3

A feature-rich dropdown picker with local search, remote API support, pagination, and customizable UI.

example/lib/main.dart

import 'package:app_dropdown_picker/app_dropdown_picker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const ExampleApp());
}

/// Root application widget demonstrating [AppDropdownPicker].
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dropdown Picker Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

/// Home page showcasing local and remote dropdown pickers.
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String? _selectedCity;
  String? _selectedProduct;

  // Local data source
  final List<AppPickerItem<String>> _cities = [
    const AppPickerItem(value: 'JKT', label: 'Jakarta'),
    const AppPickerItem(value: 'BDG', label: 'Bandung'),
    const AppPickerItem(value: 'SBY', label: 'Surabaya'),
    const AppPickerItem(value: 'MLG', label: 'Malang'),
    const AppPickerItem(value: 'YOG', label: 'Yogyakarta'),
    const AppPickerItem(value: 'BAL', label: 'Bali'),
    const AppPickerItem(value: 'MDN', label: 'Medan'),
    const AppPickerItem(value: 'MKS', label: 'Makassar'),
    const AppPickerItem(value: 'PLM', label: 'Palembang'),
    const AppPickerItem(value: 'BPN', label: 'Balikpapan'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dropdown Picker'),
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          const Text(
            'Local Mode',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 8),
          AppDropdownPicker<String>(
            title: 'Select City',
            fieldHint: 'Choose a city',
            items: _cities,
            selectedValue: _selectedCity,
            onItemSelected: (item) {
              setState(() => _selectedCity = item?.value);
            },
            enableSearch: true,
            searchHint: 'Search city...',
            showCheckmark: true,
          ),
          const SizedBox(height: 8),
          Text(
            'Selected: ${_selectedCity ?? 'none'}',
            style: const TextStyle(
              fontSize: 14,
              fontStyle: FontStyle.italic,
            ),
          ),
          const SizedBox(height: 32),
          const Text(
            'Local Mode (Disabled Items)',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 8),
          AppDropdownPicker<String>(
            title: 'Select Product',
            fieldHint: 'Choose a product',
            items: [
              const AppPickerItem(value: '1', label: 'Product A'),
              const AppPickerItem(value: '2', label: 'Product B'),
              const AppPickerItem(value: '3', label: 'Product C (out of stock)',
                  enabled: false),
              const AppPickerItem(value: '4', label: 'Product D'),
            ],
            selectedValue: _selectedProduct,
            onItemSelected: (item) {
              setState(() => _selectedProduct = item?.value);
            },
            showCheckmark: true,
            onClear: () => print('Selection cleared'),
          ),
          const SizedBox(height: 8),
          Text(
            'Selected: ${_selectedProduct ?? 'none'}',
            style: const TextStyle(
              fontSize: 14,
              fontStyle: FontStyle.italic,
            ),
          ),
          const SizedBox(height: 32),
          const Text(
            'Custom Colors',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 8),
          AppDropdownPicker<String>(
            title: 'Themed Dropdown',
            items: _cities,
            onItemSelected: (item) {},
            primaryColor: Colors.teal,
            backgroundColor: Colors.teal.shade50,
            borderColor: Colors.teal.shade200,
            activeBorderColor: Colors.teal,
            selectedColor: Colors.teal,
            selectedBgColor: Colors.teal.shade100,
            headerColor: Colors.teal.shade700,
            clearButtonColor: Colors.teal.shade400,
            enableSearch: true,
          ),
        ],
      ),
    );
  }
}