A Flutter package containing widgets created by GroovinChip.

Overview

A Flutter package containing widgets and utilities created and edited by GroovinChip.

This package currently contains the following widgets:

  • ModalDrawerHandle
  • OutlineDropdownButton
  • OutlineDropdownButtonFormField
  • GroovinExpansionTile
  • SplitColorBackground
  • AvatarBackButton
  • ScrollControllerBuilder

This package also contains the following utilities:

  • The HexColor class, which returns a Color based on a hex value String
  • The textLuminance function, which helps determine the color of a Text based on a given background color
  • The printFormattedJson function, which prints nicely formatted JSON to the console
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.

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:

showModalBottomSheet(
  context: context,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(8),
      topRight: Radius.circular(8),
    ),
  ),
  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;
AvatarBackButton This widget creates a back button with a user Avatar next to it, like WhatsApp does. Given that user avatar's generally are retrieved via network calls this widget takes a String URL as the avatar and passes it to a NetworkImage widget.

Screenshots: Alt text Alt text

ScrollControllerBuilder This widget exposes a ScrollController to the child, thereby allowing widgets that require a ScrollController to be fully declarative.

Example usage:

ScrollControllerBuilder(
  builder: (context, controller) => ListView(
    controller: controller,
    children: [
      Text('Example),
    ],
  ),
),
You might also like...

⚒️ A monorepo containing a collection of packages that provide useful functionality for building CLI applications in Dart.

⚒️ A monorepo containing a collection of packages that provide useful functionality for building CLI applications in Dart.

⚒️ Dart CLI Utilities A monorepo containing a collection of packages that provide useful functionality for building CLI applications in Dart. Document

Oct 17, 2022

Beautiful Lottery App created in Flutter using Simple coding + State_full Widgets.

lottery_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Sep 7, 2022

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Jan 3, 2023

Widgets intermediate - Intermediate Widgets For Flutter

Widgets intermediate - Intermediate Widgets For Flutter

Intermediate Widgets 4-MODUL 5-LESSON Alert Dialog (Android & IOS) Drawer Single

Feb 6, 2022

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

Jan 4, 2023

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Flutter Platform Widgets This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render t

Jan 4, 2023

Arisprovider - A mixture between dependency injection (DI) and state management, built with widgets for widgets

A mixture between dependency injection (DI) and state management, built with wid

Jan 9, 2022

A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by suryadevsingh.

A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by suryadevsingh.

CustomToggleSwitch A new Flutter package customtoggleswitch is used to toggle a setting between on/off which is true/false respectively Created by sur

Jun 9, 2020

Beautiful Custom Switch package created with Flutter

Beautiful Custom Switch package created with Flutter

custom_switch Beautiful Custom Switch package created with Flutter. The source code is 100% Dart, and everything resides in the /lib folder. Show some

Sep 6, 2022
Comments
  • Compilation Error dependOnInheritedWidgetOfExactType is not defined for the class BuildContext

    Compilation Error dependOnInheritedWidgetOfExactType is not defined for the class BuildContext

    Error coming from plugin

    Compiler message:
    file:///C:/flutter/.pub-cache/hosted/pub.dartlang.org/groovin_widgets-1.4.5/lib/groovin_list_tile.dart:100:17: Error: The method 'dependOnInheritedWidgetOfExactType' isn't defined for the class 'BuildContext'.
     - 'BuildContext' is from 'package:flutter/src/widgets/framework.dart' ('file:///C:/flutter/packages/flutter/lib/src/widgets/framework.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'dependOnInheritedWidgetOfExactType'.
            context.dependOnInheritedWidgetOfExactType<ListTileTheme>();
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Compiler failed on C:\Users\Ashish\Desktop\rpstuff\android_app\cps_controller\lib\main.dart
    
    FAILURE: Build failed with an exception.
    
    * Where:
    Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 665
    
    * What went wrong:
    Execution failed for task ':app:compileflutterBuildDebugArm64'.
    > Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
    
    * Get more help at https://help.gradle.org
    
    BUILD FAILED in 9s
    Finished with error: Gradle task assembleDebug failed with exit code 1
    
    
    bug 
    opened by ashishpatel1992 4
  • Ability to disable OutlineDropDownButton

    Ability to disable OutlineDropDownButton

    Feature to disable OutlineDropDownButton would be great. When disabled and user clicks on it it should do nothing and when enabled should work as normal.

    Thanks.

    feature request 
    opened by nivla360 2
  • Add support for childrenPadding in GroovinExpansionTile

    Add support for childrenPadding in GroovinExpansionTile

    Hi, Can you please add support of original childrenPadding property of ExpansionTile. It was quite useful to display the bottom part of a BoxShadow of the expansion tile.

    It's nice to have boxDecoration on GroovinExpansionTile for complete background however if you can't see shadows, it becomes uglyish again :)

    Overall thanks, cool package, saved good amount of time!

    opened by animalnots 1
Owner
Reuben Turner
Flutter <3
Reuben Turner
A package containing different kinds of services and utilities.

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Daniel 0 Nov 26, 2021
Flutter project containing all my flutter UI challenges

My Flutter Challenges A new Flutter project containing all my flutter UI challenges. How to get the code? You just click on the title of each challeng

Pedro Massango 891 Jan 3, 2023
A flutter boilerplate project containing bloc, pedantic, hive, easy_translations and more!

Flutter Production Boilerplate A flutter project containing bloc, flutter_lints, hive, easy_translations and more! This repository is the starting poi

Andreas Feichtinger 133 Dec 26, 2022
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
A Flutter repo with a ready-to-go architecture containing flavors, bloc, device settings, json serialization and connectivity

Flutter Ready to Go A Flutter repo with a ready-to-go architecture containing flavors, bloc, device settings, json serialization and connectivity. Why

null 139 Nov 11, 2022
Repository containing source code for the tutorials made using with flutter

Flutter Tutorials Repository Containing Source code for tutorials found here: https://petercoding.com Note: Don't forgot to run pub get or just open p

Peter Haddad 19 Dec 9, 2022
Repository containing source code for the tutorials made using firebase with flutter

Firebase-Flutter Tutorials Repository Containing Source code for tutorials found here: https://petercoding.com Note: Don't forgot to run pub get or ju

Peter Haddad 231 Dec 21, 2022
Flutter widget library containing buttons for authenticating with popular social networks: Apple, Google, Facebook, Twitter and Microsoft.

Flutter Auth Buttons This library is now in maintenance mode I'm no longer actively using Flutter and don't have the time to keep this library maintai

Duncan Jones 115 Nov 3, 2022
A flutter project containing riverpod, flutter_lints, hive, easy_translations and more!

Flutter Production Boilerplate Riverpod A flutter project containing riverpod, flutter_lints, hive, easy_translations and more! This repository is the

Andreas Feichtinger 46 Dec 27, 2022
Flutter (web) app for the DevFest 2022 in HH, containing my slides as well as the examples used to talk about navigation

go_go_router A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

René Schramowski 2 Dec 15, 2022