Showing widgets by taping on different options in flutter? - flutter

Question

I am using flutter. I want to show different widgets when I tap on different options. On selecting option A, the option A widget is shown. On selecting option B, the option B widget is shown below the options bar and vice versa (like a tab bar). The code is attached below. I am glad if someone helps. ..
import 'package:flutter/material.dart';
class Cards extends StatefulWidget {
const Cards({Key? key}) : super(key: key);
#override
State<Cards> createState() => _CardsState();
}
class _CardsState extends State<Cards> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Cards"),
),
body: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
optionCards("A", "assets/icons/recycle.png", context, "1"),
optionCards("B", "assets/icons/tools.png", context, "2"),
optionCards("C", "assets/icons/file.png", context, "3"),
],
),
),
);
}
Widget optionCards(
String text, String assetImage, BuildContext context, String cardId) {
return Container(
width: 100,
height: 100,
decoration: ShapeDecoration(
color: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
),
child: SingleChildScrollView(
child: Column(
children: [
const Padding(
padding: EdgeInsets.only(top: 13),
child: IconButton(
onPressed: null,
icon: Icon(Icons.file_copy),
),
),
Text(
text,
style: const TextStyle(
fontSize: 14,
fontFamily: 'CeraPro',
color: Color.fromRGBO(0, 0, 0, 1),
),
),
],
),
),
);
}
Widget optiona() {
return Container();
}
Widget optionb() {
return Container();
}
Widget optionc() {
return Container();
}
}

Answer 1

class Cards extends StatefulWidget {
const Cards({Key? key}) : super(key: key);
#override
State<Cards> createState() => _CardsState();
}
class _CardsState extends State<Cards> {
Widget? selectedOption;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Cards"),
),
body: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: (){
setState(() {
selectedOption = optiona();
});
},
child: optionCards("A", "assets/icons/recycle.png", context, "1")
),
InkWell(
onTap: (){
setState(() {
selectedOption = optionb();
});
},
child: optionCards("B", "assets/icons/tools.png", context, "2")
),
InkWell(
onTap: (){
setState(() {
selectedOption = optionc();
});
},
child: optionCards("C", "assets/icons/file.png", context, "3")
),
],
),
// options
if(selectedOption != null) selectedOption!
],
),
),
);
}
Widget optionCards(
String text, String assetImage, BuildContext context, String cardId) {
return Container(
width: 100,
height: 100,
decoration: const ShapeDecoration(
color: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
),
child: SingleChildScrollView(
child: Column(
children: [
const Padding(
padding: EdgeInsets.only(top: 13),
child: IconButton(
onPressed: null,
icon: Icon(Icons.file_copy),
),
),
Text(
text,
style: const TextStyle(
fontSize: 14,
fontFamily: 'CeraPro',
color: Color.fromRGBO(0, 0, 0, 1),
),
),
],
),
),
);
}
Widget optiona() {
return Container();
}
Widget optionb() {
return Container();
}
Widget optionc() {
return Container();
}
}

Answer 2

You can use the Visibility widget to wrap the widgets which you want to hide or show and keep track of which one to show through a variable. Then you can set the visible property accordingly.
import 'package:flutter/material.dart';
class Cards extends StatefulWidget {
const Cards({Key? key}) : super(key: key);
#override
State<Cards> createState() => _CardsState();
}
class _CardsState extends State<Cards> {
var showOption = "";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Cards"),
),
body: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
optionCards("A", "assets/icons/recycle.png", context, "1"),
optionCards("B", "assets/icons/tools.png", context, "2"),
optionCards("C", "assets/icons/file.png", context, "3"),
],
),
),
);
}
Widget optionCards(
String text, String assetImage, BuildContext context, String cardId) {
return Container(
width: 100,
height: 100,
decoration: ShapeDecoration(
color: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
),
child: SingleChildScrollView(
child: Column(
children: [
const Padding(
padding: EdgeInsets.only(top: 13),
child: IconButton(
onPressed: null,
icon: Icon(Icons.file_copy),
),
),
Text(
text,
style: const TextStyle(
fontSize: 14,
fontFamily: 'CeraPro',
color: Color.fromRGBO(0, 0, 0, 1),
),
),
],
),
),
);
}
Widget optiona() {
return Visibility(visible: showOption == "A", child: Container());
}
Widget optionb() {
return Visibility(visible: showOption == "B", child: Container());
}
Widget optionc() {
return Visibility(visible: showOption == "C", child: Container());
}
Now you can change the showOption variable whenever you want to show another option.