tab bar in flutter

 import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:luminary_fashion_customer_app/utils/constants/colors.dart';

import '../controllers/booking_controller.dart';

class BookingView extends GetView<BookingController> {
const BookingView({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
appBar: AppBar(
title: Text("My Bookings"),
),
body: DefaultTabController(
length: 7,
child: NestedScrollView(
scrollDirection: Axis.vertical,
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
// color: Colors.grey,
child: TabBar(
padding: const EdgeInsets.all(8),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blue),
indicatorColor: Colors.blue,
isScrollable: true,
unselectedLabelColor: Colors.grey,
labelColor: Colors.white,
tabs: const [
SizedBox(width: 100, child: Tab(child: Text('All'))),
SizedBox(
width: 100, child: Tab(child: Text('Awaiting'))),
SizedBox(
width: 100, child: Tab(child: Text('Confirmed'))),
SizedBox(
width: 100, child: Tab(child: Text('Started'))),
SizedBox(
width: 100, child: Tab(child: Text('Cancelled'))),
SizedBox(
width: 100, child: Tab(child: Text('Rescheduled'))),
SizedBox(
width: 100, child: Tab(child: Text('Completed'))),
],
),
),
],
),
),
],
body: TabBarView(
physics: BouncingScrollPhysics(),
children: [
bookings(),
SingleChildScrollView(child: Text('2')),
SingleChildScrollView(child: Text('3')),
SingleChildScrollView(child: Text('4')),
SingleChildScrollView(child: Text('5')),
SingleChildScrollView(child: Text('6')),
SingleChildScrollView(child: Text('7')),
],
),
),
),
));
}

Widget bookings() {
return SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
boxShadow: const [
BoxShadow(color: Colors.black12, blurRadius: 4, spreadRadius: 2)
]),
margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Column(
children: [
//section 1
Container(
padding: const EdgeInsets.only(bottom: 10),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black12, width: 1))),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
Icons.cancel,
color: Colors.red,
size: 30,
),
Container(
margin: const EdgeInsets.only(left: 10),
width: 100,
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: Colors.red[100],
borderRadius: BorderRadius.circular(4),
),
child: const Center(
child: Text(
"Cancelled",
style: TextStyle(color: Colors.red),
)),
)
],
),
const Text("Invoice No : BMM-45678")
],
),
),
//section2 service name start
Container(
padding: EdgeInsets.only(top: 10, left: 10),
child: Row(
children: [
Image.network(
"https://images.ctfassets.net/ukazlt65o6hl/57KsUVgR3aMOiJdWafCJNv/a91282a079be9253d1cab82c937bcb2a/AdobeStock_251500673_1.png?w=1910&h=1276&q=70&fm=png",
width: 50,
height: 30,
fit: BoxFit.fill),
const Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(
"Switchboard Repair",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.black54),
),
)
],
),
),
//section 3 schedule
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.grey[200]),
margin: const EdgeInsets.only(top: 14),
padding: const EdgeInsets.only(left: 10, top: 8, bottom: 8),
child: const Row(
children: [
Icon(
Icons.calendar_today,
color: Colors.black54,
size: 29,
),
Padding(
padding: EdgeInsets.only(left: 14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Schedule"),
Text(
"01/01/2024, 12:00:00",
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.w600),
)
],
),
)
],
),
),
//section 4 price
Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black12, width: 1))),
child: Row(
children: [
Icon(
Icons.account_balance_wallet,
color: ColorConstants.textPrimary,
),
Text(
"105",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 19,
color: ColorConstants.textPrimary),
)
],
),
),
//section 5
Container(
padding: EdgeInsets.only(top: 10, left: 10),
child: Row(
children: [
Container(
width: 30.0,
height: 30.0,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://images.ctfassets.net/ukazlt65o6hl/57KsUVgR3aMOiJdWafCJNv/a91282a079be9253d1cab82c937bcb2a/AdobeStock_251500673_1.png?w=1910&h=1276&q=70&fm=png",
),
))),
const Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(
"Worker : Electric",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.black54),
),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 10),
child: Row(
children: [
Expanded(
child: ElevatedButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(Colors.white),
backgroundColor:
MaterialStateProperty.all(Colors.blue[500]),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(color: Colors.blue)))),
onPressed: () {},
child: const Text('Cancel'),
),
),
const SizedBox(
width: 10,
),
Expanded(
child: ElevatedButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(Colors.white),
backgroundColor:
MaterialStateProperty.all(Colors.blue[500]),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(color: Colors.blue)))),
onPressed: () {},
child: const Text('Reschedule'),
),
)
],
),
)
],
),
),
);
}
}