1

Hi I want to hover color for my text by using Flutter. But I don't know how. Can anyone show me how to do it? This is my code....

Text(
                            "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 10,
                              fontFamily: 'Poppins',
                            
                            )),

3 Answers3

4

I wrote the "HoverBuilder" widget for this effect

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

class HoverBuilder extends StatefulWidget {
  const HoverBuilder({
    required this.builder,
    Key? key,
  }) : super(key: key);

  final Widget Function(bool isHovered) builder;

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

class _HoverBuilderState extends State<HoverBuilder> {
  bool _isHovered = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (PointerEnterEvent event) => _onHoverChanged(enabled: true),
      onExit: (PointerExitEvent event) => _onHoverChanged(enabled: false),
      child: widget.builder(_isHovered),
    );
  }

  void _onHoverChanged({required bool enabled}) {
    setState(() {
      _isHovered = enabled;
    });
  }
}

Then wrap the widget as follows

HoverBuilder(
  builder: (isHovered) {
    return Text(
      "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
      style: TextStyle(
        color: isHovered ? Colors.white : Colors.grey,
        fontSize: 10,
        fontFamily: 'Poppins',        
      ),
    );
  },
)
Vitali
  • 694
  • 5
  • 12
  • And how can I use my text in this case please @Vitali –  Sep 19 '22 at 08:40
  • I added your text to the example – Vitali Sep 19 '22 at 08:44
  • I did as you say, but it shows multiply errors, @Vitali –  Sep 19 '22 at 08:55
  • Please attach the logs in a comment – Vitali Sep 19 '22 at 08:58
  • A value of type 'Null' can't be assigned to a parameter of type 'Widget Function(bool)' in a const constructor. Try using a subtype, or removing the keyword 'const'.dartconst_constructor_param_type_mismatch Invalid constant value.dart(invalid_constant) The values in a const list literal must be constants. Try removing the keyword 'const' from the list literal.dartnon_constant_list_element @Vitali –  Sep 19 '22 at 09:07
  • You have an error in your code, it's not a "HoverBuilder" error. Try removing the keyword "const" in your code – Vitali Sep 19 '22 at 09:40
2

Use Tooltip

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Tooltip Sample';

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

class TooltipSample extends StatelessWidget {
  const TooltipSample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Tooltip(
      message: 'I am a Tooltip',
      child: Text('Hover over the text to show a tooltip.'),
    );
  }
}
Katu
  • 1,296
  • 1
  • 24
  • 38
1

User MouseRegion for hover widget

MouseRegion(
  onEnter: (_) {
     //hover
  },
  onExit: (_) {
     //exit hover
  },
  child: Text(
    "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
    style: TextStyle(
      color: Colors.white,
      fontSize: 10,
      fontFamily: 'Poppins',           
    )),
 ),
Xuuan Thuc
  • 2,340
  • 1
  • 5
  • 22