Backdrop In Flutter

Backdrop In Flutter :

Backdrop In Flutter : today we will learn about backdrop in flutter.

Backdrop is a StatefulWidget whose state manages the position and animation of the front layer. Let’s start by focusing on Backdrop in flutter.

The widget consists of a moveable front layer, stacked on top of an immovable back layer. The backLayer widget is placed first in the Stack widget so it appears underneath, followed by _BackdropPanel containing the frontLayer, wrapped in a SlideTransition.

LayoutBuilder determines how much vertical space is available at run time, which can vary by screen size and density. This is then used to work out how much of the back layer is covered by the front layer when open. The Tween defines the open and closed positions of the front layer and uses the AnimationController to manage motion.

The BackdropPanel widget implements the front layer with a Column containing the header, divider, and child. The child widget is wrapped in an Expanded to ensure that it fills the available space.

The Material widget decorates the panel with a drop shadow and beveled edges using BorderRadius.

Screenshot 1 :

Backdrop In Flutter

Screenshot 2 :

Backdrop In Flutter


import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(primarySwatch:,
      home: new BackdropPage(),

class BackdropPage extends StatefulWidget {
  _BackdropPageState createState() => new _BackdropPageState();

class _BackdropPageState extends State<BackdropPage>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  void initState() {
    controller = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 100), value: 1.0);

  void dispose() {

  bool get isPanelVisible {
    final AnimationStatus status = controller.status;
    return status == AnimationStatus.completed ||
        status == AnimationStatus.forward;

  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: new Text("BackDrop"),
          elevation: 0.0,
          leading: new IconButton(
              icon: AnimatedIcon(
                  icon: AnimatedIcons.home_menu, progress: controller.view),
              onPressed: () {
                controller.fling(velocity: isPanelVisible ? -1.0 : 1.0);
        body: TwoPanels(
          controller: controller,

class TwoPanels extends StatefulWidget {
  final AnimationController controller;

  _TwoPanelsState createState() => _TwoPanelsState();

class _TwoPanelsState extends State<TwoPanels> {
  static const header_height = 32.0;

  Animation<RelativeRect> getPanelAnimation(BoxConstraints constraints) {
    final height = constraints.biggest.height;
    final backPanelHeight = height - header_height;
    final frontPanelHeight = -header_height;

    return new RelativeRectTween(
            begin: new RelativeRect.fromLTRB(
                0.0, backPanelHeight, 0.0, frontPanelHeight),
            end: new RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0))
        .animate(new CurvedAnimation(
            parent: widget.controller, curve: Curves.linear));

  Widget bothPanels(BuildContext context, BoxConstraints constraints) {
    final ThemeData theme = Theme.of(context);

    return new Container(
        child: new Stack(children: <Widget>[
      new Container(
        color: theme.primaryColor,
        child: new Center(
            child: new Text(
          "BACK Panel",
          style: TextStyle(fontSize: 25.0, color: Colors.white),
      new PositionedTransition(
          rect: getPanelAnimation(constraints),
          child: new Material(
              elevation: 12.0,
              borderRadius: new BorderRadius.only(
                  topLeft: new Radius.circular(16.0),
                  topRight: new Radius.circular(16.0)),
              child: new Column(children: <Widget>[
                new Container(
                    height: header_height,
                    child: new Center(
                        child: new Text(
                      "SHOP HERE",
                      style: Theme.of(context).textTheme.button,
                new Expanded(
                    child: new Center(
                  child: new Text("FRONT PANEL",
                      style: TextStyle(fontSize: 25.0, color:,

  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: bothPanels,

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit