Show hide widgets in Flutter programmatically

Question

In Android  every single View subclass has a setVisibility   method that allows you modify the visibility of a View object  There are 3 options of setting the visibility    Visible  Renders the View visible inside the layout Invisible  Hides the View  but leaves a gap that is equivalent to what the View would occupy if it were visible Gone  Hides the View  and removes it entirely from the layout  It s as if its height and width were 0dp   Is there something equivalent to the above for Widgets in Flutter   For a quick reference  https   developer android com reference android view View html attr android visibility

User · Answer

As already highlighted by  CopsOnRoad  you can use the Visibility widget  But  if you want to keep its state  for example  if you want to build a viewpager and make a certain button appear and disappear based on the page  you can do it this way void checkVisibilityButton       setState        isVisibileNextBtn   indexPage   1  lt  pages length                Stack children   lt Widget gt         PageView builder          itemCount  pages length          onPageChanged   index              indexPage   index            checkVisibilityButton                       itemBuilder   context  index              return pages index                      controller  controller                 Container          alignment  Alignment bottomCenter          child  Row            mainAxisAlignment  MainAxisAlignment end            children   lt Widget gt               Visibility                visible  isVisibileNextBtn                child   quot your widget quot

User · Answer

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  Article on how to make a visibility widget

User · Answer

Maybe you can use the Navigator function like this Navigator of context  pop

User · Answer

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     gt  new HomePageState       class HomePageState extends State lt HomePage gt      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   lt Widget gt             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   lt Widget gt                   visibilityObs   new Row                    crossAxisAlignment  CrossAxisAlignment end                    children   lt Widget gt                       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   lt Widget gt                       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   lt Widget gt                 new InkWell                  onTap                         visibilityObs   null    changed true   obs                                       child  new Container                    margin  new EdgeInsets only top  16 0                     child  new Column                      children   lt Widget gt                         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   lt Widget gt                         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

User · Answer

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   lt Widget gt                 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

User · Answer

Try the Offstage widget  if attribute offstage true the not occupy the  physical space and invisible   if attribute offstage false it will occupy the  physical space and visible  Offstage     offstage  true     child  Text  Visible

User · Answer

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

User · Answer

You can encapsulate any widget in your code with a new widget called  Visibility   this is from the yellow lamp at the very left side of the widget that you want it to be in-visible  example  say you want to make a row invisible    Click in the lamp and choose  Wrap with widget    Rename the widget to Visibility  Add the visible property and set it to false The Child of the newly created widget  Visibility Widget  is the Widget that you want it to be invisible            Visibility                visible  false                child  Row                  crossAxisAlignment  CrossAxisAlignment start                  children   lt Widget gt                     SizedBox                      width  10                                         Text  Search                       style  TextStyle fontSize  20                                                                                I hope it will help someone in the future

User · Answer

Flutter now contains a Visibility Widget that you should use to show hide widgets  The widget can also be used to switch between 2 widgets by changing the replacement   This widget can achieve any of the states visible  invisible  gone and a lot more       Visibility        visible  true   Default is true        child  Text  Ndini uya uya            maintainSize  bool  When true this is equivalent to invisible          replacement  Widget  Defaults to Sizedbox shrink  0x0

User · Answer

Invisible  The widget takes physical space on the screen but not visible to user    Gone  The widget doesn t take any physical space and is completely gone      Invisible example  Visibility    child  Text  Invisible      maintainSize  true     maintainAnimation  true    maintainState  true    visible  false        Gone example  Visibility    child  Text  Gone      visible  false         Alternatively  you can use if condition for both invisible and gone    Column    children   lt Widget gt       if  show  Text  This can be visible not depending on condition        Text  This is always visible

User · Answer

For beginner try this too   class Visibility extends StatefulWidget      override    VisibilityState createState     gt   VisibilityState       class  VisibilityState extends State lt Visibility gt      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   lt Widget gt                 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

User · Answer

UPDATE  Since this answer was written  Visibility was introduced and provides the best solution to this problem     You can use Opacity with an opacity  of 0 0 to draw make an element hidden but still occupy space   To make it not occupy space  replace it with an empty Container     EDIT  To wrap it in an Opacity object  do the following               new Opacity opacity  0 0  child  new Padding                padding  const EdgeInsets only                  left  16 0                                 child  new Icon pencil  color  CupertinoColors activeBlue                    Google Developers quick tutorial on Opacity  https   youtu be 9hltevOHQBw

User · Answer

One solution is to set tis widget color property to Colors transparent  For instance    IconButton      icon  Image asset  myImage png           color  Colors transparent             onPressed

[flutter] Show/hide widgets in Flutter programmatically

Examples related to flutter

Examples related to dart

Examples related to flutter-layout