A Flutter Package with Custom Implementation of Drawer

Flutter Zoom Drawer .A Flutter package with custom implementation of the Side Menu (Drawer)

Getting Started

To start using this package, add flutter_zoom_drawer dependency to your pubspec.yaml

dependencies:
  flutter_zoom_drawer: '<latest_release>'

Features

  • Simple sliding drawer
  • Sliding drawer with shadows
  • Sliding drawer with rotation
  • Sliding drawer with rotation and shadows
  • Support for both LTR & RTL

Documentation

    ZoomDrawer(
      controller: ZoomDrawerController,
      style: DrawerStyle.DefaultStyle,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*.65,
      openCurve: Curves.fastOutSlowIn,
      closeCurve: Curves.bounceIn,
    )
ParametersValueRequiredDocs
controllerZoomDrawerControllerNoController to have access to the open/close/toggle function of the drawer
styleDrawerStyleNothe drawer style to be displayed (check the DrawerStyle enum)
mainScreenWidgetYesScreen containing the main content to display
menuScreenWidgetYesScreen containing the menu/bottom screen
slideWidthdoubleNoSliding width of the drawer - defaults to 275.0
mainScreenScaledoubleNoMainScreen scale - defaults to 0.3
borderRadiusdoubleNoBorder radius of the slided content - defaults to 16.0
angledoubleNoRotation angle of the drawer - defaults to -12.0 - should be 0.0 to -30.0
disableGestureboolNoDisable the home page swipe to open drawer gesture - defaults to false
backgroundColorColorNoBackground color of the drawer shadows - defaults to white
showShadowboolNoBoolean, whether to show the drawer shadows - defaults to false
isRtlboolNoBoolean, display the drawer in RTL
openCurveCurveNoopen animation curve - defaults to Curves.easeOut
closeCurveCurveNoclose animation curve - defaults to Curves.easeOut

Controlling the drawer

To get access to the drawer, and be able to control it, there are 2 ways:

  • Using a ZoomDrawerController inside the main widget where ou have the ZoomDrawer widget and providing it to the widget, which will allow you to trigger the open/close/toggle methods.
    final _drawerController = ZoomDrawerController();

    _drawerController.open();
    _drawerController.close();
    _drawerController.toggle();
    _drawerController.isOpen();
    _drawerController.stateNotifier;
  • Using the static method inside ancestor widgets to get access to the ZoomDrawer.
  ZoomDrawer.of(context).open();
  ZoomDrawer.of(context).close();
  ZoomDrawer.of(context).toggle();
  ZoomDrawer.of(context).isOpen();
  ZoomDrawer.of(context).stateNotifier;

Screens

Example app Demo

Example RTL Demo

  • Drawer Sliding
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • Drawer Sliding with shadow
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: 0.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding

  • Drawer Sliding with rotation
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: false,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation

  • Drawer Sliding with rotation and shadows
    ZoomDrawer(
      controller: ZoomDrawerController,
      menuScreen: MENU_SCREEN,
      mainScreen: MAIN_SCREEN,
      borderRadius: 24.0,
      showShadow: true,
      angle: -12.0,
      backgroundColor: Colors.grey[300],
      slideWidth: MediaQuery.of(context).size.width*(ZoomDrawer.isRTL()? .45: 0.65),
    )

Drawer Sliding with rotation and shadows

Issues

Please file any issues, bugs or feature request as an issue on our GitHub page.

Want to contribute

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our contribution guide and send us your pull request.

Credits

Credits goes to pedromassango as most of this package comes from his implementation.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_zoom_drawer

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  flutter_zoom_drawer: ^2.1.1

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

Import it

Now in your Dart code, you can use:

import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';

example/lib/main.dart

import 'dart:ui' as ui;
import 'package:easy_localization/easy_localization.dart';
import 'package:example/home_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(
    EasyLocalization(
      child: MyApp(),
      path: 'assets/langs',
      supportedLocales: MyApp.list,
      saveLocale: true,
      useOnlyLangCode: true,
    ),
  );
}

class MyApp extends StatelessWidget {
  static const list = [
    Locale('en'),
    Locale('ar'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Zoom Drawer Demo',
      onGenerateTitle: (context) => tr("app_name"),
      debugShowCheckedModeBanner: false,
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.orange,
      ),
      home: ChangeNotifierProvider(
        create: (_) => MenuProvider(),
        child: HomeScreen(),
      ),
    );
  }

  /// Languages that are Right to Left
  static List<String> RTL_LANGUAGES = ["ar", "ur", "he", "dv", "fa"];

  /// Static function to determine the device text direction RTL/LTR
  static bool isRTL() {
    /// Device language
    final locale = _getLanguageCode();

    return RTL_LANGUAGES.contains(locale);
  }

  static String? _getLanguageCode() {
    try {
      return ui.window.locale!.languageCode.toLowerCase();
    } catch (e) {
      return null;
    }
  }
}

#drawer  #flutter 

A Flutter Package with Custom Implementation of Drawer
Evil  David

Evil David

1605058297

Understand Transformations and CustomPaint Widgets in Flutter

Flutter made it easy for developers to build complex UI in record time. With a number of awesome widgets like Rows, Columns, ListView and Positioned, we can play around the screen and get our desired output and be satisfied at the end of the day. But what if you need a widget that is not available in the Flutter Widget Catalog? What if your requirement is so awesome and innovative that it is still not yet thought of by any one. In this case, you my friend, are there to bring it to life.

In order to let developers build their own widgets, Flutter has many classes in store and has actually made it pretty simple for the developers to utilize them.

Transformations

Transform widget takes a Matrix4 object as a transformation guide to apply on the widget passed as a child.

Image for post

Example of rotation using Transform widget.

Image for post

Example of scaling using Transform widget.

Image for post

Example of translation using Transform widget.

#paint #dart #custom #flutter #drawer

Understand Transformations and CustomPaint Widgets in Flutter
Wiley  Mayer

Wiley Mayer

1603584000

Drawer menu implementation in Swift 5

This is a very simple implementation of a slide menu in Swift 5. All you need is the three classes from DrawerMenu folder. Check out the Xcode project from DrawerMenuExample, if you want to see how to get started. Specifically, look into ViewController.swift class, viewDidLoad method.

GitHub

#drawer #navigation #menu

Drawer menu implementation in Swift 5
Flo  D'Amore

Flo D'Amore

1594213532

Flutter UI from Scratch | Pet UI Part 3 | Drawer Completion

Part 1 here - https://youtu.be/Cg9vLhfvWBE

Part 2 here - https://youtu.be/7NV4E3mVOCI

In this video , we will complete our hidden drawer.This will be a three part series .
Flutter has made it possible for developers to make crisp UI and has been a hot topic between the developers to make Flutter application.

I always make video as a flutter tutorial for beginners so that experienced developers can forward and beginners can understand all the concepts.
#Flutter #FlutterUI #FlutterTutorial #Drawer #UI

#flutter #flutterui #fluttertutorial #drawer #ui

Flutter UI from Scratch | Pet UI Part 3 | Drawer Completion