🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / Searchable Dropdown Aranabilir Combobox kullanımı

1-) FLUTTER - Searchable Dropdown Aranabilir Combobox kullanımı

 

 

 

kaynak : https://pub.dev/packages/dropdown_button2

 

flutter pub add dropdown_button2

 

 

 

 

 

 

 

final List<String> items = [

  'A_Item1',

  'A_Item2',

  'A_Item3',

  'A_Item4',

  'B_Item1',

  'B_Item2',

  'B_Item3',

  'B_Item4',

];

 

String? selectedValue;

final TextEditingController textEditingController = TextEditingController();

 

@override

void dispose() {

  textEditingController.dispose();

  super.dispose();

}

 

String getTurkish(String text) {
 text = text.toLowerCase().replaceAll(
"i̇", "i"); // buradaki iki i farklıdır

  text = text.replaceAll("ç", "c");
  text = text.replaceAll(
"ğ", "g");
  text = text.replaceAll(
"ı", "i");
  text = text.replaceAll(
"ö", "o");
  text = text.replaceAll(
"ş", "s");
  text = text.replaceAll(
"ü", "u");
  
return text;
}

 

@override

Widget build(BuildContext context) {

  return Scaffold(

    body: Center(

      child: DropdownButtonHideUnderline(

        child: DropdownButton2(

          isExpanded: true,

          hint: Text(

            'Select Item',

            style: TextStyle(

              fontSize: 14,

              color: Theme.of(context).hintColor,

            ),

          ),

          items: items

                  .map((item) => DropdownMenuItem<String>(

            value: item,

            child: Text(

              item,

              style: const TextStyle(

                fontSize: 14,

              ),

            ),

          ))

                  .toList(),

          value: selectedValue,

          onChanged: (value) {

            setState(() {

              selectedValue = value as String;

            });

          },

          buttonHeight: 40,

          buttonWidth: 200,

          itemHeight: 40,

          dropdownMaxHeight: 200,

          searchController: textEditingController,

          searchInnerWidget: Padding(

            padding: const EdgeInsets.only(

              top: 8,

              bottom: 4,

              right: 8,

              left: 8,

            ),

            child: TextFormField(

              controller: textEditingController,

              decoration: InputDecoration(

                isDense: true,

                contentPadding: const EdgeInsets.symmetric(

                  horizontal: 10,

                  vertical: 8,

                ),

                hintText: 'Search for an item...',

                hintStyle: const TextStyle(fontSize: 12),

                border: OutlineInputBorder(

                  borderRadius: BorderRadius.circular(8),

                ),

              ),

            ),

          ),

        searchMatchFn: (item, searchValue) {
       
String aranacak = getTurkish(searchValue);
       
String listItem = getTurkish(item.value.toString());
       
return (listItem.contains(aranacak));
        },

          //This to clear the search value when you close the menu

          onMenuStateChange: (isOpen) {

            if (!isOpen) {

              textEditingController.clear();

            }

          },

        ),

      ),

    ),

  );

}

 

 

 

 

 

 

2-) Hazır widget olarak kullanımı

 

 1. dropdownr.dart

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

class DropDownR extends StatefulWidget {
  
List<String> items = [];
  
String secili = "";
  
String title = "Seçiniz...";
  
Function secilenClick;

  
DropDownR(
      {
required this.items,
      
required this.secili,
      
required this.title,
      
required this.secilenClick});

  
@override
  
State<DropDownR> createState() => _DropDownRState();
}

class _DropDownRState extends State<DropDownR> {
  
List<String> items = [];
  
String? secili = null;
  
String title = "";
  
late Function secilenClick;

  
@override
  
void initState() {
    
// TODO: implement initState
    
super.initState();
    
this.items = widget.items;
    
this.secili = widget.secili;
    
this.title = widget.title;
    
this.secilenClick = widget.secilenClick;
  }

  
final TextEditingController textEditingController = TextEditingController();

  
@override
  
void dispose() {
    
textEditingController.dispose();
    
super.dispose();
  }

  
String getTurkish(String text) {
    text = text.toLowerCase().replaceAll(
"i̇", "i"); // buradaki iki i farklıdır
    
text = text.replaceAll("ç", "c");
    text = text.replaceAll(
"ğ", "g");
    text = text.replaceAll(
"ı", "i");
    text = text.replaceAll(
"ö", "o");
    text = text.replaceAll(
"ş", "s");
    text = text.replaceAll(
"ü", "u");
    
return text;
  }

  
@override
  
Widget build(BuildContext context) {
    
// DropdownButtonHideUnderline
    
return Center(
      child:
Container(
        decoration:
BoxDecoration(
          borderRadius:
BorderRadius.circular(5.0),
          border:
Border.all(
              color:
Colors.grey, style: BorderStyle.solid, width: 0.80),
        ),
        child:
DropdownButtonHideUnderline(
          child:
DropdownButton2(
            isExpanded:
true,

            hint:
TextFormField(
              style:
TextStyle(
                fontSize:
14,
                color:
Theme.of(context).hintColor,
              ),
              decoration:
InputDecoration(
                icon:
Icon(Icons.file_present),
                labelText:
title,
                border:
InputBorder.none,
                labelStyle:
TextStyle(fontSize: 14),
              ),
            ),
            items:
items
                
.map((item) => DropdownMenuItem<String>(
                      value: item,
                      child:
Container(
                        padding:
EdgeInsets.only(left: 10),
                        child:
Text(
                          item,
                          style:
const TextStyle(
                            fontSize:
14,
                          ),
                        ),
                      ),
                    ))
                .toList(),
            value:
secili == "" ? null : secili,
            onChanged: (value) {
              setState(() {
                
secili = value as String;
                
secilenClick(secili!);
              });
            },
            buttonHeight:
40,
            buttonWidth:
200,
            itemHeight:
30,
            dropdownMaxHeight:
600,
            searchController:
textEditingController,
            searchInnerWidget:
Padding(
              padding:
const EdgeInsets.only(
                top:
8,
                bottom:
4,
                right:
8,
                left:
8,
              ),
              child:
TextFormField(
                controller:
textEditingController,
                decoration:
InputDecoration(
                  isDense:
true,
                  contentPadding:
const EdgeInsets.symmetric(
                    horizontal:
10,
                    vertical:
8,
                  ),
                  hintText:
"Ara...",
                  hintStyle:
const TextStyle(fontSize: 12),
                  border:
OutlineInputBorder(
                    borderRadius:
BorderRadius.circular(8),
                  ),
                ),
              ),
            ),
            searchMatchFn: (item, searchValue) {
              
String aranacak = getTurkish(searchValue);
              
String listItem = getTurkish(item.value.toString());
              
return (listItem.contains(aranacak));
            },
            
//This to clear the search value when you close the menu
            
onMenuStateChange: (isOpen) {
              
if (!isOpen) {
                
textEditingController.clear();
              }
            },
          ),
        ),
      ),
    );
  }
}

 2. kullanımı

final List<String> items = [

  'A_Item1',

  'A_Item2',

  'A_Item3',

  'A_Item4',

  'B_Item1',

  'B_Item2',

  'B_Item3',

  'B_Item4',

];

 

String secilenBelgeTip="";


Widget getBelgeContent() {
  
var dropDown= DropDownR(items: items ,secili: secilenBelgeTip,title: "Belge tipini seçiniz...", secilenClick: (String secilenBelgeTip){
    print(secilenBelgeTip);
    
this.secilenBelgeTip=secilenBelgeTip;
  },);
  
return dropDown;
}

 

 

 

 

 

 

 2023 Şubat 10 Cuma
 373