EP.19 Animated Navigation Drawer Using Flutter

January 20, 2022

Overview

In this blog we will make an animated navigation drawer using slide drawer library and flutter.

Animation attribution https://lottiefiles.com/80238-spooky-ghost

Source Code

import 'package:lottie/lottie.dart';
import 'package:flutter/material.dart';
import 'package:slide_drawer/slide_drawer.dart';

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

  @override
  _AnimatedDrawerReelState createState() => _AnimatedDrawerReelState();
}

class _AnimatedDrawerReelState extends State<AnimatedDrawerReel> {
  final style = const TextStyle(
    color: Colors.white,
    fontSize: 22,
  );

  @override
  Widget build(BuildContext context) {
    return SlideDrawer(
      alignment: SlideDrawerAlignment.start,
      headDrawer: Container(
        alignment: Alignment.bottomCenter,
        height: MediaQuery.of(context).size.height * 0.15,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ListTile(
                leading: const CircleAvatar(
                  backgroundColor: Colors.black,
                  backgroundImage: NetworkImage(
                      'https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'),
                ),
                title: Text(
                  'StackedList',
                  style: style,
                ),
                subtitle: const Text("Software Engineer"),
                onTap: () {}),
            Container(
              margin: const EdgeInsets.only(left: 22, top: 5),
              height: 0.5,
              color: Colors.white,
              width: 275,
            )
          ],
        ),
      ),
      offsetFromRight: 35,
      backgroundColor: const Color(0xFFFEA6034),
      brightness: Brightness.dark,
      contentDrawer: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: MediaQuery.of(context).size.height * 0.6,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ListTile(
                leading: const Icon(
                  Icons.home,
                  size: 30,
                ),
                title: Text(
                  'Home',
                  style: style,
                ),
                onTap: () {}),
            const SizedBox(
              height: 20,
            ),
            ListTile(
                leading: const Icon(
                  Icons.explore,
                  size: 30,
                ),
                title: Text(
                  'Explore',
                  style: style,
                ),
                onTap: () {}),
            const SizedBox(
              height: 20,
            ),
            ListTile(
                leading: const Icon(
                  Icons.thumb_up,
                  size: 30,
                ),
                title: Text(
                  'Favourite',
                  style: style,
                ),
                onTap: () {}),
            const SizedBox(
              height: 20,
            ),
            ListTile(
                leading: const Icon(
                  Icons.shopping_bag,
                  size: 30,
                ),
                title: Text(
                  'Shop',
                  style: style,
                ),
                onTap: () {}),
            const SizedBox(
              height: 20,
            ),
            ListTile(
                leading: const Icon(
                  Icons.receipt,
                  size: 30,
                ),
                title: Text(
                  'Billing',
                  style: style,
                ),
                onTap: () {}),
            const SizedBox(
              height: 20,
            ),
            ListTile(
                leading: const Icon(
                  Icons.settings,
                  size: 30,
                ),
                title: Text(
                  'Settings',
                  style: style,
                ),
                onTap: () {}),
          ],
        ),
      ),
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            color: const Color(0xFFFFCF4E0),
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.25),
                spreadRadius: 1,
                blurRadius: 5,
                offset: const Offset(2, 4),
              ),
            ]),
        child: Lottie.network(
          'https://assets7.lottiefiles.com/private_files/lf30_ovxvpeuq.json',
          repeat: true,
          frameRate: FrameRate(60),
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}