Making a custom Popup card with a color picker inside in Flutter

Viewed 219

I'm kind of new to Flutter, been studying it for a month now. I decided to implement a color picker in my app the way Samsung did it in their calendar app, but I want it to be vertical(the GIF is below). I tried doing it via PopupMenuButton, but it turned out that popupmenu has a width restriction or smth, so I can make it wider, but I can't make it narrower than a certain fixed width. Does anyone how should I implement this kind of widget?

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

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

class _ColorSelectorButtonState extends State<ColorSelectorButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 25,
      width: 25,
      decoration: BoxDecoration(
        color: Theme.of(context).secondaryHeaderColor,
        shape: BoxShape.circle 
      ),
      child: TextButton(
        child: Container(height: 25, width: 25, color: Theme.of(context).secondaryHeaderColor),
        onPressed: () {
          showMenu(
            context: context, 
            position: RelativeRect.fromLTRB(0, 200, 0, 0), 
            items: [
              PopupMenuItem(child: Container(
                width: 40, 
                child: TextButton(
                  onPressed: () {}, 
                  child: Container(
                    height: 25, width: 25, 
                    decoration: BoxDecoration(
                    color: Theme.of(context).secondaryHeaderColor,
                    shape: BoxShape.circle 
                    )
                  )
                ),
              )),
              PopupMenuItem(child: Container(
                width: 40, 
                child: TextButton(
                  onPressed: () {}, 
                  child: Container(
                    height: 25, width: 25, 
                    decoration: BoxDecoration(
                    color: Theme.of(context).highlightColor,
                    shape: BoxShape.circle 
                    )
                  )
                ),
              )),
            ]
          );
        }, 
      )
    );
  }
}

Samsung colorpicker

0 Answers
Related