flutter_fancy_side_menu 0.0.2

Flutter side menu with scale, rotate, corner radius, and translation animations; supports LTR/RTL, gestures, mask, and customizable header/footer.

example/lib/main.dart

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

import 'package:flutter_fancy_side_menu/flutter_fancy_side_menu.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Fancy Side Menu Demo',
      locale: Locale('en'),
      supportedLocales: const [Locale('en'), Locale('ar')],
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
      home: const MyHomePage(title: 'Flutter Fancy Side Menu Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Widget> _slideMenus = [
    Row(
      children: [
        Icon(Icons.manage_accounts_rounded, color: Colors.white),
        Padding(padding: EdgeInsets.all(4)),
        Text(
          'Personal',
          style: TextStyle(
            color: Colors.white,
            decoration: TextDecoration.none,
            fontSize: 18,
          ),
        ),
      ],
    ),
    Row(
      children: [
        Icon(Icons.color_lens_rounded, color: Colors.white),
        Padding(padding: EdgeInsets.all(4)),
        Text(
          'Theme Settings',
          style: TextStyle(
            color: Colors.white,
            decoration: TextDecoration.none,
            fontSize: 18,
          ),
        ),
      ],
    ),
    Row(
      children: [
        Icon(Icons.language_rounded, color: Colors.white),
        Padding(padding: EdgeInsets.all(4)),
        Text(
          'Language',
          style: TextStyle(
            color: Colors.white,
            decoration: TextDecoration.none,
            fontSize: 18,
          ),
        ),
      ],
    ),
    Row(
      children: [
        Icon(Icons.settings_rounded, color: Colors.white),
        Padding(padding: EdgeInsets.all(4)),
        Text(
          'Other settings',
          style: TextStyle(
            color: Colors.white,
            decoration: TextDecoration.none,
            fontSize: 18,
          ),
        ),
      ],
    ),
    Row(
      children: [
        Icon(Icons.logout_rounded, color: Colors.white),
        Padding(padding: EdgeInsets.all(4)),
        Text(
          'Log Out',
          style: TextStyle(
            color: Colors.white,
            decoration: TextDecoration.none,
            fontSize: 18,
          ),
        ),
      ],
    ),
  ];

  final GlobalKey<FancySideMenuState> _globalKey =
      GlobalKey<FancySideMenuState>();

  final bool mask = true;

  @override
  Widget build(BuildContext context) {
    return FancySideMenu(
      key: _globalKey,
      items: _slideMenus,
      onSideMenuTap: (index) => {debugPrint('tap $index')},
      mask: mask,
      header: SizedBox(
        width: 180,
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(40),
              child: Container(
                color: Colors.white,
                padding: EdgeInsets.all(10),
                child: Image.network(
                  'https://storage.googleapis.com/cms-storage-bucket/icon_flutter.0dbfcc7a59cd1cf16282.png',
                  width: 60,
                  height: 60,
                  fit: BoxFit.fitWidth,
                ),
              ),
            ),
            Padding(padding: EdgeInsets.all(8)),
            Text(
              'Hi, developer',
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18,
              ),
            ),
          ],
        ),
      ),
      footer: Padding(
        padding: EdgeInsets.only(left: 20, bottom: 20),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Column(
              children: [
                Text(
                  '26℃',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    decoration: TextDecoration.none,
                  ),
                ),
                Padding(padding: EdgeInsets.all(2)),
                Text(
                  'Beijing',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    decoration: TextDecoration.none,
                  ),
                ),
              ],
            ),
            Padding(padding: EdgeInsets.all(10)),
            Column(
              children: [
                Icon(Icons.sunny, color: Colors.white, size: 20),
                Padding(padding: EdgeInsets.all(2)),
                Text(
                  'Sun',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    decoration: TextDecoration.none,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      body: Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: Container(
          width: double.infinity,
          color: Colors.white,
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Directionality(
              textDirection: Directionality.of(context),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TextButton(
                    onPressed: () => _globalKey.currentState!.toggle(),
                    style: ButtonStyle(
                      backgroundColor: WidgetStatePropertyAll(
                        Color.fromRGBO(145, 204, 117, 1),
                      ),
                    ),
                    child: Text(
                      'Toggle',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  if (mask)
                    Text(
                      'mask is true\nthe page is no\'t can tap',
                      style: TextStyle(color: Colors.black),
                    ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}