Toggle button to call container class flutter - flutter

Question

hi this is the first time i use a toggle button i try to make the toggle button to call a class container, there are 2 button
when "folmulir" button is true it called class container 1
when "List data" button is true it called class container 2.
should i make the container in the void so i return it?
import 'package:flutter/material.dart';
final List<bool> _selecteddatamaster = <bool>[
true,
false,
];
class TestbayToggle extends StatefulWidget {
const TestbayToggle({Key? key}) : super(key: key);
#override
TestbayToogleState createState() => TestbayToogleState();
}
class TestbayToogleState extends State<TestbayToggle> {
List<bool> isSelected = [true, false];
List<Widget> datamaster = const <Widget>[
Text('Folmulir'),
Text('List Data'),
];
#override
Widget build(BuildContext context) {
return Container(
width: 1000,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8), topRight: Radius.circular(8))),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 50,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8), topRight: Radius.circular(8)),
),
child: ToggleButtons(
onPressed: (int index) {
setState(() {
for (int i = 0; i < _selecteddatamaster.length; i++) {
_selecteddatamaster[i] = i == index;
if (index == 0) {
}
}
});
},
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8), topRight: Radius.circular(8)),
selectedColor: Colors.black,
fillColor: Colors.white,
renderBorder: false,
color: Colors.white,
constraints: const BoxConstraints(
minHeight: 40.0,
minWidth: 100.0,
),
isSelected: _selecteddatamaster,
children: datamaster ,
),
)
]),
);
}
}
class Container1 extends StatefulWidget {
const Container1({Key? key}) : super(key: key);
#override
State<Container1> createState() => _Container1State();
}
class _Container1State extends State<Container1> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
child: Container(
width: 1000,
height: 500,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [Text("test1")],
),
),
),
);
}
}
class Container2 extends StatelessWidget {
const Container2({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
child: Container(
width: 1000,
height: 500,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(8), bottomRight: Radius.circular(8)),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [Text("test2")],
),
),
),
);
}
}

Answer 1

I think the Visibility widget will serve your case better. Here's an example to demonstrate:
bool isSelected = true; // true by default, becuase first ToggleButton is activated
Visibility(
child: Container(), // display container of choice
visible: isSelected // will display child if true
);