Overlapping panels - Discord inspired navigation for Flutter apps

Overview

Overlapping Panels Pub

Add Discord-like navigation to your app. Demo project here: overlapping_panels_demo

Demo

TODO

This widget does not support navigation events yet. So pressing the back button, does not slide the main panel back into view. This feature will be implemented in the nearest future.

Usage

Simple and straight to the point. Just provide usual widgets for all panels:

class _MyHomePageState extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        OverlappingPanels(
          // Using the Builder widget is not required. You can pass your widget directly. But to use `OverlappingPanelsState.of(context)` you need to wrap your widget in a Builder
          left: Builder(builder: (context) {
            return const LeftPage();
          }),
          right: Builder(
            builder: (context) => const RightPage(),
          ),
          main: Builder(
            builder: (context) {
              return const MainPage();
            },
          ),
          onSideChange: (side) {
            setState(() {
              if (side == RevealSide.main) {
                // hide something
              } else if (side == RevealSide.left) {
                // show something
              }
            });
          },
        ),
      ],
    );
  }
}

To be able to reveal a panel with the tap of a button, for example, do:

IconButton(
  icon: const Icon(Icons.menu),
  onPressed: () {
    // This is the main point
    OverlappingPanelsState.of(context)?.reveal(RevealSide.left);
  },
)
You might also like...

Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

 Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

May 27, 2022

Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

agenda_contatos Projeto do curso de Flutter Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Nov 27, 2021

Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

busca_gifs 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

Nov 25, 2021

This is an apps that implements fundamental features of Flutter (Android Apps Only)

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

Dec 28, 2021

Github-apps-flutter - Github Apps Build Using bloc 8.0 and Github API

Github-apps-flutter - Github Apps Build Using bloc 8.0 and Github API

Github_apps Inspiration This app is made to build using bloc 8.0 and github API.

Apr 14, 2022

A flutter date time picker inspired by flutter-cupertino-date-picker

A flutter date time picker inspired by flutter-cupertino-date-picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Nov 30, 2021

Authentication + Splash Screen Flutter UI, UI created getting inspired from one share on dribble with flutter

Authentication + Splash Screen Flutter UI, UI created getting inspired from one share on dribble with flutter

Rest App, with Firebase Auth + SplashScreen UI created getting inspired from one share on dribble with flutter, after getting amazing responce, Added

Dec 17, 2022

Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Rab Bar.

Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Rab Bar.

Gooey Tab Bar Flutter Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Tab Bar. About This component

Dec 14, 2022

🍝 restaurant menu app made with flutter inspired by this design https://goo.gl/jChLBV

🍝 restaurant menu app made with flutter inspired by this design https://goo.gl/jChLBV

Menu Flutter Todo Make background colors that changes with PageView Add custom tab indicators Change food prices Make cart animation Customize card sh

Jan 1, 2023
Owner
Degreat
I can draw. I can't code. 😕
Degreat
An API Client for Discord, written in Dart.

discord_api_client An API Client for Discord, written in Dart. Features TODO: List what your package can do. Maybe include images, gifs, or videos. Ge

null 1 Feb 15, 2022
Last.fm Discord Integrator

Эта страница на русском Shows what you are listening to in your Discord status Overview LFDI updates your Discord status every 30 seconds, showing wha

null 18 Dec 4, 2022
Simple app for both Android and Windows to sync Audio Trip songs from the Audio Trip Choreography Discord

ATCD Choreography Sync Simple app for both Android (Oculus Quest native) and Windows (PCVR) to sync Audio Trip songs from the Audio Trip Choreography

atcd 2 Nov 15, 2022
A curl-like client for the Discord API

durl A curl-like command-line client for Discord bot and user APIs. Features Bot auth flow User Oauth2 flow (redirects to http://localhost:3000) get,

Luke Pighetti 3 Nov 8, 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 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

Luis Felipe Murguia Ramos 14 Jun 14, 2022
Easy page navigation and management in Flutter apps.

sailor A Flutter package for easy navigation management. Warning: Package is still under development, there might be breaking changes in future. Index

Gurleen Sethi 144 Dec 12, 2022
Sūpāhīrō is a demo app for the talk/write on super charging your navigation 1.0 in flutter apps

navhero A simple experiment to give nav1.0 super powers. Named routing in Nav 1.0 could get messy, with large router files here and there. This projec

Samuel Abada 9 Dec 3, 2022
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Oğuzhan Atalay 156 Dec 26, 2022
[Example APPS] Basic Flutter apps, for flutter devs.

Show some ❤️ and star the repo to support the project This repository containing links of all the example apps demonstrating features/functionality/in

Pawan Kumar 17.9k Jan 2, 2023