Flutter – Back Drop

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.