Custom Drop down

Author: TechieBlossom

custom_dropdown.dart

@@ -0,0 +1,265 @@
+import 'package:flutter/material.dart';
+
+class CustomDropdown extends StatefulWidget {
+  final String text;
+
+  const CustomDropdown({Key key, @required this.text}) : super(key: key);
+
+  @override
+  _CustomDropdownState createState() => _CustomDropdownState();
+}
+
+class _CustomDropdownState extends State<CustomDropdown> {
+  GlobalKey actionKey;
+  double height, width, xPosition, yPosition;
+  bool isDropdownOpened = false;
+  OverlayEntry floatingDropdown;
+
+  @override
+  void initState() {
+    actionKey = LabeledGlobalKey(widget.text);
+    super.initState();
+  }
+
+  void findDropdownData() {
+    RenderBox renderBox = actionKey.currentContext.findRenderObject();
+    height = renderBox.size.height;
+    width = renderBox.size.width;
+    Offset offset = renderBox.localToGlobal(Offset.zero);
+    xPosition = offset.dx;
+    yPosition = offset.dy;
+    print(height);
+    print(width);
+    print(xPosition);
+    print(yPosition);
+  }
+
+  OverlayEntry _createFloatingDropdown() {
+    return OverlayEntry(builder: (context) {
+      return Positioned(
+        left: xPosition,
+        width: width,
+        top: yPosition + height,
+        height: 4 * height + 40,
+        child: DropDown(
+          itemHeight: height,
+        ),
+      );
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      key: actionKey,
+      onTap: () {
+        setState(() {
+          if (isDropdownOpened) {
+            floatingDropdown.remove();
+          } else {
+            findDropdownData();
+            floatingDropdown = _createFloatingDropdown();
+            Overlay.of(context).insert(floatingDropdown);
+          }
+
+          isDropdownOpened = !isDropdownOpened;
+        });
+      },
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: Colors.red.shade600,
+        ),
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        child: Row(
+          children: <Widget>[
+            Text(
+              widget.text.toUpperCase(),
+              style: TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.w600),
+            ),
+            Spacer(),
+            Icon(
+              Icons.arrow_drop_down,
+              color: Colors.white,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class DropDown extends StatelessWidget {
+  final double itemHeight;
+
+  const DropDown({Key key, this.itemHeight}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        SizedBox(
+          height: 5,
+        ),
+        Align(
+          alignment: Alignment(-0.85, 0),
+          child: ClipPath(
+            clipper: ArrowClipper(),
+            child: Container(
+              height: 20,
+              width: 30,
+              decoration: BoxDecoration(
+                color: Colors.red.shade600,
+              ),
+            ),
+          ),
+        ),
+        Material(
+          elevation: 20,
+          shape: ArrowShape(),
+          child: Container(
+            height: 4 * itemHeight,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Column(
+              children: <Widget>[
+                DropDownItem.first(
+                  text: "Add new",
+                  iconData: Icons.add_circle_outline,
+                  isSelected: false,
+                ),
+                DropDownItem(
+                  text: "View Profile",
+                  iconData: Icons.person_outline,
+                  isSelected: false,
+                ),
+                DropDownItem(
+                  text: "Settings",
+                  iconData: Icons.settings,
+                  isSelected: false,
+                ),
+                DropDownItem.last(
+                  text: "Logout",
+                  iconData: Icons.exit_to_app,
+                  isSelected: true,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class DropDownItem extends StatelessWidget {
+  final String text;
+  final IconData iconData;
+  final bool isSelected;
+  final bool isFirstItem;
+  final bool isLastItem;
+
+  const DropDownItem({Key key, this.text, this.iconData, this.isSelected = false, this.isFirstItem = false, this.isLastItem = false})
+      : super(key: key);
+
+  factory DropDownItem.first({String text, IconData iconData, bool isSelected}) {
+    return DropDownItem(
+      text: text,
+      iconData: iconData,
+      isSelected: isSelected,
+      isFirstItem: true,
+    );
+  }
+
+  factory DropDownItem.last({String text, IconData iconData, bool isSelected}) {
+    return DropDownItem(
+      text: text,
+      iconData: iconData,
+      isSelected: isSelected,
+      isLastItem: true,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.vertical(
+          top: isFirstItem ? Radius.circular(8) : Radius.zero,
+          bottom: isLastItem ? Radius.circular(8) : Radius.zero,
+        ),
+        color: isSelected ? Colors.red.shade900 : Colors.red.shade600,
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      child: Row(
+        children: <Widget>[
+          Text(
+            text.toUpperCase(),
+            style: TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.w600),
+          ),
+          Spacer(),
+          Icon(
+            iconData,
+            color: Colors.white,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class ArrowClipper extends CustomClipper<Path> {
+  @override
+  Path getClip(Size size) {
+    Path path = Path();
+
+    path.moveTo(0, size.height);
+    path.lineTo(size.width / 2, 0);
+    path.lineTo(size.width, size.height);
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
+}
+
+class ArrowShape extends ShapeBorder {
+  @override
+  // TODO: implement dimensions
+  EdgeInsetsGeometry get dimensions => throw UnimplementedError();
+
+  @override
+  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
+    // TODO: implement getInnerPath
+    throw UnimplementedError();
+  }
+
+  @override
+  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
+    // TODO: implement getOuterPath
+    return getClip(rect.size);
+  }
+
+  @override
+  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
+    // TODO: implement paint
+  }
+
+  @override
+  ShapeBorder scale(double t) {
+    // TODO: implement scale
+    throw UnimplementedError();
+  }
+
+  Path getClip(Size size) {
+    Path path = Path();
+
+    path.moveTo(0, size.height);
+    path.lineTo(size.width / 2, 0);
+    path.lineTo(size.width, size.height);
+
+    return path;
+  }
+}