flutter 小部件中的可见性没有改变

Question

Whenever I try to change the state of the visibility, setState does not work although messages are corrected being printed in the console. This is my floating action button wrapped around with a couple of widgets. The problem is whenever I click on it, the isVisible property should have been changed to false and it should have been invisible but that doesnot happen. "Pressed undo" is printed in the console.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:maya/screens/profile.dart';
import 'package:maya/screens/screen.dart';
import 'package:maya/screens/settings.dart';
import 'package:avatar_glow/avatar_glow.dart';
import 'package:tcard/tcard.dart';
import 'package:glass_kit/glass_kit.dart';
import 'package:fluttertoast/fluttertoast.dart';

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  double likeBtnWidth = 75;
  double dislikeBtnWidth = 75;
  TCardController _controller = TCardController();
  int cardNumber;
  bool isVisible;   //here is the declaration



  Widget _layoutDetails() {
    @override
    Orientation orientation = MediaQuery.of(context).orientation;

      setState(() {
        likeBtnWidth = 150;
        dislikeBtnWidth = 150;
      });

      List<String> images = [
        'assets/images/girls/girl1.png',
        'assets/images/girls/girl2.png',
        'assets/images/girls/girl3.png',
        'assets/images/girls/girl4.png',
        'assets/images/girls/girl5.png',
        'assets/images/girls/girl6.png',
      ];

      List<String> personalDetails = [
        'Prakriti Regmi%20%Lets read Murakami together.%Chabahil (1 mi away)',
        'Dristi Sigdel%19%Belle áme%Sundhara (2 mi away)',
        'Prajita Upreti%19%Here to make friends.%Makalbari (2.3 mi away)',
        'Sugandhi C.%21%Not looking for any drama.%Bhaktapur (7 mi away)',
        "Pawana Shrestha%20%Why am I here for?%Attarkhel",
        "Tanuja Shrestha%21%Hi there! ♐︎%Dakshin Dhoka"
      ];

      List<Widget> cards = List.generate(
        images.length < personalDetails.length
            ? images.length
            : personalDetails.length,
        (int index) {
          return GlassContainer.frostedGlass(
            height: 800,
            width: 800,

            child: Padding(
                padding: const EdgeInsets.fromLTRB(30, 20, 30, 0),
                child: Container(

                  child: Stack(
                    children: [
                      Column(
                        children: [
                          SizedBox(
                            height: 20,
                          ),
                          Center(child: _picture(images[index])),
                          SizedBox(
                            height: 30,
                          ),
                          _bio(personalDetails[index].split("%")),
                          SizedBox(
                            height: 10,
                          ),
                          _likeUnlikeButtons()
                        ],
                      ),
                      Positioned(
                        left: 0,
                        bottom: 15,
                        child: SizedBox(
                          width: 30,
                          child: Visibility(
                            visible: isVisible,
                            child: FloatingActionButton(
                                    onPressed: () {
                                      setState(() {
                                        isVisible = false;                           //this is the problamatic part.
                                        print("pressed undo");
                                      });
                                    },
                                    child: Text("helllllo"),
                                  )
                              
                            replacement: Container(),
                          ),
                        ),
                      ),
                    ], 
                  ),
                )),
          );
          // );
        },
      );

      return SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: TCard(
          controller: _controller,
          onForward: (index, info) {
            if (info.direction == SwipDirection.Right) {
              Fluttertoast.showToast(
                  msg: "Liked",
                  toastLength: Toast.LENGTH_SHORT,
                  gravity: ToastGravity.CENTER,
                  timeInSecForIosWeb: 1,
                  backgroundColor: Colors.yellow,
                  textColor: Colors.black,
                  fontSize: 16.0);
            }

            setState(() {
              isFirstCard = false;
            });
          },
          onBack: (index, info) {
            // _controller.forward(SwipDirection);
            // print(index);
          },
          onEnd: () {
            _controller.reset();
          },
          size: Size(double.infinity, double.infinity),
          cards: cards,
        ),
      );

      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return _layoutDetails();
  }
}

   ),
    );
  }
}

