map_bottom_navigation_bar.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Material App', home: Home());
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late final animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 500),
  );
  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(title: const Text('Material App Bar')),
          body: const Center(child: Text('Hello World')),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                height: 40,
                width: double.infinity,
                child: Material(
                  color: Colors.green,
                  child: InkWell(
                    onTap: () {
                      if (animationController.isCompleted) {
                        animationController.reverse();
                      } else {
                        animationController.forward();
                      }
                    },
                    child: RotationTransition(
                      turns: Tween(begin: .0, end: 0.5)
                          .animate(animationController),
                      child: const Icon(Icons.keyboard_arrow_up),
                    ),
                  ),
                ),
              ),
              SizeTransition(
                sizeFactor: animationController,
                axis: Axis.vertical,
                axisAlignment: 1.0,
                child: const SizedBox(
                  height: 200,
                  width: double.infinity,
                  child: Material(
                    color: Colors.blue,
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}