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> {
// initialize 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.
Recommended Articles