expandable_menu 0.0.5

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

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)]

Usage

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

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> {
  @override
  Widget build(BuildContext 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),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: ExpandableMenu(
                          width: 46.0,
                          height: 46.0,
                          items: [
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            Container(),
                            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.