Show/hide widgets in Flutter programmatically

前端 未结 13 1237
轮回少年
轮回少年 2020-11-28 04:13

In Android, every single View subclass has a setVisibility() method that allows you modify the visibility of a View object

The

相关标签:
13条回答
  • 2020-11-28 04:40

    To collaborate with the question and show an example of replacing it with an empty Container().

    Here's the example below:

    import "package:flutter/material.dart";
    
    void main() {
      runApp(new ControlleApp());
    }
    
    class ControlleApp extends StatelessWidget { 
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: "My App",
          home: new HomePage(),
        );
      }
    }
    
    class HomePage extends StatefulWidget {
      @override
      HomePageState createState() => new HomePageState();
    }
    
    class HomePageState extends State<HomePage> {
      bool visibilityTag = false;
      bool visibilityObs = false;
    
      void _changed(bool visibility, String field) {
        setState(() {
          if (field == "tag"){
            visibilityTag = visibility;
          }
          if (field == "obs"){
            visibilityObs = visibility;
          }
        });
      }
    
      @override
      Widget build(BuildContext context){
        return new Scaffold(
          appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
          body: new ListView(
            children: <Widget>[
              new Container(
                margin: new EdgeInsets.all(20.0),
                child: new FlutterLogo(size: 100.0, colors: Colors.blue),
              ),
              new Container(
                margin: new EdgeInsets.only(left: 16.0, right: 16.0),
                child: new Column(
                  children: <Widget>[
                    visibilityObs ? new Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        new Expanded(
                          flex: 11,
                          child: new TextField(
                            maxLines: 1,
                            style: Theme.of(context).textTheme.title,
                            decoration: new InputDecoration(
                              labelText: "Observation",
                              isDense: true
                            ),
                          ),
                        ),
                        new Expanded(
                          flex: 1,
                          child: new IconButton(
                            color: Colors.grey[400],
                            icon: const Icon(Icons.cancel, size: 22.0,),
                            onPressed: () {
                              _changed(false, "obs");
                            },
                          ),
                        ),
                      ],
                    ) : new Container(),
    
                    visibilityTag ? new Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        new Expanded(
                          flex: 11,
                          child: new TextField(
                            maxLines: 1,
                            style: Theme.of(context).textTheme.title,
                            decoration: new InputDecoration(
                              labelText: "Tags",
                              isDense: true
                            ),
                          ),
                        ),
                        new Expanded(
                          flex: 1,
                          child: new IconButton(
                            color: Colors.grey[400],
                            icon: const Icon(Icons.cancel, size: 22.0,),
                            onPressed: () {
                              _changed(false, "tag");
                            },
                          ),
                        ),
                      ],
                    ) : new Container(),
                  ],
                )
              ),
              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new InkWell(
                    onTap: () {
                      visibilityObs ? null : _changed(true, "obs");
                    },
                    child: new Container(
                      margin: new EdgeInsets.only(top: 16.0),
                      child: new Column(
                        children: <Widget>[
                          new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
                          new Container(
                            margin: const EdgeInsets.only(top: 8.0),
                            child: new Text(
                              "Observation",
                              style: new TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.w400,
                                color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ),
                  new SizedBox(width: 24.0),
                  new InkWell(
                    onTap: () {
                      visibilityTag ? null : _changed(true, "tag");
                    },
                    child: new Container(
                      margin: new EdgeInsets.only(top: 16.0),
                      child: new Column(
                        children: <Widget>[
                          new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
                          new Container(
                            margin: const EdgeInsets.only(top: 8.0),
                            child: new Text(
                              "Tags",
                              style: new TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.w400,
                                color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ),
                ],
              )                    
            ],
          )
        );
      }
    }
    
    0 讨论(0)
  • 2020-11-28 04:41
    bool _visible = false;
    
     void _toggle() {
        setState(() {
          _visible = !_visible;
        });
      }
    
    onPressed: _toggle,
    
    Visibility(
                visible:_visible,
                child: new Container(
                child: new  Container(
                  padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 10.0),
                  child: new Material(
                    elevation: 10.0,
                    borderRadius: BorderRadius.circular(25.0),
                    child: new ListTile(
                      leading: new Icon(Icons.search),
                      title: new TextField(
                        controller: controller,
                        decoration: new InputDecoration(
                            hintText: 'Search for brands and products', border: InputBorder.none,),
                        onChanged: onSearchTextChanged,
                      ),
                      trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                        controller.clear();
                        onSearchTextChanged('');
                      },),
                    ),
                  ),
                ),
              ),
              ),
    
    0 讨论(0)
  • 2020-11-28 04:42

    Maybe you can use the Navigator function like this Navigator.of(context).pop();

    0 讨论(0)
  • 2020-11-28 04:43

    Update

    Flutter now has a Visibility widget. To implement your own solution start with the below code.


    Make a widget yourself.

    show/hide

    class ShowWhen extends StatelessWidget {
      final Widget child;
      final bool condition;
      ShowWhen({this.child, this.condition});
    
      @override
      Widget build(BuildContext context) {
        return Opacity(opacity: this.condition ? 1.0 : 0.0, child: this.child);
      }
    }
    

    show/remove

    class RenderWhen extends StatelessWidget {
      final Widget child;
      final bool condition;
      RenderWhen({this.child, this.show});
    
      @override
      Widget build(BuildContext context) {
        return this.condition ? this.child : Container();
      }
    }
    

    By the way, does any one have a better name for the widgets above?

    More Reads

    1. Article on how to make a visibility widget.
    0 讨论(0)
  • 2020-11-28 04:45

    For beginner try this too.

    class Visibility extends StatefulWidget {
      @override
      _VisibilityState createState() => _VisibilityState();
    }
    
    class _VisibilityState extends State<Visibility> {
      bool a = true;
      String mText = "Press to hide";
    
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: "Visibility",
          home: new Scaffold(
              body: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new RaisedButton(
                    onPressed: _visibilitymethod, child: new Text(mText),),
                    a == true ? new Container(
                    width: 300.0,
                    height: 300.0,
                    color: Colors.red,
                  ) : new Container(),
                ],
              )
          ),
        );
      }
    
      void _visibilitymethod() {
        setState(() {
          if (a) {
            a = false;
            mText = "Press to show";
          } else {
            a = true;
            mText = "Press to hide";
          }
        });
      }
    }
    
    0 讨论(0)
  • 2020-11-28 04:49

    In flutter 1.5 and Dart 2.3 for visibility gone, You can set the visibility by using an if statement within the collection without having to make use of containers.

    e.g

    child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                  Text('This is text one'),
                  if (_isVisible) Text('can be hidden or shown'), // no dummy container/ternary needed
                  Text('This is another text'),
                  RaisedButton(child: Text('show/hide'), onPressed: (){
                      setState(() {
                        _isVisible = !_isVisible; 
                      });
                  },)
    
              ],
            )
    
    0 讨论(0)
提交回复
热议问题