How to hide/show a button with another button | Flutter? - android-studio

Question

New to programming and dart/flutter .
Thank You.
So 2 buttons Me! and You! , I have to hide and show me! button clicking on You! button .
So can any one help me to find solution of my question.
and what if i have more numbers of buttons and show/hide all of them using a single button.
My code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Column(
children: [
MaterialButton(
onPressed: () {},
child: Text('Me!'),
color: Colors.green,
),
MaterialButton(
onPressed: () {},
child: Text('You!'),
color: Colors.red,
)
],
),
),
);
}
}

Answer 1

use a Visibility Widget.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isVisible = true; //will be visible for the first frame
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Column(
children: [
Visibility(
visible: isVisible,
child: MaterialButton(
onPressed: () {},
child: Text('Me!'),
color: Colors.green,
),
),
MaterialButton(
onPressed: () {
setState(() {
isVisible = !isVisible;
});
},
child: Text('You!'),
color: Colors.red,
)
],
),
),
);
}
}

Answer 2

Here are 3 examples.
1
class _MyHomePageState extends State<MyHomePage> {
bool hide = false;
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Column(
children: [
if(!hide)MaterialButton(
onPressed: () {},
child: Text('Me!'),
color: Colors.green,
),
MaterialButton(
onPressed: () {
setState((){
hide = !hide;
});
},
child: Text('${hide ? "Show" : "Hide"}'),
color: Colors.red,
)
],
),
),
);
}
}
2
class _MyHomePageState extends State<MyHomePage> {
bool hide = false;
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Column(
children: [
Opacity(
opacity: hide ? 0 : 1,
child: MaterialButton(
onPressed: () {},
child: Text('Me!'),
color: Colors.green,
)
),
MaterialButton(
onPressed: () {
setState((){
hide = !hide;
});
},
child: Text('${hide ? "Show" : "Hide"}'),
color: Colors.red,
)
],
),
),
);
}
}
3 (Adding animation)
class _MyHomePageState extends State<MyHomePage> {
bool hide = false;
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Column(
children: [
AnimatedOpacity(
opacity: hide ? 0 : 1,
duration: Duration(seconds: 2),
child: MaterialButton(
onPressed: () {},
child: Text('Me!'),
color: Colors.green,
)
),
MaterialButton(
onPressed: () {
setState((){
hide = !hide;
});
},
child: Text('${hide ? "Show" : "Hide"}'),
color: Colors.red,
)
],
),
),
);
}
}
Note: The first example will remove the button from the widget tree. For the second and third, the button will be in the widget tree but won't be visible.
So you can see it as:
First example: The button is GONE.
Second example: The button is INVISIBLE.