A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Overview

Flutter_MaterialSheetAndNavigationDrawer

If this project helped you reduce developement time or you just want to help me continue making useful tools
Feel free to buy me a cup of coffee! :)
PayPal Donate Button

Purpose

A Very Flexible Widget that can Implement Material Sheets (bottom, top, side) (modal and persistent)

Features

MULTIPLE SHEETS PER APP

WIDGET PARAMETERS

  1. app [required] -> the application that goes behind the sheet
  2. sheet [required] -> the sheet that animates in or out of the screen
  3. attachment -> an attachment to the sheet that is always on screen

VARIABLE PARAMETERS

  1. startOpen -> whether or not the sheet should startOpen (true, false)
  2. position -> what edge the sheet is attached to (top, right, bottom, left)
  3. type -> what type of sheet this is (modal, persistent)
  4. placement -> where the attachment is placed relative to the screen edges (inside, outside)
  5. backBtnClosesSheet -> whether or not the back button closes the sheet
  6. backBtnClosesAnimated -> whether the back button closes the sheet animated or instantaneously
  7. autoOpenOrCloseIndicator -> whether or not you should be shown whether you sheet will autoClose or autoOpen after you let go of it
  8. swipeToOpen -> whether or not you can swipe the sheet to open (NOTE: if no attachment is specified you will swipe the edge of the screen to open)
  9. swipeToClose -> whether or not you can swipe the sheet to close
  10. maxAnimationTimeInMilliseconds -> how long the sheet takes to open or close if animated
  11. indicatorAutoCloseColor -> the color that shows up when the sheet will auto close if let go [opacity matter]
  12. scrimOpenColor -> the color of the scrim when using a modal sheet [opacity matters]
  13. sheetMin -> the smallest the sheet can be
  14. sheetMax -> the largest the sheet can be
  15. textDirection -> the text direction inside of the sheet

FUNCTIONS TO GRAB INFORMATION

  1. getOpenPercent() -> get how open the sheet is [0.0 -> 1.0]
  2. getAttachmentSize() -> get the width and height of the attachment
  3. getSheetSize() -> get the width and height of the sheet

FUNCTIONS TO RUN COMMANDS

  1. toggleInstantaneous() -> toggle between opened and closed states with no animation
  2. toggleAnimated() -> toggle between opened and closed states with animation
  3. openInstantaneous() -> open the sheet instantly
  4. openAnimated() -> open the sheet with an animation
  5. closeInstantaneous() -> close the sheet instantly
  6. closeAnimated() -> close the sheet with an animation

Limitation

I was not created to be performant. Modify my code if needed to suit your specific needs and get the best performance possible.

How To

import 'package:flutter/material.dart';
import 'materialSheet.dart';

void main() => runApp(new MaterialSheetTestApp());

class MaterialSheetTestApp extends StatelessWidget {

  //NOTE: these are required if you want buttons that will be opening or closing the sheet

  Sheet matSheet;
  getOpenPercent() => matSheet.functions.getOpenPercent();
  getSheetSize() => matSheet.functions.getSheetSize();
  getAttachmentSize() => matSheet.functions.getAttachmentSize();
  toggleInstant() => matSheet.functions.toggleInstantaneous();
  toggleAnim() => matSheet.functions.toggleAnimated();
  openInstant() => matSheet.functions.openInstantaneous();
  closeInstant() => matSheet.functions.closeInstantaneous();
  openAnim() => matSheet.functions.openAnimated();
  closeAnim() => matSheet.functions.closeAnimated();

  @override
  Widget build(BuildContext context) {
    matSheet = new Sheet(
      parameters: new Parameters(
        //-----Widgets
        app: new Container(
          child: new Center(
            child: new FlatButton(
              color: Colors.redAccent,
              onPressed: () => openAnim(),
              child: new Text("Press me to open the sheet"),
            ),
          ),
        ),
        sheet: new Container(
          color: Colors.yellowAccent,
          child: new Center(
            child: new Text(
              "Right Sheet",
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.0,
              ),
            ),
          ),
        ),
        attachment: new Container(
          color: Colors.greenAccent,
          child: new Icon(
            Icons.attachment,
            color: Colors.white,
          ),
        ),
        //-----Other Vars
        position: sheetPosition.right,
        autoOpenOrCloseIndicator: true,
        placement: attachmentPlacement.inside,
      ),
    );

