Skip to content
Related Articles

Related Articles

Flutter – Back Drop

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 12 May, 2022

Scaffold allowing to using back layer and front layer. Use BackdropScaffold instead of the standard Scaffold in your app. A backLayer and a frontLayer have to be defined for the backdrop to work.

Getting Started 

Adding plugin into pubspec.yaml file.

Dart




dependencies:
  backdrop: ^0.7.1


Don’t forget to get the dependency.

To use we need to  import:

Dart




import 'package:backdrop/backdrop.dart';


Simple Left Back Drop

 Syntax:  

Dart




BackdropScaffold(
  leading :   BackdropToggleButton(
              icon: AnimatedIcons.close_menu,
            )
  title : Text("Left Back Drop"),
  backLayer :  // Any widget (ListView,center..)
  frontLayer : // Any widget (ListView,center..)
  )


Example:

Dart




import 'package:flutter/material.dart';
import 'package:backdrop/backdrop.dart';
  
// main method runs the our main app
void main() {
  runApp(SimpleLeftBackDrop());
}
  
class SimpleLeftBackDrop extends StatefulWidget {
  @override
  _SimpleLeftBackDropState createState() => _SimpleLeftBackDropState();
}
  
class _SimpleLeftBackDropState extends State<SimpleLeftBackDrop> {
      
  // initiainitialize the widget
  @override
  void initState(){
    super.initState();
  }
    
  // disposing the widget
  @override
  void dispose(){
    super.dispose();
  }
    
  @override
  Widget build(BuildContext context) {
      
    // MaterialApp with debugShowCheckedModeBanner false and title
    return MaterialApp( 
      title:"Left BackDrop",
      debugShowCheckedModeBanner:false,
        
      // in home property we have BackdropScaffold 
      home:BackdropScaffold( 
          
          // in leading we have a button 
          leading:  BackdropToggleButton(  
              icon: AnimatedIcons.close_menu,
            )
          
          // title of the appbar
          title: Text("Left Backdrop"), 
          backLayer:Center(
            // backlayer body
            child:Text("BackLayer"),  
          ),
          frontLayer:Center(
            // front layer body
            child:Text("BackLayer"), 
          ),
        ),
    );
  }
}


Output: 

Explanation:

  • main is a principal method called once the program is loaded.
  • Once the Program Is Loaded runApp Will Run And Call The Class That We Created (SimpleLeftBackDrop) To Be Run.
  • This Class Is Stateful Widget To Detect Active Layer.
  • First Create Main Class SimpleLeftBackDrop And Set It’s Main State.
  • Secondly, Create Class SimpleLeftBackDropState That Extend Its State From Its Main SimpleLeftBackDrop.
  • When the Page Is Opened We’re Initializing Its State.
  • When Page Is Closed Or Disposed We’re Disposing of Its State.
  • As Flutter is Based On Widget A Widget must be Build
  • Creating An Material App That Allows Us To Use BackdropScaffold.
  • BackdropScaffold Is Replaced By Scaffold.
  • icon Position Set To Lead (Start From Left)
  • title Set The AppBar Title
  • BackLayer Display BackDrop Contents When Dropped 
  • Front Layer Is The Main Screen Visible To The User.
  • Both Layers Here Taking A Centered Text.

Simple Right Back Drop 

Syntax: 

Dart




BackdropScaffold(
  title : Text("Left Back Drop"),
  backLayer :     // Any widget (ListView,center..)
  frontLayer :  // Any widget (ListView,center..)
  actions : [
   BackDropToogleButton(
     icon : AnimationIcons.close_menu,),
  ],
  )


Example:

Dart




import 'package:flutter/material.dart';
import 'package:backdrop/backdrop.dart';
  
// main method runs the our main app.
void main() {
  runApp(SimpleLeftBackDrop());
}
  
class SimpleLeftBackDrop extends StatefulWidget {
  const SimpleLeftBackDrop({Key? key}) : super(key: key);
  
  @override
  _SimpleLeftBackDropState createState() => _SimpleLeftBackDropState();
}
  
class _SimpleLeftBackDropState extends State<SimpleLeftBackDrop> {
  @override
  void initState() {
    super.initState();
  }
  
  @override
  void dispose() {
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    // MaterialApp with debugShowCheckedModeBanner
    // false and title
    return MaterialApp( 
      title: "Right BackDrop",
      debugShowCheckedModeBanner: false,
        
      // BackdropScaffold with appbar
      home: BackdropScaffold( 
        appBar: AppBar(
            
          // title of appbar
          title: Text("Right Backdrop"), 
            
          // actions button that 
          // will open the backlayer
          actions: [  
            BackdropToggleButton(
              // icon
              icon: AnimatedIcons.close_menu, 
            )
          ],
        ),
          
        // body of backlayer
        backLayer: Center(  
          child: Text("BackLayer"),
        ),
          
        // body of front layer
        frontLayer: Center(  
          child: Text("FrontLayer"),
        ),
      ),
    );
  }
}


Output:

Explanation:

  • main is a principal method called once the program is loaded.
  • Once the Program Is Loaded runApp Will Run And Call The Class That We Created (SimpleRight BackDrop) To Be Run.
  • This Class Is Stateful Widget To Detect Active Layer.
  • First Create Main Class SimpleRight BackDrop And Set It’s Main State.
  • Secondly, Create Class SimpleRight BackDropState That Extend Its State From Its Main SimpleRight BackDrop.
  • When a Page Is Opened We’re Initializing Its State -When a Page Is Closed Or Disposed We’re Disposing of Its State.
  • As Flutter is Based On Widget A Widget must be Built.
  • Creating An Material App That Allows Us To Use BackdropScaffold.
  • BackdropScaffold Is Replaced By Scaffold.
  • Now To Set Icon To The Right We Use actions (Floating Item To The Right) That Take The Toggle Button That Open The BackDrop Menu.
  • title Set The AppBar Title.
  • BackLayer Display BackDrop Contents When Dropped.
  • FrontLayer Is The Main Screen Visible To The User.
  • Both Layers Here Taking A Centered Text.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!