Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Material Design

How To Add a Backdrop in Flutter (Material Design)

August 6, 2020
in Material Design
4 min read
backdrops flutter

Flutter BackDrop

This widget is in active development. Wait for the stable v1.0. Any contribution, idea, criticism or feedback is very much welcomed.

RELATED FLUTTER RESOURCES

A Contextual Action/App Bar Implementation for Flutter

A Flutter App for Tracking Funds/Money – Budget Tracker

Flutter Custom Fonts and How to Style Text

back_drop package

I recently got introduced to flutter and its implementation of material design. After going through some sample implementation on the internet I discovered the Backdrop component from material design guidelines. I found it to be a very useful UI element with many use-cases. Sadly, there isn’t a backdrop widget in the official material package.

ADVERTISEMENT

According to Material.io; A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

1. Back layer
2. Front layer

Hence, I decided to implement this component and published it as a package with supporting widgets. This post demonstrates how to use the package and its widgets to implement a basic backdrop component with flutter.

BackdropScaffold

Anyone familiar with flutter will be aware of the magical Scaffold widget which builds the basic app structure for you. Similarly BackdropScaffold widget of the backdrop package builds the layout for you with a given body and backlayer.

Add backdrop as dependecy

Add this to your package’s pubspec.yaml file:

dependencies:
   backdrop: ">=0.0.0 <0.1.0"

Install package from command line:

$ flutter packages get

Import backdrop in your Dart code:

import 'package:backdrop/backdrop.dart';

Implementation example

First, lets see what arguments can be passed to theBackdropScaffold widget within the backdrop package.

  • title – (default=null) title for appbar
  • backpanel– (default=null) widget to be displayed in backlayer
  • body– (default=null) widget to be displayed in frontlayer
  • actions– (default=null) list of widgets for appbar
  • headerHeight– (default=32.0) height of frontlayer to be visible when backlayer is active
  • controller– (default=initialised internally) AnimationController object can be optionally passed from outside the widget

Finally, lets write down basic example for the backdrop using this widget.

import 'package:backdrop/backdrop.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Backdrop Demo',
      home: BackdropScaffold(
        title: Text("Backdrop Example"),
        backpanel: Center(
          child: Text("Backpanel"),
        ),
        body: Center(
          child: Text("Body"),
        ),
      ),
    );
  }
}

That’s it!! BackdropScaffold makes it really easy for you.

Contribution

Check proposal documents for v1.0 and web&desktop milestones before you begin with any contibution.

  1. You’ll need a GitHub account.
  2. Fork the repository.
  3. Pick an issue to work on from issue tracker.
  4. Implement it.
  5. Add your name and email in authors section in pubspec.yaml file.
  6. Send merge request.
  7. Star this project.
  8. Become a hero!!

GitHub

https://github.com/daadu/backdrop

RelatedFlutter Resource

A Contextual Action/App Bar Implementation for Flutter
App Bar

A Contextual Action/App Bar Implementation for Flutter

August 19, 2020
A Flutter App for Tracking Funds/Money – Budget Tracker
Finance App

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
HOW TO USE THE FLUTTER TEXTFIELD
Flutter Widgets

How to use the Flutter Text Field and Input Widget

July 13, 2020
FLUTTER-FUTUER-APP-DEVELOPMENT
Dart

Why Google Flutter Is the Future of Mobile App Development

July 12, 2020
Customizable App Introduction Slider for Flutter (OnBoarding)
Flutter Widgets

Customizable App Introduction Slider for Flutter (OnBoarding)

July 2, 2020
Next Post
Flutter Animated Search App Bar (Example + Implementation)

Flutter Animated Search App Bar (Example + Implementation)

Flutter Animated Bottom Navigation Bar

Fancy Animated Bottom Navigation Bar in Flutter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

add flutter image to app

Image Widget – Everything You Need To Know

July 12, 2020

A Full News Blog App made with Flutter + Source Code

September 15, 2020
Flutter Animated Search App Bar (Example + Implementation)

Flutter Animated Search App Bar (Example + Implementation)

August 6, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • How to use the Flutter Text Field and Input Widget

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In