Show/hide widgets in Flutter programmatically
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,),You can also use if or if-else.
Using
ifColumn( children: <Widget>[ Text('Good Morning'), // Always visible if (hasName) Text(' Mr ABC'), // Visible only if 'hasName' is true ],)Using
if-elseColumn( children: <Widget>[ // Only one of them is visible based on 'isMorning' condition. if (isMorning) Text('Good Morning') else Text ('Good Evening'), ],)
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
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], ), ), ), ], ), ) ), ], ) ], ) ); }}