    return matSheet;
  }
}

Plans

  1. lockSheet (opened, closed, false) [mutable]
  2. sheetAffectsApp (resize, move, none) [mutable]
You might also like...

Flutter Split View and Drawer Navigation example

Flutter Split View and Drawer Navigation example

Flutter Split View and Drawer Navigation example This repo contains the source code for this tutorial: Responsive layouts in Flutter: Split View and D

Nov 17, 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.

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

Jan 1, 2023

Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Dec 26, 2022

A flutter app with custom navigation drawer

A flutter app with custom navigation drawer

Delivery Um Aplicativo de Delivey em Flutter Preview Getting Started This project is a starting point for a Flutter application. A few resources to ge

Dec 17, 2022

FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

scroll_navigation My other APIs Video Viewer Video Editor Helpers Features Fancy animations. Customizable colors. Works with the back button. Scrollin

Jun 14, 2022

Get or set persistent storage value based on MMKV framework.

mmkv_flutter Plugin that allow Flutter to read value from persistent storage or save value to persistent storage based on MMKV framework Getting Start

Jan 17, 2022

A simple modal progress HUD (heads-up display, or progress indicator) for flutter

A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Nov 22, 2022

Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog Show alert dialog or modal action sheet adaptively according to platform. showOkAlertDialog Convenient wrapper of showAlertDialog. iOS

Dec 17, 2022

Flutter modal bottom route - A flutter route animation

Flutter modal bottom route - A flutter route animation

flutter_modal_bottom_route This is a flutter route animation demo. See Chinouo J

Aug 19, 2022
Owner
Bryan Cancel
I love to learn, apply, repeat... [Flutter | React | UX | UI | much more] Check it out my portfolio @ b-cancel.github.io
Bryan Cancel
Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Johannes Milke 22 Jan 3, 2023
Flutter package to get keyboard height. Can be used to display a sticker/emoji modal with correct height.

flutter_persistent_keyboard_height Flutter package to get keyboard height. The height is persisted during app sessions and keyboard states (you can us

Arshak Aghakaryan 13 Oct 17, 2022
A Very Good Flutter Federated Plugin created by the Very Good Ventures Team 🦄

Very Good Flutter Plugin Developed with ?? by Very Good Ventures ?? A Very Good Flutter Plugin created by the Very Good Ventures Team. Getting Started

Very Good Open Source 14 Oct 19, 2022
A Very Good Dart Package Template created by the Very Good Ventures Team 🦄

Very Good Dart Package Developed with ?? by Very Good Ventures ?? A Very Good Dart package created by Very Good Ventures ?? . Getting Started ?? Insta

Very Good Open Source 8 Aug 14, 2022
A Very Good Flutter Package Template created by the Very Good Ventures Team 🦄

Very Good Flutter Package Developed with ?? by Very Good Ventures ?? A Very Good Flutter package created by Very Good Ventures ?? . Getting Started ??

Very Good Open Source 32 Dec 13, 2022
A Very Good Dart CLI Template created by the Very Good Ventures Team 🦄

Very Good Dart CLI Developed with ?? by Very Good Ventures ?? A Dart CLI template created by the Very Good Ventures Team. Generated by the Very Good C

Very Good Open Source 26 Dec 15, 2022
A very easy-to-use navigation tool/widget for having iOS 13 style stacks.

cupertino_stackview A very easy-to-use navigation tool/widget for having iOS 13 style stacks. It is highly recommended to read the documentation and r

AliYigitBireroglu 49 Nov 18, 2022
Flutter Navigation - all types of navigation in flutter run main.tabBar.dart to see tabBar, and run main.dart to see the otheres

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

Michael Odumosu 0 Jan 1, 2022
Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_local_notifications plugin.

Flutter Local Notifications Example Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_l

Sandip Pramanik 12 Nov 29, 2022
A Demo application📱 which stores User feedback from 💙Flutter application into Google Sheets🗎 using Google AppScript.

?? Flutter ?? to Google Sheets ?? A Demo application which stores User feedback from Flutter application into Google Sheets using Google AppScript. Yo

Shreyas Patil 289 Dec 28, 2022