Flutter – Make Menu Or Widget On Keyboard Top 12 Favorites

Flutter provides a framework for creating custom widgets that can be used to create menus or keyboard widgets. Here’s a brief overview of how you can create such widgets:

1. Creating a menu widget:

• Start by creating a custom widget that will display your menu items.
• Use a GestureDetector or InkWell widget to detect a tap on the widget that will trigger the menu to appear.
• Display your menu items using a PopupMenuButton or DropdownButton widget.
• Use the onSelected property to handle user selection.

Here’s some sample code to get you started:

dart
class CustomMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        showMenu(
          context: context,
          position: RelativeRect.fromLTRB(0, 100, 0, 0),
          items: [
            PopupMenuItem(
              child: Text('Menu item 1'),
              value: 'item1',
            ),
            PopupMenuItem(
              child: Text('Menu item 2'),
              value: 'item2',
            ),
            PopupMenuItem(
              child: Text('Menu item 3'),
              value: 'item3',
            ),
          ],
          elevation: 8.0,
        ).then((value) {
          // Handle menu item selection
          print(value);
        });
      },
      child: Container(
        child: Text('Open menu'),
      ),
    );
  }
}

1. Creating a custom keyboard widget:

• Create a custom widget that extends the StatelessWidget or StatefulWidget class.
• Use GestureDetector or InkWell to detect user input on the keys.
• Use TextEditingControllers to handle text input.

Here’s some sample code to get you started:

dart
class CustomKeyboard extends StatefulWidget {
  final TextEditingController textController;

  CustomKeyboard({required this.textController});

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

class _CustomKeyboardState extends State<CustomKeyboard> {
  String _inputValue = '';

  void _onKeyPressed(String value) {
    setState(() {
      _inputValue += value;
      widget.textController.text = _inputValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            CustomKey(
              value: '1',
              onPressed: () => _onKeyPressed('1'),
            ),
            CustomKey(
              value: '2',
              onPressed: () => _onKeyPressed('2'),
            ),
            CustomKey(
              value: '3',
              onPressed: () => _onKeyPressed('3'),
            ),
          ],
        ),
        Row(
          children: [
            CustomKey(
              value: '4',
              onPressed: () => _onKeyPressed('4'),
            ),
            CustomKey(
              value: '5',
              onPressed: () => _onKeyPressed('5'),
            ),
            CustomKey(
              value: '6',
              onPressed: () => _onKeyPressed('6'),
            ),
          ],
        ),
        Row(
          children: [
            CustomKey(
              value: '7',
              onPressed: () => _onKeyPressed('7'),
            ),
            CustomKey(
              value: '8',
              onPressed: () => _onKeyPressed('8'),
            ),
            CustomKey(
              value: '9',
              onPressed: () => _onKeyPressed('9'),
            ),
          ],
        ),
        Row(
          children: [
            CustomKey(
              value: 'clear',
              onPressed: () => setState(() {
                _inputValue = '';
                widget.textController.clear();
              }),
            ),
            CustomKey(
              value: '0',
              onPressed: () => _onKeyPressed('0'),
            ),