how to animate logo transition from appbar to drawer?

Viewed 162

I want to have an animated staggered transition from the blue logo to the black logo when I open or slide the drawer.

Blue logo in SilverAppBar:

enter image description here

Black flutter logo:

enter image description here

I wonder if there is a way to make an animation to move the blue flutter logo to the drawer menu when clicking on hamburger menu or sliding the drawer and also while its moving i want it to change color, how can i do this?

Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  bool _pinned = true;
  bool _snap = false;
  bool _floating = false;

// [SliverAppBar]s are typically used in [CustomScrollView.slivers], which in
// turn can be placed in a [Scaffold.body].
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: IconButton(
                icon: const Icon(Icons.menu,
                    size: 40), // change this size and style
                onPressed: () => _scaffoldKey.currentState?.openDrawer(),
              ),
              actions: const [
                Padding(
                  padding: EdgeInsets.fromLTRB(5, 20, 80, 5),
                )
              ],
              pinned: _pinned,
              snap: _snap,
              floating: _floating,
              expandedHeight: 160.0,
              flexibleSpace: const FlexibleSpaceBar(
                title: FlutterLogo(
                  size: 100,
                ),
              ),
            ),
          ],
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Center(child: Image.asset("assets/cib-flutter.png")),
              )
            ],
          ),
        ));
  }
}

Edit

I think i should not use Drawer() entirely and should make a custom animated transition from the SilverAppBar view to the right?

1 Answers

use hero widget I think

Like this :

in AppBar :

Hero(
  child: Image.asset('your_img_path'),
  tag: 'logo',
)

in Drawer :

Hero(
  child: Image.asset('your_img_path'),
  tag: 'logo',
)

check that they are the same tag to make the animation

Related