set showing as dialog with search

lib/celement.dart

@@ -0,0 +1,17 @@
+class CElement {
+  String name;
+  String flag;
+  String code;
+  String dial_code;
+
+  CElement({this.name, this.flag, this.code, this.dial_code});
+
+  @override
+  String toString() {
+    return "$flag $dial_code";
+  }
+
+  String toLongString() {
+    return "$flag $dial_code $name";
+  }
+}

lib/country_code_picker.dart

@@ -1,62 +1,64 @@
 library country_code_picker;
 
-import 'dart:convert';
-import 'dart:io';
-
 import 'package:country_code_picker/country_codes.dart';
 import 'package:flutter/material.dart';
-
-class _CElement {
-    String name;
-    String flag;
-    String code;
-    String dial_code;
-
-    _CElement({this.name, this.flag, this.code, this.dial_code});
-}
+import 'package:country_code_picker/selectionDialog.dart';
+import 'package:country_code_picker/celement.dart';
 
 class CountryCodePicker extends StatefulWidget {
+  final Function(CElement) onChanged;
+  final String initialSelection;
 
-    @override
-    State<StatefulWidget> createState() {
-        List<Map> jsonList = codes;
+  CountryCodePicker({this.onChanged, this.initialSelection});
 
-        List<_CElement> elements = jsonList.map((s) =>
-        new _CElement(name: s['name'],
-            code: s['code'],
-            dial_code: s['dial_code'],
-            flag: s['flag'],
-        )).toList();
+  @override
+  State<StatefulWidget> createState() {
+    List<Map> jsonList = codes;
 
-        return new _CountryCodePickerState(elements);
-    }
+    List<CElement> elements = jsonList
+        .map((s) => new CElement(
+              name: s['name'],
+              code: s['code'],
+              dial_code: s['dial_code'],
+              flag: s['flag'],
+            ))
+        .toList();
+    return new _CountryCodePickerState(elements);
+  }
 }
 
 class _CountryCodePickerState extends State<CountryCodePicker> {
-    List<_CElement> elements = [];
+  CElement selectedItem;
+  List<CElement> elements = [];
 
-    _CElement _selectedItem;
+  _CountryCodePickerState(this.elements);
 
-    _CountryCodePickerState(this.elements);
+  @override
+  Widget build(BuildContext context) => new GestureDetector(
+        child: new Text("${selectedItem.toString()}"),
+        onTap: _showSelectionDialog,
+      );
 
+  @override
+  initState() {
+    selectedItem = elements.firstWhere((e) => e.code == widget.initialSelection,
+        orElse: () => elements[0]);
+    super.initState();
+  }
 
-    @override
-    Widget build(BuildContext context) =>
-            new Container(
-                height: 40.0,
-                width: 100.0,
-                child: new DropdownButton<_CElement>(
-                        value: _selectedItem ?? elements[0],
-                        items: elements.map((e) =>
-                        new DropdownMenuItem<_CElement>(
-                            key: new Key(e.code),
-                            value: e,
-                            child: new Text("${e.flag} ${e.name} ${e.dial_code}"),
-                        )).toList(),
-                        onChanged: (v) {
-                            setState(() {
-                                _selectedItem = v;
-                            });
-                        }),
-            );
+  void _showSelectionDialog() {
+    showDialog(
+      context: context,
+      child: new SelectionDialog(elements),
+    ).then((e) {
+      if (e != null) {
+        setState(() {
+          selectedItem = e;
+        });
+        if (widget.onChanged != null) {
+          widget.onChanged(e);
+        }
+      }
+    });
+  }
 }

lib/selectionDialog.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:country_code_picker/celement.dart';
+
+class SelectionDialog extends StatefulWidget {
+  final List<CElement> elements;
+
+  SelectionDialog(this.elements);
+
+  @override
+  State<StatefulWidget> createState() => new _SelectionDialogState();
+}
+
+class _SelectionDialogState extends State<SelectionDialog> {
+  List<CElement> showedElements = [];
+
+  @override
+  Widget build(BuildContext context) => new SimpleDialog(
+      title: new TextField(
+        decoration: new InputDecoration(prefixIcon: new Icon(Icons.search)),
+        onChanged: _filterElements,
+      ),
+      children: showedElements
+          .map((e) => new SimpleDialogOption(
+              child: new Text(e.toLongString()),
+              onPressed: () {
+                _selectItem(e);
+              }))
+          .toList());
+
+  @override
+  void initState() {
+    showedElements = widget.elements;
+    super.initState();
+  }
+
+  void _filterElements(String s) {
+    s = s.toUpperCase();
+    setState(() {
+      showedElements = widget.elements
+          .where((e) =>
+              e.code.contains(s) ||
+              e.dial_code.contains(s) ||
+              e.name.toUpperCase().contains(s))
+          .toList();
+    });
+  }
+
+  void _selectItem(CElement e) {
+    Navigator.pop(context, e);
+  }
+}