groovin_widgets 1.4.2

groovin_widgets #

A Flutter package containing widgets created by GroovinChip.

This package currently contains the following widgets:

  • ModalDrawerHandle
  • OutlineDropdownButton
  • OutlineDropdownButtonFormField
  • GroovinExpansionTile
  • SplitColorBackground

ModalDrawerHandle #

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

Sample image:

Alt Text

Full image gallery: https://imgur.com/gallery/zf6NriP

YouTube video walkthrough: https://www.youtube.com/watch?v=VF-zR9ougi8&feature=youtu.be

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:

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

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

  ModalDrawerHandle({
    this.handleRowAlignment = MainAxisAlignment.center,
    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:

  OutlineDropdownButton({
    this.inputDecoration = const InputDecoration(
      border: OutlineInputBorder(),
      contentPadding: EdgeInsets.all(8.0),
    ),
    this.disabledHint,
    this.elevation = 8, // the default value per the source
    this.hint,
    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
    this.items,
    this.onChanged,
    this.style,
    this.value,
  });

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

SplitColorBackground #

This widget enables the replication of designs seen on dribbble, uplabs, and other design websites that show a header section with one background color, a body section with a different background color, and rounded corners on the top of the body section.

An example of what this looks like is as follows, taken from the example project included in this repository:

Alt text

This widget operates as a Scaffold who's body is a Column with two Flexible widgets to represent the header and the body. Various Scaffold properties are exposed to the developer. If you would like more of the Scaffold properties opened up to customization, please file an issue on GitHub and send me an additional email or tweet.

The widget contains the following properties:

/// Represents the flex property of the Flexible containing the header widget. Defaults to 1.
final int headerFlex;
/// Represents the Widget that will be used as the header
final Widget header;
/// Represents the color for the header widget
final Color headerColor;
/// Represents the flex property of the Flexible containing the body widget. Defaults to 4.
final int bodyFlex;
/// Represents the Widget that will be used as the body
final Widget body;
/// Represents the corner radius for the top left corner of the body
final double topLeftCornerRadius;
/// Represents the corner radius for the top right corner of the body
final double topRightCornerRadius;
/// Represents the color for the body widget
final Color bodyColor;
/// The Scaffold appBar is available for optional use.
final AppBar appBar;
/// The Scaffold FloatingActionButton is available for optional use.
final FloatingActionButton floatingActionButton;
/// The Scaffold FloatingActionButtonLocation is available for optional use.
final FloatingActionButtonLocation floatingActionButtonLocation;
/// The Scaffold BottomNavigationBar is available for optional use.
final BottomNavigationBar bottomNavigationBar;

Getting Started with Flutter #

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

For help on editing package code, view the documentation.

[1.4.2] - 05/20/2019

  • Addresses pub health suggestions

[1.4.1] - 05/20/2019

  • Updates README

[1.4.0] - 05/20/2019

  • Adds the SplitColorBackground widget

[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

example/README.md

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:


dependencies:
  groovin_widgets: ^1.4.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub 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';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
86
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

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

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

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 91 col 20: The value of the field '_backgroundColor' isn't used.

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

Format lib/groovin_list_tile.dart.

Run flutter format to format lib/groovin_list_tile.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.

Dependencies

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
flutter_test

Admin