Giter Club home page Giter Club logo

Comments (4)

icemanbsi avatar icemanbsi commented on August 22, 2024 1

Hi @mankeomorakort
I've published the update (thanks @lcuis ) on pub.dev.
I'll close this issue and feel free to reopen if you think this issue is not solved yet.
Thanks

from searchable_dropdown.

lcuis avatar lcuis commented on August 22, 2024

Hello @mankeomorakort ,

Thank you very much for your proposal, I think it makes perfect sense.

I proposed an implementation as part of PR #11 :
image

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

class OilProducer {
  String name;
  int id;

  OilProducer({this.name, this.id});

  OilProducer.fromJson(json) {
    name = json['name'];
    id = json['id'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['id'] = this.id;
    return data;
  }

  String toString(){
    return(name);
  }
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  List<OilProducer> oilProducers = [];
  OilProducer selectedOilProducer;

  @override
  void initState() {
    oilProducers.add(OilProducer(name:"Petronas",id:1));
    oilProducers.add(OilProducer(name:"Petrobras",id:2));
    oilProducers.add(OilProducer(name:"Trebol",id:3));
    oilProducers.add(OilProducer(name:"AGIP",id:4));
    super.initState();
  }

  _dropSearch() {
    return new SearchableDropdown<OilProducer>(
      isCaseSensitiveSearch: true,
      items: oilProducers.map((fab) {
        return DropdownMenuItem<OilProducer>(
          child: new Text(fab.name),
          value: fab,
        );
      }).toList(),
      value: selectedOilProducer,
      hint: new Text('Select One'),
      searchHint: new Text(
        'Select One',
        style: new TextStyle(fontSize: 20),
      ),
      onChanged: (OilProducer value) {
        setState(() {
          this.selectedOilProducer = value;
        });
      },
      displayClearButton: true,
      validator: (value){return(value==null?"Mandatory":null);},
      label: (value){return("Oil producer");},
      keyboardType: TextInputType.text,
      searchFn: (String keyword, List<DropdownMenuItem<OilProducer>> items) {
        List<int> ret = List<int>();
        if (keyword != null && items != null) {
          keyword.split(" ").forEach((k) {
            int i = 0;
            items.forEach((item) {
              if (keyword.isEmpty || (k.isNotEmpty &&
                  (item.value.name.toLowerCase().contains(k.toLowerCase()) ||
                      item.value.id.toString().contains(k)))) {
                ret.add(i);
              }
              i++;
            });
          });
        }
        if(keyword.isEmpty){
          ret = Iterable<int>.generate(items.length).toList();
        }
        return (ret);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Searchable Dropdown Demo'),
        ),
        resizeToAvoidBottomPadding: false,
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _dropSearch(),
            ],
          ),
        ),
      ),
    );
  }
}

from searchable_dropdown.

mankeomorakort avatar mankeomorakort commented on August 22, 2024

Ok, it look good to me :)

from searchable_dropdown.

lcuis avatar lcuis commented on August 22, 2024

Thanks!

from searchable_dropdown.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.