From 2101639d7820ff58cd8efc3047bdd9ff9ad6fbf5 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Sat, 31 Mar 2018 20:08:42 +0200 Subject: [PATCH] set showing as dialog with search --- .vscode/launch.json | 13 +++++ README.md | 8 +-- lib/celement.dart | 17 ++++++ lib/country_code_picker.dart | 92 +++++++++++++++--------------- lib/selectionDialog.dart | 51 +++++++++++++++++ pubspec.yaml | 39 +------------ test/country_code_picker_test.dart | 13 ----- 7 files changed, 132 insertions(+), 101 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 lib/celement.dart create mode 100644 lib/selectionDialog.dart delete mode 100644 test/country_code_picker_test.dart diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..3287bb6 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,13 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Flutter", + "request": "launch", + "type": "dart" + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index fc79098..47cf76d 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ # country_code_picker -A new flutter package project. +A flutter package for showing a country code selector. -## Getting Started +## Usage -For help getting started with Flutter, view our online [documentation](https://flutter.io/). - -For help on editing package code, view the [documentation](https://flutter.io/developing-packages/). + diff --git a/lib/celement.dart b/lib/celement.dart new file mode 100644 index 0000000..c6d9ee5 --- /dev/null +++ b/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"; + } +} \ No newline at end of file diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 135fa59..95b32c0 100644 --- a/lib/country_code_picker.dart +++ b/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 createState() { - List 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 createState() { + List jsonList = codes; - return new _CountryCodePickerState(elements); - } + List 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 { - List<_CElement> elements = []; + CElement selectedItem; + List 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); + } + } + }); + } } diff --git a/lib/selectionDialog.dart b/lib/selectionDialog.dart new file mode 100644 index 0000000..f0f7b1a --- /dev/null +++ b/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 elements; + + SelectionDialog(this.elements); + + @override + State createState() => new _SelectionDialogState(); +} + +class _SelectionDialogState extends State { + List 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); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 086311e..636c755 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -9,41 +9,4 @@ dependencies: sdk: flutter dev_dependencies: - test: ^0.12.0 - -# For information on the generic Dart part of this file, see the -# following page: https://www.dartlang.org/tools/pub/pubspec - -# The following section is specific to Flutter. -flutter: - - # To add assets to your package, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg - # - images/a_dot_ham.jpeg - # - # For details regarding assets in packages, see - # https://flutter.io/assets-and-images/#from-packages - # - # An image asset can refer to one or more resolution-specific "variants", see - # https://flutter.io/assets-and-images/#resolution-aware. - - # To add custom fonts to your package, add a fonts section here, - # in this "flutter" section. Each entry in this list should have a - # "family" key with the font family name, and a "fonts" key with a - # list giving the asset and other descriptors for the font. For - # example: - # fonts: - # - family: Schyler - # fonts: - # - asset: fonts/Schyler-Regular.ttf - # - asset: fonts/Schyler-Italic.ttf - # style: italic - # - family: Trajan Pro - # fonts: - # - asset: fonts/TrajanPro.ttf - # - asset: fonts/TrajanPro_Bold.ttf - # weight: 700 - # - # For details regarding fonts in packages, see - # https://flutter.io/custom-fonts/#from-packages \ No newline at end of file + test: ^0.12.0 \ No newline at end of file diff --git a/test/country_code_picker_test.dart b/test/country_code_picker_test.dart deleted file mode 100644 index cf6ca64..0000000 --- a/test/country_code_picker_test.dart +++ /dev/null @@ -1,13 +0,0 @@ -import 'package:test/test.dart'; - -import 'package:country_code_picker/country_code_picker.dart'; - -void main() { - test('adds one to input values', () { - final calculator = new Calculator(); - expect(calculator.addOne(2), 3); - expect(calculator.addOne(-7), -6); - expect(calculator.addOne(0), 1); - expect(() => calculator.addOne(null), throwsNoSuchMethodError); - }); -}