import 'package:flutter/material.

dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:google_fonts/google_fonts.dart';

class HomePage1 extends StatefulWidget {

const HomePage1({Key? key}) : super(key: key);

@override
State<HomePage1> createState() => _HomePage1State();
}

class _HomePage1State extends State<HomePage1> with TickerProviderStateMixin {

List images = ["ayurveda.jpg", "acupuncture.jpg", "homeopathy.jpg"];
@override
Widget build(BuildContext context) {
TabController _tabController = TabController(length: 3, vsync: this);
//TabController _tabController1 = TabController(length: 3, vsync: this);
return Scaffold(
backgroundColor: const Color(0xffe8f5e9),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(top: 50, left: 20),
child: Row(children: [
Icon(
Icons.menu,
size: 30,
color: Colors.black54,
),
Expanded(child: Container()),
Container(
margin: const EdgeInsets.only(right: 20),
width: 50,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.withOpacity(0.5)),
),
]),
),
SizedBox(
height: 30,
),
Container(
margin: const EdgeInsets.only(left: 20),
child: Text('Discover',
style: GoogleFonts.poppins(
fontWeight: FontWeight.bold,
fontSize: 30,
)),
),
SizedBox(
height: 30,
),
Container(
child: Align(
alignment: Alignment.centerLeft,
 child: TabBar(
labelPadding: const EdgeInsets.only(left: 20, right: 20),
controller: _tabController,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
isScrollable: true,
indicatorSize: TabBarIndicatorSize.label,
indicator: CircleTabIndicator(color: Colors.black, radius: 4),
tabs: [
Tab(
child: Text('Categories',
style: GoogleFonts.poppins(fontSize: 14))),
Tab(
child: Text('Categories',
style: GoogleFonts.poppins(fontSize: 14))),
Tab(
child: Text('Categories',
style: GoogleFonts.poppins(fontSize: 14))),
],
),
)),
Container(
padding: const EdgeInsets.only(left: 20),
height: 300,
width: double.maxFinite,
child: TabBarView(
controller: _tabController,
children: [
ListView.builder(
itemCount: 3,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: const EdgeInsets.only(right: 15, top: 10),
width: 200,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
image: DecorationImage(
image: AssetImage("img/" + images[index]),
)),
);
}),
Text("There"),
Text("Bye"),
],
),
)
],
),
);
}
}

class CircleTabIndicator extends Decoration {

final Color color;
double radius;
CircleTabIndicator({required this.color, required this.radius});
 @override
BoxPainter createBoxPainter([VoidCallback? onChanged]) {
// TODO: implement createBoxPainter
return _CirclePainter(color: color, radius: radius);
}
}

class _CirclePainter extends BoxPainter {

final Color color;
double radius;
_CirclePainter({required this.color, required this.radius});
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
Paint _paint = Paint();
_paint.color = color;
_paint.isAntiAlias = true;
final Offset circleOffset = Offset(
configuration.size!.width / 2 - radius / 2,
configuration.size!.height - radius);
canvas.drawCircle(offset + circleOffset, radius, _paint);
}
}