Home > Software design >  Is there a way to hide a container/elements after click on button in flutter?
Is there a way to hide a container/elements after click on button in flutter?

Time:10-01

As the title suggest I want to hide a container when button is clicked.

CodePudding user response:

Try with this visibility

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

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

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text("Test obviously"),
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextButton(
                  onPressed: () {
                    setState(() {
                      visible = !visible;
                    });
                  },
                  child: Text("Click")),
              Visibility(
                  visible: visible,
                  child: Container(
                    height: 100,
                    color: Colors.green,
                  ))
            ],
          ),
        ));
  }
}

CodePudding user response:

bool isButtonClicked = false

ElevatedButton(
  style: ElevatedButton.styleFrom(primary: Colors.amber),
  onPressed: () => {
       setState(() {
          isButtonClicked = !isButtonClicked;
    });
  },
  child: Text('Hide/Unhide Container'),
),

!isButtonClicked? Container(): Offstage();
  • Related