Answer 1

I personally use Provider for state management, but this is the quickest way I could demonstrate changing a value using setState. It seems to me that you are trying to update the state inside of a method, instead of updating the state inside of the build context that is being displayed. Since setState is being called outside of the build method, the build method doesn't know to rebuild with the new value.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MainPage(),
  ));
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  Color go = Colors.green;
  Color stop = Colors.red;

// the variable we are tracking the state of
  bool stackIsGo;

// custom widget that takes a bool as input
  Widget _moreWidgets(bool changeColor) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          color: changeColor ? Colors.greenAccent : Colors.deepPurple,
          height: 44,
          width: 44,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // the variable the build context is going to build with.
    // since stackIsGo hasn't been given a value yet, and we can't // initialize a null value, if stackIsGo is null we assign
    // true to changeVisibility.
    bool changeVisibility = stackIsGo ?? true;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Center(
            child: Stack(
              children: [
                Container(
                  height: 44,
                  width: 44,
                  // 
                  color: changeVisibility ? go : stop,
                ),
                Positioned.fill(
                  child: Visibility(
                    //
                    visible: !changeVisibility,
                    replacement: SizedBox.shrink(),
                    child: Icon(Icons.warning_rounded),
                  ),
                ),
              ],
            ),
          ),
          FloatingActionButton(
            child: Icon(Icons.visibility),
            onPressed: () {
              setState(() {
                // by using setState inside of the build method,
                // we trigger a widget rebuild with the new value.
                if (stackIsGo == null) stackIsGo = true;
                stackIsGo = !stackIsGo;
              });
            },
          ),
          
          _moreWidgets(changeVisibility),
        ],
      ),
    );
  }
}

Answer 2

You can try to put the values from _layoutDetails() Widget tree inside the

 @override
  Widget build(BuildContext context) {
  }

So that every time that you call setState function, it will also rebuild the widget tree.

Like this:

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: personalDetails.length,
        itemBuilder: (context, index) {
      return GlassContainer.frostedGlass(
            height: 800,
            width: 800,

            child: Padding(
                padding: const EdgeInsets.fromLTRB(30, 20, 30, 0),
                child: Container(
                  child: Stack(
                    children: [
                      Column(
                        children: [
                          SizedBox(
                            height: 20,
                          ),
                          Center(child: _picture(images[index])),
                          SizedBox(
                            height: 30,
                          ),
                          _bio(personalDetails[index].split("%")),
                          SizedBox(
                            height: 10,
                          ),
                          _likeUnlikeButtons()
                        ],
                      ),
                      Positioned(
                        left: 0,
                        bottom: 15,
                        child: SizedBox(
                          width: 30,
                          child: Visibility(
                            visible: isVisible,
                            child: FloatingActionButton(
                                    onPressed: () {
                                      setState(() {
                                    isVisible = false; //this is the problamatic part.
                                        print("pressed undo");
                                      });
                                    },
                                    child: Text("helllllo"),
                                  )
                              
                            replacement: Container(),
                          ),
                        ),
                      ),
                    ], 
                  ),
                )),
          ); 
    },);
  }

You can declare the List outside the function _layoutDetails so the build method can access it.

/// Populate data for list.
    List<String> personalDetails = [
            'Prakriti Regmi%20%Lets read Murakami together.%Chabahil (1 mi away)',
            'Dristi Sigdel%19%Belle áme%Sundhara (2 mi away)',
            'Prajita Upreti%19%Here to make friends.%Makalbari (2.3 mi away)',
            'Sugandhi C.%21%Not looking for any drama.%Bhaktapur (7 mi away)',
            "Pawana Shrestha%20%Why am I here for?%Attarkhel",
            "Tanuja Shrestha%21%Hi there! ♐︎%Dakshin Dhoka"
          ];
     List<String> images = [
            'assets/images/girls/girl1.png',
            'assets/images/girls/girl2.png',
            'assets/images/girls/girl3.png',
            'assets/images/girls/girl4.png',
            'assets/images/girls/girl5.png',
            'assets/images/girls/girl6.png',
          ];