Back panel color transition

[biel-correa]

Is your feature request related to a problem? Please describe. I can't make the back screen be the way I like, I thought on wrapping everything in a container but it also changed the color when it is behind the front panel.

Describe the solution you'd like I think a parameter for the transition duration and another 2 for the initial color and the final color would solve it.

Describe alternatives you've considered As I said when you wrap the widget with a container and add a color to it, it also affects the view when the front panel is on top

[WieFel]

@bielzim0 can you please share some screenshot and minimalistic code snippet of your tryings?

[daadu]

@bielzim0 set backLayerBackgroundColor in BackdropScaffold to Colors.White, you are getting a mixed color because it is set to Theme.accentColor by default.

[biel-correa]

@bielzim0 set backLayerBackgroundColor in BackdropScaffold to Colors.White, you are getting a mixed color because it is set to Theme.accentColor by default.

I'll try this as soon as I get home

[biel-correa]

@bielzim0 can you please share some screenshot and minimalistic code snippet of your tryings?

I'll send as soon as I get home

[biel-correa]

@bielzim0 can you please share some screenshot and minimalistic code snippet of your tryings?

I want this pink highlight to transform in white

the end I have:

the end I want:

I can't share code because I don't have any ideas for now

[WieFel]

@bielzim0 I am not sure if I understood your problem correctly.

1. If your problem is the pink corners showing on the back layer: Then the simple solution to it is to use a clipped back layer like this:

   backLayer: ClipRRect(
   borderRadius: BorderRadius.only(
   topLeft: Radius.circular(16.0),
   topRight: Radius.circular(16.0),
   ),
   child: Container(
   color: Colors.pink,
   child: Center(
     child: Text("Back Layer"),
   ),
   ),
   ),

   Which looks like this:

2. If you want to animate the color of the back layer according to the back layer being revealed/concealed, you can do the following. Use your own AnimationController and pass it to BackdropScaffold. Use the same AnimationController to animate the color on your back layer's Container. Complete code example:

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

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

class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); }

class _MyAppState extends State with SingleTickerProviderStateMixin { AnimationController _controller; Animation _colorAnimation;

@override void initState() { _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 500), value: 1.0); // Duration can be modified as wanted. Backdrop's default is 200ms. _colorAnimation = ColorTween(begin: Colors.pink, end: Colors.white).animate(_controller); super.initState(); }

@override Widget build(BuildContext context) { return MaterialApp( title: 'Backdrop Demo', home: BackdropScaffold( controller: _controller, appBar: BackdropAppBar( title: Text("Backdrop Example"), actions: [ BackdropToggleButton( icon: AnimatedIcons.list_view, ) ], ), backLayer: AnimatedBuilder( animation: _colorAnimation, builder: (context, child) => Container( color: _colorAnimation.value, child: Center(child: Text("Back Layer")), )), subHeader: BackdropSubHeader( title: Text("Sub Header"), ), frontLayer: Center( child: Text("Front Layer"), ), ), ); }

@override void dispose() { _controller.dispose(); super.dispose(); } }

Looks as follows:
<img width="40%" alt="gif" src="https://user-images.githubusercontent.com/8345062/104810116-ff307500-57f2-11eb-92c3-896cca000c84.gif"/>

[biel-correa]

@bielzim0 I am not sure if I understood your problem correctly.

1. If your problem is the pink corners showing on the back layer: Then the simple solution to it is to use a clipped back layer like this:

backLayer: ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(16.0),
    topRight: Radius.circular(16.0),
  ),
  child: Container(
    color: Colors.pink,
    child: Center(
      child: Text("Back Layer"),
    ),
  ),
),

Which looks like this:

1. If you want to animate the color of the back layer according to the back layer being revealed/concealed, you can do the following. Use your own AnimationController and pass it to BackdropScaffold. Use the same AnimationController to animate the color on your back layer's Container. Complete code example:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> _colorAnimation;

  @override
  void initState() {
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 500), value: 1.0);  // Duration can be modified as wanted. Backdrop's default is 200ms.
    _colorAnimation =
        ColorTween(begin: Colors.pink, end: Colors.white).animate(_controller);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Backdrop Demo',
      home: BackdropScaffold(
        controller: _controller,
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
            BackdropToggleButton(
              icon: AnimatedIcons.list_view,
            )
          ],
        ),
        backLayer: AnimatedBuilder(
            animation: _colorAnimation,
            builder: (context, child) => Container(
                  color: _colorAnimation.value,
                  child: Center(child: Text("Back Layer")),
                )),
        subHeader: BackdropSubHeader(
          title: Text("Sub Header"),
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Looks as follows:

The second was what I wanted to do, thank you so much.