kw3136
kw3136

Reputation: 111

How can i make full menu come out while mouse hover in the AppBar in flutter?

This is what I am trying to achieve: Image that I want

I've thought about onHover in MouseRegion widget and trying to see if this code works in body part.
I was going to implement this in AppBar in scaffold after i see this works in body part but i couldn't. Does anyone know correct way?

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  showMenus(BuildContext context) async {
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(100, 100, 100, 100),
      items: [
        PopupMenuItem(
          child: Text("View"),
        ),
        PopupMenuItem(
          child: Text("Edit"),
        ),
        PopupMenuItem(
          child: Text("Delete"),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.tight(Size(300.0, 200.0)),
      child: MouseRegion(
        onHover: showMenus(context),
        child: Container(
          color: Colors.lightBlueAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have entered or exited this box this many times:'),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Views: 5340

Answers (1)

J. S.
J. S.

Reputation: 9635

Your only problem is incorrectly invoking the method. On your MouseRegion onHover it should have a () => before invoking the method:

// the onHover event gives you an event object
onHover: (event) => showMenus(context),

Upvotes: 2

Related Questions