Visibility widget do not change ui

Malak
August 20, 2023
130 views
1 vote
2 Answers

Hi i have myWidget and i pass the focusNode var to it from EditPopUpParent() class, when i am focusing TextField value of focusNode.hasFocus is changing and i can see it by printing it out by ElevatedButton but Container do not show up, why is that?

import 'package:flutter/material.dart';
import 'package:prakty/providers/edituser.dart';
import 'package:provider/provider.dart';

class EditPopUpParent extends StatefulWidget {
  const EditPopUpParent({super.key});

  @override
  State<EditPopUpParent> createState() => _EditPopUpParentState();
}

class _EditPopUpParentState extends State<EditPopUpParent> {
  @override
  Widget build(BuildContext context) {
    FocusNode focusNode = FocusNode();

    List<Widget> editWidgetTypes = [
      Container(),
      editSkillSet(context, focusNode),
    ];

    return Container(child: editWidgetTypes[1]);
  }

  Widget editSkillSet(context, FocusNode focusNode) {
    var skillBoxes = Provider.of<EditUser>(context).skillBoxes;

    final TextEditingController skillCont =
        TextEditingController(text: skillBoxes[1].keys.single);
    return Column(
      children: [
        Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Visibility(
              visible: focusNode.hasFocus,
              child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                  child: const Icon(Icons.abc))),
          TextField(
              controller: skillCont,
              textInputAction: TextInputAction.done,
              focusNode: focusNode,
              decoration:
                  const InputDecoration.collapsed(hintText: 'Type Something')),
          ElevatedButton(
              onPressed: () {
                print(focusNode.hasFocus);
              },
              child: const Icon(Icons.check))
        ]),
      ],
    );
  }
}

Answers

Seems like you are expecting to counter the Visibility widget on press of ElevatedButton

 class _EditPopUpParentState extends State<EditPopUpParent> {
  FocusNode focusNode = FocusNode(); // Move this outside build

  @override
  Widget build(BuildContext context) {
    List<Widget> editWidgetTypes = [
      Container(),
      editSkillSet(context, focusNode),
    ];

    return Container(child: editWidgetTypes[1]);
  }

  Widget editSkillSet(context, FocusNode focusNode) {
    var skillBoxes = Provider.of<EditUser>(context).skillBoxes;

    final TextEditingController skillCont =
        TextEditingController(text: skillBoxes[1].keys.single);
    return Column(
      children: [
        Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Visibility(
            visible: focusNode.hasFocus,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: const Icon(Icons.abc),
            ),
          ),
          TextField(
            controller: skillCont,
            textInputAction: TextInputAction.done,
            focusNode: focusNode,
            decoration: const InputDecoration.collapsed(hintText: 'Type Something'),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {}); // This line will make sure to rebuild the widget tree on press event
              print(focusNode.hasFocus);
            },
            child: const Icon(Icons.check),
          ),
        ]),
      ],
    );
  }
}

The issue is that you are creating the FocusNode locally within the build method of _EditPopUpParentState. This means a new FocusNode is created each time the build runs.

Try:

class EditPopUpParent extends StatefulWidget {
  const EditPopUpParent({super.key});

  @override
  State<EditPopUpParent> createState() => _EditPopUpParentState();
}

class _EditPopUpParentState extends State<EditPopUpParent> {


 late FocusNode focusNode;

 @override
  void initState() {
    super.initState();
    focusNode = FocusNode(); 
  }

  @override
  Widget build(BuildContext context) {

    List<Widget> editWidgetTypes = [
      Container(),
      editSkillSet(context, focusNode),
    ];

    return Container(child: editWidgetTypes[1]);
  }

  Widget editSkillSet(context, focusNode) {
    var skillBoxes = Provider.of<EditUser>(context).skillBoxes;

    final TextEditingController skillCont =
        TextEditingController(text: skillBoxes[1].keys.single);
    return Column(
      children: [
        Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Visibility(
              visible: focusNode.hasFocus,
              child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                  child: const Icon(Icons.abc))),
          TextField(
              controller: skillCont,
              textInputAction: TextInputAction.done,
              focusNode: focusNode,
              decoration:
                  const InputDecoration.collapsed(hintText: 'Type Something')),
          ElevatedButton(
              onPressed: () {
                print(focusNode.hasFocus);
              },
              child: const Icon(Icons.check))
        ]),
      ],
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Visibility widget do not change ui | Flutter

Answers