Merge pull request #18 from AyushBherwani1998/drop_down

adds DropDownButton

example/pubspec.lock

@@ -108,7 +108,7 @@ packages:
  name: petitparser
  url: "https://pub.dartlang.org"
  source: hosted
- version: "2.4.0"
+ version: "3.0.2"
  quiver:
  dependency: transitive
  description:
@@ -190,6 +190,6 @@ packages:
  name: xml
  url: "https://pub.dartlang.org"
  source: hosted
- version: "3.6.1"
+ version: "3.7.0"
 sdks:
- dart: ">=2.6.0 <3.0.0"
+ dart: ">=2.7.0 <3.0.0"

lib/src/flutter/drop_down_button.dart

@@ -0,0 +1,152 @@
+/*
+ * Copyright 2020 Pawan Kumar. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:velocity_x/src/flutter/builder.dart';
+import 'package:velocity_x/src/velocity_x_extensions.dart';
+import 'package:flutter/material.dart';
+
+class VxDropDownButton extends VxWidgetBuilder<StatefulBuilder> {
+ VxDropDownButton(
+ this._items, {
+ @required this.valueHolder,
+ }) : assert(valueHolder != null);
+
+ /// The List<String> used to create [DropdownMenuItem].
+ ///
+ /// _items can't be null.
+ final List<String> _items;
+
+ /// The value used to define currently selected value of [VxDropDownButton].
+ String valueHolder;
+
+ /// Defines the [TextStyle] for [DropdownMenuItem].
+ ///
+ /// By default the value of `_textStyle` is [TextTheme.subhead]
+ /// value of the current [ThemeData.textTheme].
+ TextStyle _textStyle;
+
+ /// Defines the widget used to draw underline for [VxDropDownButton]
+ Widget _underLine;
+
+ /// Defines the elevation for menu when drop down is open.
+ ///
+ /// By default, the value of `_elevation` is 8.
+ int _elevation;
+
+ /// Defines the size of [VxDropDownButton] icon.
+ ///
+ /// By default, the value of `_iconSize` is 24.
+ double _iconSize;
+
+ /// The [Icon] used for [VxDropDownButton].
+ ///
+ /// By default, the icon is [Icons.arrow_drop_down]
+ Icon _dropDownIcon;
+
+ /// Defines the drop down button icon color when button is disabled.
+ ///
+ /// By default, the color is `Colors.grey.shade400`.
+ Color _disabledIconColor;
+
+ /// Defines the drop down button icon color when button is enabled.
+ ///
+ /// By default, the color is `Colors.grey.shade700` when the theme's [ThemeData.brightness]
+ /// is [Brightness.light] and to [Colors.white70] when it is [Brightness.dark].
+ Color _enabledIconColor;
+
+ /// The color for the button's Material when it has the input focus.
+ Color _focusColor;
+
+ /// If the `_autoFocus` is true, [VxDropDownButton] will be selected as the initial focus when no other node
+ /// in its scope is currently focused.
+ bool _autoFocus = false;
+
+ /// Set the dropdown's inner contents to horizontally fill its parent.
+ bool _isExpanded = false;
+
+ /// Reduce the button's height.
+ ///
+ /// By default this button's height is the same as its menu items' heights.
+ bool _isDense = false;
+
+ /// Called when user selects a value from drop down menu.
+ ValueChanged<String> _onValueChange;
+
+
+ VxDropDownButton textStyle(TextStyle style) => this.._textStyle = style;
+
+ VxDropDownButton underLine(Widget widget) => this.._underLine = widget;
+
+ VxDropDownButton elevation(int val) => this.._elevation = val;
+
+ VxDropDownButton iconSize(double val) => this.._iconSize = val;
+
+ VxDropDownButton icon(Icon _icon) => this.._dropDownIcon = _icon;
+
+ VxDropDownButton disabledIconColor(Color color) =>
+ this.._disabledIconColor = color;
+
+ VxDropDownButton enabledIconColor(Color color) =>
+ this.._enabledIconColor = color;
+
+ VxDropDownButton get autoFocus => this.._autoFocus = true;
+
+ VxDropDownButton get isExpanded => this.._isExpanded = true;
+
+ VxDropDownButton get isDense => this.._isDense = true;
+
+ VxDropDownButton focusColor(Color color) => this.._focusColor = color;
+
+ VxDropDownButton onChange(ValueChanged<String> function) =>
+ this.._onValueChange = function;
+
+ @override
+ StatefulBuilder make({Key key}) {
+ return StatefulBuilder(
+ builder: (BuildContext context, StateSetter setState) {
+ return DropdownButton<String>(
+ key: key,
+ value: valueHolder,
+ style: _textStyle,
+ underline: _underLine,
+ iconEnabledColor: _enabledIconColor,
+ iconDisabledColor: _disabledIconColor,
+ elevation: _elevation ?? 8,
+ iconSize: _iconSize ?? 24,
+ icon: _dropDownIcon,
+ autofocus: _autoFocus,
+ isExpanded: _isExpanded,
+ focusColor: _focusColor,
+ isDense: _isDense,
+ items: _items
+ .map<DropdownMenuItem<String>>((item) => DropdownMenuItem<String>(
+ value: item,
+ child: item.text.make(),
+ ))
+ .toList(),
+ onChanged: (String value) {
+ setState(() {
+ valueHolder = value;
+ });
+ _onValueChange(value);
+ },
+ );
+ },
+ );
+ }
+}
+
+extension DropDownExtension on List<String> {
+ VxDropDownButton dropDown({@required String value}) =>
+ VxDropDownButton(this, valueHolder: value);
+}

lib/velocity_x.dart

@@ -11,6 +11,7 @@ export 'src/flutter/common/velocity_responsive.dart';
 export 'src/flutter/common/velocity_two.dart';
 export 'src/flutter/common/velocity_zero.dart';
 export 'src/flutter/container.dart';
+export 'src/flutter/drop_down_button.dart';
 export 'src/flutter/flex.dart';
 export 'src/flutter/gesture.dart';
 export 'src/flutter/list.dart';

pubspec.lock

@@ -108,7 +108,7 @@ packages:
  name: petitparser
  url: "https://pub.dartlang.org"
  source: hosted
- version: "2.4.0"
+ version: "3.0.2"
  quiver:
  dependency: transitive
  description:
@@ -183,6 +183,6 @@ packages:
  name: xml
  url: "https://pub.dartlang.org"
  source: hosted
- version: "3.6.1"
+ version: "3.7.0"
 sdks:
- dart: ">=2.6.0 <3.0.0"
+ dart: ">=2.7.0 <3.0.0"

test/flutter/drop_down_button_test.dart

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2020 Pawan Kumar. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:velocity_x/velocity_x.dart';
+
+void main() {
+
+ testWidgets('user is able to select value from drop down',
+ (WidgetTester tester) async {
+ String _value = 'HEY';
+ await tester.pumpWidget(Directionality(
+ textDirection: TextDirection.ltr,
+ child: MaterialApp(
+ home: Material(
+ child: ['HELLO', 'HEY', 'HOLA']
+ .dropDown(value: _value)
+ .onChange((value) => _value = value)
+ .make()
+ .centered(),
+ ),
+ ),
+ ));
+
+ // Expects one widget with Text HEY
+ expect(find.text('HEY'), findsOneWidget);
+
+ // Tap at the HEY to open drop down
+ await tester.tap(find.text('HEY'));
+ await tester.pumpAndSettle(const Duration(seconds: 1));
+
+ // Select the value by tapping HELLO
+ await tester.tap(find.text('HELLO').last);
+ await tester.pumpAndSettle();
+
+ // The value of _value should be changed to HELLO
+ expect(_value, 'HELLO');
+ });
+}