• Stars
    star
    320
  • Rank 131,126 (Top 3 %)
  • Language
    Dart
  • License
    MIT License
  • Created about 6 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Hidden Drawer Menu is a library for adding a beautiful drawer mode menu feature with perspective animation.

pub package buymeacoffee

Hidden Drawer Menu

Hidden Drawer Menu is a library for adding a beautiful drawer mode menu feature with perspective animation.

You can use a pre-defined menu or make a fully customized menu.

Usage of the hidden_drawer_menu widget on an android device

Download APK Example

Use with default menu

import 'package:hidden_drawer_menu/model/hidden_drawer_menu.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<ScreenHiddenDrawer> itens = new List();

  @override
  void initState() {
    itens.add(new ScreenHiddenDrawer(
        new ItemHiddenMenu(
          name: "Screen 1",
          baseStyle: TextStyle( color: Colors.white.withOpacity(0.8), fontSize: 28.0 ),
          colorLineSelected: Colors.teal,
        ),
        FirstSreen()));

    itens.add(new ScreenHiddenDrawer(
        new ItemHiddenMenu(
          name: "Screen 2",
          baseStyle: TextStyle( color: Colors.white.withOpacity(0.8), fontSize: 28.0 ),
          colorLineSelected: Colors.orange,
        ),
        SecondSreen()));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return HiddenDrawerMenu(
      backgroundColorMenu: Colors.blueGrey,
      backgroundColorAppBar: Colors.cyan,
      screens: itens,
        //    typeOpen: TypeOpen.FROM_RIGHT,
        //    disableAppBarDefault: false,
        //    enableScaleAnimin: true,
        //    enableCornerAnimin: true,
        //    slidePercent: 80.0,
        //    verticalScalePercent: 80.0,
        //    contentCornerRadius: 10.0,
        //    iconMenuAppBar: Icon(Icons.menu),
        //    backgroundContent: DecorationImage((image: ExactAssetImage('assets/bg_news.jpg'),fit: BoxFit.cover),
        //    whithAutoTittleName: true,
        //    styleAutoTittleName: TextStyle(color: Colors.red),
        //    actionsAppBar: <Widget>[],
        //    backgroundColorContent: Colors.blue,
        //    elevationAppBar: 4.0,
        //    tittleAppBar: Center(child: Icon(Icons.ac_unit),),
        //    enableShadowItensMenu: true,
        //    backgroundMenu: DecorationImage(image: ExactAssetImage('assets/bg_news.jpg'),fit: BoxFit.cover),
    );
    
  }
}

Use with full customization menu

import 'package:hidden_drawer_menu/model/hidden_drawer_menu.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SimpleHiddenDrawer(
        menu: Menu(),
        screenSelectedBuilder: (position,controller) {
          
          Widget screenCurrent;
          
          switch(position){
            case 0 : screenCurrent = Screen1(); break;
            case 1 : screenCurrent = Screen2(); break;
            case 2 : screenCurrent = Screen3(); break;
          }
          
          return Scaffold(
            backgroundColor: backgroundColorContent,
            appBar: AppBar(
              leading: IconButton(
                  icon: Icon(Icons.menu),
                  onPressed: () {
                    controller.toggle();
                  }),
            ),
            body: screenCurrent,
          );
          
        },
      ),
    );
  }
}

class Menu extends StatefulWidget {
  @override
  _SecondSreenState createState() => _MenuState();
}

class _MenuState extends State<SecondSreen> {

  SimpleHiddenDrawerController controller;

  @override
  void didChangeDependencies() {
    controller = SimpleHiddenDrawerController.of(context);
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.maxFinite,
      height: double.maxFinite,
      color: Colors.cyan,
      padding: const EdgeInsets.all(8.0),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                controller.setSelectedMenuPosition(0);
              },
              child: Text("Menu 1"),
            ),
            RaisedButton(
              onPressed: () {
                controller.setSelectedMenuPosition(1);
              },
              child: Text("Menu 2"),
            )
          ],
        ),
      ),
    );
  }
}

Actions

This actions is only accessible by the children of HiddenDrawerMenu or SimpleHiddenDrawer.

Select item menu

SimpleHiddenDrawerController.of(context).setSelectedMenuPosition(0);

Toggle menu (if opened will close, if closed will open)

SimpleHiddenDrawerController.of(context).toggle();

Open

SimpleHiddenDrawerController.of(context).open();

Close

SimpleHiddenDrawerController.of(context).close();

Listen selected position

