How to show/hide widgets programmatically in Flutter

In Flutter, showing and hiding widgets is a very common requirement. This typically involves toggling between the visible states of widgets. In Flutter, we can achieve this by modifying the widget's build logic. There are several common methods to programmatically show and hide widgets in Flutter:

1. Using the Visibility widget

Flutter provides a widget named Visibility specifically designed to control the visibility of another widget. The Visibility widget has a visible property, which you can change to control whether the child widget is displayed or hidden.

Example code:

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // State variable controlling the visibility of the widget
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Visibility Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[ 
              Visibility(
                visible: _isVisible,
                child: Text('Hello, I am visible!'),
              ),
              RaisedButton(
                onPressed: () {
                  // Update state to show/hide the Text widget
                  setState(() {
                    _isVisible = !_isVisible;
                  });
                },
                child: Text('Toggle Visibility'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In this example, when you click the button, the _isVisible state changes, triggering a rebuild of the widget tree. The Visibility widget then displays or hides the text based on the new _isVisible value.

2. Using the Opacity widget

Another approach is to use the Opacity widget to change the transparency of the child widget. Setting the opacity to 0 makes the widget 'hidden', while setting it to 1 fully displays it. This method does not remove the widget from the layout; it simply changes its transparency.

Example code:

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // State variable controlling the opacity of the widget
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Opacity Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[ 
              Opacity(
                opacity: _opacity,
                child: Text('Hello, I am fading!'),
              ),
              RaisedButton(
                onPressed: () {
                  // Update state to change the opacity of the Text widget
                  setState(() {
                    _opacity = _opacity == 1.0 ? 0.0 : 1.0;
                  });
                },
                child: Text('Toggle Opacity'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Both methods are common practices for programmatically controlling widget visibility in Flutter. Depending on your specific needs, you can choose the method that best suits your scenario.