diff --git a/CHANGELOG.md b/CHANGELOG.md index 9967f07..b703b4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,20 @@ +## 0.0.5 + +- Fixed a bug when text wasn't showing when the field was filled with a color. + ## 0.0.4 -* Updated package description -* formatted multiselect.dart + +- Updated package description +- formatted multiselect.dart ## 0.0.3 -* Matching version number in pub with github + +- Matching version number in pub with github ## 0.0.2 -* Updated README.md + +- Updated README.md ## 0.0.1 -* The first implementation of a multiselect +- The first implementation of a multiselect diff --git a/example/lib/main.dart b/example/lib/main.dart index 118983a..f2e8e38 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -27,24 +27,79 @@ class Home extends StatefulWidget { } class _HomeState extends State { - List selected = []; @override Widget build(BuildContext context) { return Scaffold( body: Center( - child: Padding( + child: Container( + width: 100, padding: const EdgeInsets.all(20.0), child: DropDownMultiSelect( onChanged: (List x) { setState(() { - selected =x; + selected = x; }); }, - options: ['a' , 'b' , 'c' , 'd'], + options: [ + 'aghfchgfch', + 'bfghfgghfhhj', + 'cbkjhkhbjkgb', + 'djghhjghjvhgf' + ], selectedValues: selected, whenEmpty: 'Select Something', + decoration: InputDecoration( + filled: true, + fillColor: Color(0xFFF2F5F8), + contentPadding: EdgeInsets.symmetric( + vertical: 8, + horizontal: 12, + ), + border: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.transparent, + width: 1, + ), + borderRadius: BorderRadius.circular(5), + ), + enabledBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.transparent, + width: 1, + ), + borderRadius: BorderRadius.circular(5), + ), + errorBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.transparent, + width: 1, + ), + borderRadius: BorderRadius.circular(5), + ), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.transparent, + width: 1, + ), + borderRadius: BorderRadius.circular(5), + ), + disabledBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.transparent, + width: 1, + ), + borderRadius: BorderRadius.circular(5), + ), + focusedErrorBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Colors.transparent, + width: 1, + ), + borderRadius: BorderRadius.circular(5), + ), + ), ), ), )); diff --git a/example/pubspec.lock b/example/pubspec.lock index 921475e..205fb33 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -87,7 +87,7 @@ packages: path: ".." relative: true source: path - version: "0.0.3" + version: "0.0.5" path: dependency: transitive description: diff --git a/lib/multiselect.dart b/lib/multiselect.dart index 2ebe336..9523da9 100644 --- a/lib/multiselect.dart +++ b/lib/multiselect.dart @@ -28,7 +28,12 @@ class _SelectRow extends StatelessWidget { onChange(x!); _theState.notify(); }), - Text(text) + SizedBox(width: 4), + Text( + text, + overflow: TextOverflow.ellipsis, + style: TextStyle(fontSize: 13), + ), ], ); } @@ -87,80 +92,57 @@ class _DropDownMultiSelectState extends State { Widget build(BuildContext context) { return Container( height: 100, - child: Stack( - children: [ - _theState.rebuilder(() => widget.childBuilder != null - ? widget.childBuilder!(widget.selectedValues) - : Align( - child: Padding( - padding: - EdgeInsets.symmetric(vertical: 15, horizontal: 10), - child: Text(widget.selectedValues.length > 0 - ? widget.selectedValues - .reduce((a, b) => a + ' , ' + b) - : widget.whenEmpty ?? '')), - alignment: Alignment.centerLeft)), - Align( - alignment: Alignment.centerLeft, - child: DropdownButtonFormField( - decoration: widget.decoration != null - ? widget.decoration - : InputDecoration( - border: OutlineInputBorder(), - isDense: true, - contentPadding: EdgeInsets.symmetric( - vertical: 15, - horizontal: 10, - ), - ), - isDense: true, - onChanged: widget.enabled ? (x) {} : null, - value: null, - selectedItemBuilder: (context) { - return widget.options - .map((e) => DropdownMenuItem( - child: Container(), - )) - .toList(); - }, - items: widget.options - .map((x) => DropdownMenuItem( - child: _theState.rebuilder(() { - return widget.menuItembuilder != null - ? widget.menuItembuilder!(x) - : _SelectRow( - selected: widget.selectedValues.contains(x), - text: x, - onChange: (isSelected) { - if (isSelected) { - var ns = widget.selectedValues; - ns.add(x); - widget.onChanged(ns); - } else { - var ns = widget.selectedValues; - ns.remove(x); - widget.onChanged(ns); - } - }, - ); - }), - value: x, - onTap: () { - if (widget.selectedValues.contains(x)) { - var ns = widget.selectedValues; - ns.remove(x); - widget.onChanged(ns); - } else { - var ns = widget.selectedValues; - ns.add(x); - widget.onChanged(ns); - } - }, - )) - .toList(), - ), - ), - ], + child: Align( + alignment: Alignment.centerLeft, + child: DropdownButtonFormField( + decoration: widget.decoration != null + ? widget.decoration!.copyWith( + hintText: widget.selectedValues.length > 0 + ? widget.selectedValues.reduce((a, b) => a + ', ' + b) + : widget.whenEmpty ?? '') + : InputDecoration( + border: OutlineInputBorder(), + isDense: true, + ), + isDense: true, + onChanged: widget.enabled ? (x) {} : null, + value: null, + items: widget.options + .map((x) => DropdownMenuItem( + child: _theState.rebuilder(() { + return widget.menuItembuilder != null + ? widget.menuItembuilder!(x) + : _SelectRow( + selected: widget.selectedValues.contains(x), + text: x, + onChange: (isSelected) { + if (isSelected) { + var ns = widget.selectedValues; + ns.add(x); + widget.onChanged(ns); + } else { + var ns = widget.selectedValues; + ns.remove(x); + widget.onChanged(ns); + } + }, + ); + }), + value: x, + onTap: () { + if (widget.selectedValues.contains(x)) { + var ns = widget.selectedValues; + ns.remove(x); + widget.onChanged(ns); + } else { + var ns = widget.selectedValues; + ns.add(x); + widget.onChanged(ns); + } + }, + )) + .toList(), + ), ), ); } diff --git a/pubspec.yaml b/pubspec.yaml index b93fd5e..588ccae 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: multiselect description: A simple multiselect dropdown. It provide a concise way to create a Multi Selct ComboBox/SelectBox -version: 0.0.4 +version: 0.0.5 homepage: https://github.com/TaimoorHassan/multiselect environment: