How to Create This Tab View in Flutter with SyncFusion? What is the Name of the Widget? - flutter

Question

I am trying to create this kind of tab view but I am so confused what the name of the widget is in Flutter and SyncFusion. I want to create this chart with 2 tab, the first tab is voltage chart and the second one is current chart. Thank you.
Here's the picture:
Here's my current code:
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: const SideMenu(),
body: FutureBuilder(
future: getData2(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Loading();
} else if (snapshot.hasError) {
return Text(snapshot.hasError.toString());
} else {
final themeChange = Provider.of<DarkThemeProvider>(context);
return SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (Responsive.isDesktop(context))
const Expanded(
child: SideMenu(),
),
Expanded(
flex: 5,
child: SingleChildScrollView(
primary: false,
padding: const EdgeInsets.all(defaultPadding),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(defaultPadding),
child: const Header(),
),
const SizedBox(height: defaultPadding),
Container(
decoration: BoxDecoration(
color: themeChange.darkTheme
? secondaryColor
: quarterColor,
borderRadius:
const BorderRadius.all(Radius.circular(10)),
),
padding: const EdgeInsets.all(defaultPadding),
child: DefaultTabController(
length: 2,
child: Column(
children: [
SizedBox(
height: 40.0,
child: TabBar(
controller: _tabController,
indicator: const UnderlineTabIndicator(
borderSide: BorderSide(
color: Colors.yellow,
width: 3.0,
),
),
indicatorPadding:
const EdgeInsets.all(2.0),
tabs: const [
Text(
'Voltages Chart',
),
Text(
'Currents Chart',
),
],
),
),
],
),
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
ListView.builder(
itemCount: 100,
itemBuilder: (context, int index) {
return const DwpVoltageCharts();
},
),
ListView.builder(
itemCount: 100,
itemBuilder: (context, int index) {
return const DwpCurrentCharts();
},
),
],
),
),
const SizedBox(height: defaultPadding),
Container(
padding: const EdgeInsets.all(defaultPadding),
decoration: BoxDecoration(
color: themeChange.darkTheme
? secondaryColor
: quarterColor,
borderRadius:
const BorderRadius.all(Radius.circular(10)),
),
child: const Center(
child: PowerChart(),
),
),
],
),
),
)
],
),
);
}
}),
);
}
}
Please this is my currents code and I don't know how to make it works because I am really new about it. Thank You.

Answer 1

You can achieve your requirement using the DefaultTabController, TabBar and TabBarView widgets available in the flutter framework. We have created a simple sample in which we have achieved your requirement to switch between two tabs to view the voltage and current chart and attached the sample below for reference.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/i407342-45112383