final controller = SimpleHiddenDrawerController.of(context);
controller.addListener((){
  print(controller.position);
});

Listen to menu status (closed,opening,open,closing)

final controller = SimpleHiddenDrawerController.of(context);
controller.addListener((){
  print(controller.state);
});

If you want to use only the widget responsible for the animation, it is now available as AnimatedDrawerContent

Example usage AnimatedDrawerContent

AnimatedDrawerController controller = AnimatedDrawerController(
  vsync: this,
  animationCurve:Curves.decelerate,
  duration:const Duration(milliseconds: 350,
);

return AnimatedDrawerContent(
  controller: controller,
  whithPaddingTop: false, //(optional) default = false // Add padding top in de gesture equals Heigth of the AppBar
  whithShadow: false, //(optional) default = false
  isDraggable: true, //(optional) default = true
  child: Screen(),
);

You can control actions by controller such as:

controller.toggle() // Open or Close
controller.open()
controller.close()
controller.move(percent) // moves to a specific position from 0 to 1 (0 = fully enclosed, 1 = fully opened)

Available settings

Menu

  • change BackgroundColor
  • set DecorationImage backgroud
  • enable Shadow above itens

Itens Menu

  • change colorText when selected
  • change colorText when unselected
  • change color lineleft selected

AppBar

  • change menu icon
  • change elavation
  • change BackgroundColor
  • set AutoTittleName
  • set actions
  • set widget in tittleAppBar

Content

  • change BackgroundColor
  • enable dragable
  • change curve animation

More Repositories

1

bonfire

(RPG maker) Create RPG-style or similar games more simply with Flame.
Dart
1,144
star
2

flutter_news

News application developed for practice, learning and testing the potential of this powerful Framework Flutter.
Dart
489
star
3

tutorial_coach_mark

TutorialCoachMark
Dart
477
star
4

darkness_dungeon

Game RPG build by Flame Flutter
Dart
298
star
5

achievement_view_flutter

C++
78
star
6

mountain_fight

Dart
56
star
7

AchievementView

Java
33
star
8

cube

Simple State Manager (Focusing on simplicity and rebuilding only the necessary)
Dart
32
star
9

mini_fantasy

Dart
31
star
10

pacman

PacMan game example implemented using Bonfire
Dart
25
star
11

multi-biome

Dart
21
star
12

CanaryAdminFlutter

Dart
18
star
13

gif_view

Load GIF images and can set framerate
Dart
13
star
14

npc_neural_training

Simple implementation of the training of NPC using Neural Network perceptron and Bonfire.
Dart
12
star
15

a_star

Package that uses the A * algorithm to find a way to the destination through the barriers.
Dart
12
star
16

tiled_json_reader

Dart
10
star
17

turn_game

Dart
10
star
18

bsev

Classes útil to use BloC pattern
Dart
9
star
19

qr_code_dart_scan

A QR code scanner that works on both iOS and Android using dart decoder.
Dart
9
star
20

game_player_gun_example

Dart
8
star
21

tutorial_flutter_medium

Projeto resultante do tutorial sobre desenvolvimento mobile com Flutter Framework
Dart
7
star
22

light_shooter

Dart
7
star
23

defector

Dart
6
star
24

game_island

Dart
5
star
25

SimplePokedex

Dart
4
star
26

MentorFlutter

Dart
3
star
27

exemple_flutter_cryptocurrency

Exemplo de desenvolvimento de um app com chamadas a api e listagem utilizando o framework Flutter
Dart
3
star
28

neurons_tree_widget

Widget used to represent neuron network.
C++
3
star
29

simple_injector

Dart
2
star
30

Map_Generator

Dart
2
star
31

sprite-sheet-lpc

2
star
32

Exemplo-MVP-Android

Java
2
star
33

docker-base

PHP
1
star
34

flutter_embeded_example

Dart
1
star
35

Vagrant-Box-PHP5.5

PHP
1
star
36

MVP_Flutter

Dart
1
star
37

eco_xepa

Dart
1
star
38

hexnavigationbottom

Dart
1
star
39

app_noticias_mvp

CMake
1
star
40

Duel-Links-Decks

Dart
1
star
41

game_score

Dart
1
star
42

lista-de-compras

1
star
43

test_pokedex

Simple application used in talk about unit, widget and integration tests in Flutter
Dart
1
star
44

Algoritmo-Genetico-Bovino

Algoritmo para análise genética de população bovina desenvolvido em C
C
1
star
45

bonfire_flappy_bird

Dart
1
star