groovin_widgets 1.3.2

  • Example
  • Installing
  • Versions
  • 89

groovin_widgets #

A Flutter package containing widgets created by GroovinChip.

This package currently contains the following widgets:

  • ModalDrawerHandle
  • OutlineDropdownButton
  • OutlineDropdownButtonFormField
  • GroovinExpansionTile

ModalDrawerHandle #

ModalDrawerHandle allows you to add a highly customizable drawer handle widget to your modalBottomSheets.

Sample image:

Alt Text

Full image gallery:

YouTube video walkthrough:

Every aspect of the drawer handle can be customized:

  • color
  • height
  • width
  • the MainAxisAlignment of the Row it sits in
  • the BorderRadius of all four corners

The recommended use of this widget is within the showModalBottomSheet builder (or the showRoundedModalBottomSheet builder, if you prefer the package by Gildaswise like I do).

The ideal use in this case is to return a Container that returns a Column, and the ModalDrawerHandle widget should be the first widget in the Column. I personally wrap the ModalDrawerHandle with a Padding that has a const EdgeInsets.all(8.0). Below is an example of this:

  context: context,
  builder: (builder) {
    return Container(
	  child: Column(
	    mainAxisSize: MainAxisSize.min,
	    children: <Widget>[
		    padding: const EdgeInsets.all(8.0),
		    child: ModalDrawerHandle(),

By default, the ModalDrawerHandle is initialized with the following properties:

    this.handleRowAlignment =,
    this.handleHeight = 5.0,
    this.handleWidth = 25.0,
    Color handleColor,
    this.handleBorderRadius = const BorderRadius.all(Radius.circular(10.0))
     this.handleColor = handleColor ?? Colors.grey[300];

As such, developers can pass in any or all of their own custom values to the constructor as they choose.

OutlineDropdownButton #

OutlineDropdownButton is a standard DropdownButton with one additional feature: the ability to wrap it in a border. Every property that you'd expect to customize about a DropdownButton is available to the developer, and the InputDecoration that the OutlineDropdownButton uses is also fully customizable.

By default, OutlineDropdownButton is initialized with the following properties:

    this.inputDecoration = const InputDecoration(
      border: OutlineInputBorder(),
      contentPadding: EdgeInsets.all(8.0),
    this.elevation = 8, // the default value per the source
    this.iconSize = 24.0, // the default value per the source
    this.isDense = false, // the default value per the source
    this.isExpanded = true, // here I deviate from the source because this property is great

A default OutlineDropdownButton will look as follows:

Alt Text

OutlineDropdownButtonFormField #

OutlineDropdownButtonFormField is similar to OutlineDropdownButton but is optimized for Forms. The additional properties are:

final List<DropdownMenuItem<T>> items;
final ValueChanged<T> onChanged;
final FormFieldValidator<T> validator;
final FormFieldSetter<T> onSaved;

This widget builds the InputDecoration explicitly in the widget rather than the constructor due to form validation limitations. However, the decoration is open for customization.

GroovinExpansionTile #

This widget is a modified Expansion tile that allows for more customization over its appearance. You can customize the BoxDecoration of the ExpansionTile so you can remove the lines that appear above and below it when expanded, and so on.

ExpansionTile builds a ListTile for the user to tap on; GroovinExpansionTile builds a custom ListTile so that you can add a subtitle and adjust the border radius of the InkWell the tile is contained in.

As of version 1.2.1 of this library, this widget's default trailing icon will have a set color of Colors.grey. This icon color is open to customization via the parameter defaultTrailingIconColor.

Example images:

  • Wrapped in Material with 2.0 elevation, not expanded: Alt text
  • Wrapped Material with 2.0 elevation, expanded: Alt text
  • Wrapped Material with 2.0 elevation, expanded, showing InkWell with topRight and topLeft radius: Alt text

Getting Started with Flutter #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

[1.3.2] - 12/30/2018

  • Updates OutlineDropdownButtonFormField widget to allow for custom InputDecorations (credit: DarthDie)

[1.3.1] - 12/25/2018

  • Updates README

[1.3.0] - 12/25/2018

  • Introduces the OutlineDropdownButtonFormField widget (credit: DarthDie)

[1.2.1] - 12/17/2018

  • The default trailing icon in the GroovinExpansionTile widget now is initialized with Colors.grey, and the property is open to customization

[1.2.0] - 12/12/2018

  • Added the GroovinExpansionTile widget

[1.1.0] - 11/18/2018

  • Changed the default padding for OutlineDropdownButton

[1.0.1] - 11/18/2018

  • Fix example not showing on pub

[1.0.0] - 11/17/2018

  • Initial release containing ModalDrawerHandle and OutlineDropdownButton widgets


groovin_widgets_example #

An example application that demonstrates the widgets found in the groovin_widgets package

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  groovin_widgets: ^1.3.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:groovin_widgets/groovin_widgets.dart';
Version Uploaded Documentation Archive
1.3.2 Jan 21, 2019 Go to the documentation of groovin_widgets 1.3.2 Download groovin_widgets 1.3.2 archive
1.3.1 Dec 25, 2018 Go to the documentation of groovin_widgets 1.3.1 Download groovin_widgets 1.3.1 archive
1.3.0 Dec 25, 2018 Go to the documentation of groovin_widgets 1.3.0 Download groovin_widgets 1.3.0 archive
1.2.1 Dec 17, 2018 Go to the documentation of groovin_widgets 1.2.1 Download groovin_widgets 1.2.1 archive
1.2.0 Dec 12, 2018 Go to the documentation of groovin_widgets 1.2.0 Download groovin_widgets 1.2.0 archive
1.1.0 Nov 18, 2018 Go to the documentation of groovin_widgets 1.1.0 Download groovin_widgets 1.1.0 archive
1.0.1 Nov 18, 2018 Go to the documentation of groovin_widgets 1.0.1 Download groovin_widgets 1.0.1 archive
1.0.0 Nov 18, 2018 Go to the documentation of groovin_widgets 1.0.0 Download groovin_widgets 1.0.0 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.13+1
  • Flutter: 1.2.1


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/groovin_expansion_tile.dart. (-1 points)

Analysis of lib/groovin_expansion_tile.dart reported 2 hints:

line 94 col 20: The value of the field '_backgroundColor' isn't used.

line 141 col 17: The value of the local variable 'borderSideColor' isn't used.

Format lib/groovin_widgets.dart.

Run flutter format to format lib/groovin_widgets.dart.

Format lib/modal_drawer_handle.dart.

Run flutter format to format lib/modal_drawer_handle.dart.

Format lib/outline_dropdown_button.dart.

Run flutter format to format lib/outline_dropdown_button.dart.

Format lib/outline_dropdown_button_form_field.dart.

Run flutter format to format lib/outline_dropdown_button_form_field.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies