Flutter implement tab - flutter

Question

I'm trying to make a page design like this:
But I'm having difficulties on implementing the tab bar. When the user click on 'Detail', then the detail view is showed under the tab bar and so on. Is there any widget to use?

Answer 1

try CupertinoSlidingSegmentedControl:
child: CupertinoSlidingSegmentedControl(
children: {
0: Text("FLIGHTS"),
1: Text("TRAINS"),
2: Text("HOTELS")
},
onValueChanged: (value)
{
selectedValue = value;
setState(() {
});
},
groupValue: selectedValue,
),

Answer 2

import 'package:flutter/material.dart';
class TabBarDemo extends StatelessWidget {
const TabBarDemo({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('Tabs Demo'),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 400,
child: const TabBarView(
children: [
Icon(Icons.directions_car),// create image widget here using listview builder
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
Container(
height: 80,
color: Colors.blue,
child: const TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
Container(
height: 400,
child: TabBarView(
children: [
Container(color: Colors.red,), // create data widgets here using listview builder
Container(color: Colors.green,),
Container(color: Colors.yellow,),
],
),
),
]
),
),
),
),
);
}
}