Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter change color when button gets clicked

I am working on an app where the user is able to expand and collapse text.
I want to text at the bottom to be blurred. As soon as the user expands the text the text should be displayed normal. When the text gets collapsed again, I want the text at the bottom again to be blurred.
I solved it the following way. My problem is that when the user collapse the text, the text at the bottom is not blurred again.

Here is my code:

class ExpandableText extends StatefulWidget {
  final String text;
  const ExpandableText({Key? key, required this.text}) : super(key: key);

  @override
  State<ExpandableText> createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  late String firstHalf;
  late String secondHalf;

  bool hiddenText = true;

  Color fadeStrong = Colors.black.withOpacity(0.8);
  Color fadeWeak = Colors.black.withOpacity(0.6);

  // double textHeight = Dimensions.screenHight / 5.63;
  double textHeight = 180;

  @override
  void initState() {
    super.initState();
    if (widget.text.length > textHeight) {
      firstHalf = widget.text.substring(0, textHeight.toInt());
      secondHalf =
          widget.text.substring(textHeight.toInt() + 1, widget.text.length);
    } else {
      firstHalf = widget.text;
      secondHalf = "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
        child: secondHalf.isEmpty
            ? Text(
                firstHalf,
                style: const TextStyle(color: Colors.white),
              )
            : Column(
                children: [
                  Text(
                    hiddenText ? ("$firstHalf...") : (firstHalf + secondHalf),
                    style: const TextStyle(color: Colors.white),
                  ),
                  InkWell(
                    onTap: () {
                      setState(() {
                        hiddenText = !hiddenText;
                        hiddenText
                            ? fadeStrong = fadeStrong
                            : fadeStrong = Colors.transparent;
                    hiddenText
                        ? fadeWeak = fadeWeak
                        : fadeWeak = Colors.transparent;
                      });
                    },
                    child: Row(
                      children: [
                        hiddenText
                            ? const Text(
                                'Read more',
                                style: TextStyle(color: Colors.blue),
                              )
                            : const Text('Read less',
                                style: TextStyle(color: Colors.blue)),
                        Icon(
                          hiddenText
                              ? Icons.arrow_drop_down
                              : Icons.arrow_drop_up_outlined,
                          color: Colors.blue,
                        )
                      ],
                    ),
                  )
                ],
              ),
      ),
      Container(
        margin: const EdgeInsets.only(top: 52),
        height: 20,
        color: fadeStrong,
      ),
      Container(
        margin: const EdgeInsets.only(top: 32),
        height: 20,
        color: fadeWeak,
      ),
    ]);
  }
}

Text collapsed

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Text expanded

Text collapsed again

>Solution :

When you overrides the color on tap event, that lose the initial reference

               onTap: () {
                  setState(() {
                    hiddenText = !hiddenText;
                    hiddenText
                        ? fadeStrong = fadeStrong
                        : fadeStrong = Colors.transparent;
                hiddenText
                    ? fadeWeak = fadeWeak
                    : fadeWeak = Colors.transparent;
                  });
                },

maybe you should try something like that will help you

               onTap: () {
                  setState(() {
                    hiddenText = !hiddenText;
                    hiddenText
                        ? fadeStrong = Colors.black.withOpacity(0.8)
                        : fadeStrong = Colors.transparent;
                hiddenText
                    ? fadeWeak = Colors.black.withOpacity(0.6)
                    : fadeWeak = Colors.transparent;
                  });
                },
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading