Visibility Widget

What is Visibility Widget?

The Visibility is to show or hide a child widget in a subtree.

Default Constructor

The default constructor to control whether the given child is visible.

Visibility(
    child: // required argument
    replacement: const SizedBox.shrink(), // default
    visible: true,
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The child parameter is to add child widget below the Visibility widget in a tree. The child parameter is required and must not be null.

The replacement parameter is to replace with zero box widget (SizedBox.shrink()) when the child is not visible. The replacement parameter default to SizedBox.shrink() and must not be null.

The visibility parameter is to switch between showing or hiding its child. Defaults to true.

Code snippet

This code snippet shows how to configure Visibility widget.

Visibility(
        visible: false,
        child: FlutterLogo(),
)

Demo Code

This example shows how to hide a child by setting the visible parameter to false.

import 'package:flutter/material.dart';

class VisibilityDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue[50],
      height: 100.0,
      width: 100.0,
      child: Visibility(
        visible: false,
        child: FlutterLogo(),
      ),
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Visibility';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: VisibilityDemo()),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());