Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How do I change the color of some text once the user stops interacting with the screen?

I have a timer/stopwatch in my app, and the default color of the text is white. I’ve managed to change the color of the text if you long-press on the screen. In other words, if the text is white and you long-press, it will turn green, and vice versa.

What I want now is to make it so that once the user stops long-tapping the screen, that the text reverts back to white. For example, say the user has white text. Once he long-presses on the screen, the text turns green, but as soon as he lifts his finger, the text should revert back to white. I’ve tried multiple things, such as wrapping my TextButton() in a GestureDetector so as to get access to the multiple onTap options, but I cannot seem to get my desired outcome. I’m not very experienced with Flutter, so any help and explanation as to what I am doing wrong is greatly appreciated.

Code for the timer text:

              child: GestureDetector(
                  // onTapDown: (details) => timercolor = Colors.white,
                  child: TextButton(
                    onLongPress: (){
                      setState(() {
                        timercolor = timercolor == Colors.white
                            ? Colors.green.shade600
                            : Colors.white;
                        startStopWatch();
                      });
                    },
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.all(Colors.transparent),
                    ),
                    onPressed: startStopWatch,
                    child: Padding(
                      padding: const EdgeInsets.only(top: 210.0, bottom: 360),
                      child: Text(
                        stopWatchText,
                        style:  TextStyle(fontSize: 50, color: timercolor),
                      ),
                    ),
                  ),
                ),
Tags:

3

Answers


  1. 0 
    child: InkWell(
  onLongPress: () {
    setState(() {
      timercolor = Colors.green.shade600;
    });
  },
  onTap: () {},  // This is left empty intentionally.
  onHighlightChanged: (isHighlighted) {
    if (!isHighlighted) {
      setState(() {
        timercolor = Colors.white;
        startStopWatch();
      });
    }
  },
  child: Padding(
    padding: const EdgeInsets.only(top: 210.0, bottom: 360),
    child: Text(
      stopWatchText,
      style: TextStyle(fontSize: 50, color: timercolor),
    ),
  ),
),
    Login or Signup to reply.
  2. 0

    If you wanna change the color of the text once the user long-presses the widget (Text) and revert the normal color on-tap release, look at the following:

    GestureDetector(
    onLongPress: () {
      //change color to green
    },
    onLongPressEnd: (details) {
     // revert color back to white
    },
   child: YourWidget()
   )
    Login or Signup to reply.
  3. 0

    here is compiled solutions buddy have fun with creativity !

    import 'package:flutter/material.dart';

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

  @override
  State<xyzClass> createState() => _xyzClassState();
}

class _xyzClassState extends State<xyzClass> {
  Color textColor = Colors.white;
  String stopWatchText = "countdown";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue.withOpacity(.35),
      body: GestureDetector(
        onLongPressEnd: ((details) {
          updateTextColor(Colors.white);
        }),
        onLongPressStart: (details) {
          updateTextColor(Colors.green);
        },
        child: TextButton(
          style: ButtonStyle(
            overlayColor: MaterialStateProperty.all(Colors.transparent),
          ),
          onPressed: startStopWatch,
          child: Padding(
            padding: const EdgeInsets.only(top: 210.0, bottom: 360),
            child: Text(
              stopWatchText,
              style: TextStyle(fontSize: 50, color: textColor),
            ),
          ),
        ),
      ),
    );
  }

  updateTextColor(Color value) {
    setState(() {
      textColor = value;
    });
  }

  startStopWatch() {}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search