Flutter: Programmatically show/hide a widget using Visibility

There may be times when you want to programmatically show or hide a widget in your Flutter applications. One of the best ways to achieve so is to use the Visibility widget.

In this article, we are going to take a look at the Visibility widget and go over an example of implementing it.Advertisements

Options of Visibility

Below is the list of options supported by the Visibility widget:

You can find the full list of properties and methods of the Visibility class in the official docs. If you get confused with boring words and long sentences then see the practical example below.

Example

This example creates a simple app that contains a floating button and an amber box. When users tap the button, the box will be visible or invisible based on a variable named _isShown.

App Preview

The full code

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // The amber box is shown by default
  bool _isShown = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Center(
        child: Visibility(
          visible: _isShown,
          child: Container(
            width: 300,
            height: 300,
            color: Colors.amber,
            alignment: Alignment.center,
            child: const Text('Hello!'),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isShown = !_isShown;
          });
        },
        child: Text(
          _isShown ? 'Hide' : 'Show',
        ),
      ),
    );
  }
}

Conclusion

AdvertisementsThis article demonstrated how to programmatically hide or show a widget in an app using the Visibility widget. To explore more amazing and beautiful things in Flutter, take a look at the following articles:

• Using Chip widget in Flutter: Tutorial & Examples
• Using BlockSemantics in Flutter: Tutorial & Example
• Flutter: SliverGrid example
• Flutter StreamBuilder examples (null safety)
• Working with Timer and Timer.periodic in Flutter

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.Advertisements