I have a simple flutter application. It's ok, but I'm trying to understand how onHover: (event){...} works, why "event" contains data? How can I make my own widget have function parameters like that?

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double dx = 0, dy = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      home: Scaffold(
        body: MouseRegion(
          onHover: (event) {
            setState(() {
              dx = event.localPosition.dx;
              dy = event.localPosition.dy;
            });
          },
          child: Center(
            child: Text('$dx'),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

To create your own onChange, or the like we can use ValueChanged.

For example, taking a look at the code for a TextButton() we see:

const TextButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHover,

the onHover uses a ValueChanged.

You can implement your own valueChanged using this example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Buttons(
            onHover: (value) {
              // Do something
              print(value);
            },
          ),
        ),
      ),
    );
  }
}

class Buttons extends StatelessWidget {
  final ValueChanged<String> onHover;
  Buttons({Key? key, required this.onHover}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
            onPressed: () {
              onHover('Pressed');
            },
            child: Text("Click me")),
        Text('hi')
      ],
    );
  }
}

CodePudding user response：

So this how we pass the data from the widget which is at the bottom of the widget tree. It's more related to passing the value from bottom to top using callback functions. Below is the simple example to demonstrate this data sharing.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  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: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _parentData = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          "Parent State Value: "   _parentData.toString(),
        ),
        ChildWidgetExample(
          callbackFn: (data) {
            setState(() {
              _parentData = data;
            });
          },
        )
      ],
    );
  }
}

class ChildWidgetExample extends StatefulWidget {
  final Function(int) callbackFn;
  const ChildWidgetExample({
    Key? key,
    required this.callbackFn,
  }) : super(key: key);

  @override
  State<ChildWidgetExample> createState() => _ChildWidgetExampleState();
}

class _ChildWidgetExampleState extends State<ChildWidgetExample> {
  int data = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          data.toString(),
        ),
        const SizedBox(
          height: 30,
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              data  ;
            });
            widget.callbackFn(data);
          },
          child: const Text("Press"),
        )
      ],
    );
  }
}

CodePudding user response：

In Flutter you can declare Functions with parameters.

void Function(String foo) myFunction;

So you declare in as a variable in your widget component.

MyWidget({required this.myFunction});

Then when you have to call this component you can write :

...
child : MyWidget(myFunction: (String foo) {},),