expandable_menu

Expandable menu is an expandable menu with infinite horizontal item list with high customizable ability.

Preview

Property	Description
width	This property declare width of widget when it's not expanded in initial state
height	This property declare height of widget
items	This property will contains items in list of menu
backgroundColor	This property declare background color of widget and default value is [Color(0xFF4B5042)]
iconColor	This property declare icon color of both icon(Arrow icon and Hamburger icon)
itemContainerColor	This property declare item background color and if it's be null default value is [Colors.white.withOpacity(.4)]
animationSpeed	This property declare animationspeed, default value is [500]
controller	This property declare controller, if you want to remotely trigger open/close functions. Defaults to [null]

Usage

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late ExpandableMenuController controller;

  @override
  void initState() {
    super.initState();
    controller = ExpandableMenuController();
  }

  @override
  Widget build(BuildContext context) {
    var test = Directionality.of(context);

    return Scaffold(
      backgroundColor: const Color(0xFF9FB373),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 100.0),
        children: [
          Center(
              child: SizedBox(
                height: 400.0,
                width: 290.0,
                child: Stack(
                  children: [
                    Positioned(
                      top: 23.0,
                      right: 23.0,
                      left: 23.0,
                      bottom: 0.0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(16.0),
                          ),
                        ),
                        child:
                        Column(
                          children: [
                            const SizedBox(height: 20),
                            TextButton(
                                onPressed: () {
                                  controller.open();
                                },
                                child: const Text("Open menu")),
                            TextButton(
                                onPressed: () {
                                  controller.close();
                                },
                                child: const Text("Close menu")),

                            TextButton(
                                onPressed: () {
                                  controller.toggle();
                                },
                                child: const Text("Toggle menu")),
                          ],
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 46.0,
                          height: 46.0,
                          controller: controller,
                          items: [
                            Container(),
                            Container(),
                            RawMaterialButton(
                              onPressed: () {
                                controller.close();
                              },
                              shape: const CircleBorder(),
                              child: const Icon(
                                Icons.arrow_right_alt,
                              ),
                            ),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                          ],
                        )),

                  ],
                ),
              )),
          const SizedBox(
            height: 40,
          ),
          Center(
              child: SizedBox(
                height: 200.0,
                width: 200.0,
                child: Stack(
                  children: [
                    Positioned(
                      top: 20.0,
                      right: 20.0,
                      left: 20.0,
                      bottom: 0.0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(16.0),
                          ),
                        ),
                      ),
                    ),
                    const Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 40.0,
                          height: 40.0,
                          items: [
                            Icon(
                              Icons.add,
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.access_alarm,
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.accessible_forward,
                              color: Colors.white,
                            ),
                            Icon(
                              Icons.accessibility_new_sharp,
                              color: Colors.white,
                            ),
                          ],
                        )),
                  ],
                ),
              )),
          const SizedBox(
            height: 40,
          ),
          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 5.0),
              child: SizedBox(
                height: 200.0,
                child: Stack(
                  children: [
                    Positioned(
                      top: 20.0,
                      right: 20.0,
                      left: 20.0,
                      bottom: 0.0,
                      child: Container(
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(16.0),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 40.0,
                          height: 40.0,
                          backgroundColor: Colors.black,
                          iconColor: Colors.amber,
                          itemContainerColor: Colors.amber,
                          items: [
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                          ],
                        )),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}

thanks to https://dribbble.com/Volorf for nice design.