Untitled

import 'package:business_page/config/global/const.dart';
import 'package:business_page/config/theme/app_font_manger.dart';
import 'package:business_page/config/theme/app_styles_manger.dart';
import 'package:business_page/config/theme/my_theme/colors.dart';
import 'package:flutter/material.dart';
import 'package:iconsax/iconsax.dart';

class BuisnessPagePreview extends StatefulWidget {
  const BuisnessPagePreview({super.key});

  @override
  State<BuisnessPagePreview> createState() => _BuisnessPagePreviewState();
}

class _BuisnessPagePreviewState extends State<BuisnessPagePreview> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        // slivers: [
        //   SliverPersistentHeader(delegate: BusinessPagePersistentHeader())
        // ],
        children: const [
          BusinessPagePreviewHeader(),
          SizedBox(
            height: 8,
          ),
          BusinessPageViewHeaderButtons(),
          TabBarAndTabViews()
        ],
      ),
    ));
  }
}

class BusinessPageViewHeaderButtons extends StatelessWidget {
  const BusinessPageViewHeaderButtons({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 4,
          child: TextButton(
            style: TextButton.styleFrom(
                backgroundColor: MyColors.accentColor,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8))),
            onPressed: () {},
            child: const Text("Follow"),
          ),
        ),
        const SizedBox(
          width: 8,
        ),
        IconButton(
          style: TextButton.styleFrom(
              backgroundColor: MyColors.accentColor,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
          onPressed: () {},
          icon: const Icon(
            Iconsax.call,
            color: Colors.white,
          ),
        ),
        const SizedBox(
          width: 8,
        ),
        IconButton(
          style: TextButton.styleFrom(
              backgroundColor: MyColors.accentColor,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
          onPressed: () {},
          icon: const Icon(
            Iconsax.location,
            color: Colors.white,
          ),
        )
      ],
    );
  }
}

class BusinessPagePreviewHeader extends StatelessWidget {
  const BusinessPagePreviewHeader({
    super.key,
    this.progress = 0,
  });
  final double progress;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height / 2.5,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Positioned.fill(
              child: ClipRRect(
            borderRadius: const BorderRadius.only(
                bottomRight: Radius.circular(30),
                bottomLeft: Radius.circular(30)),
            child: Image.network(
              dummyImage4000,
              fit: BoxFit.cover,
              colorBlendMode: BlendMode.darken,
              color: Colors.black26,
            ),
          )),
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  height: MediaQuery.of(context).padding.top,
                ),
                Container(
                  height: MediaQuery.of(context).size.height / 10,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.white, width: 2)),
                  child: Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: ClipRRect(
                        borderRadius: BorderRadius.circular(50),
                        child: Image.network(dummyImage400)),
                  ),
                ),
                const Spacer(),
                Text(
                  "Suiiz Media Production",
                  style: getBoldTextStyle(
                      fontSize: AppFontSize.xxlarge, color: Colors.white),
                ),
                const Spacer(),
                Container(
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                      color: Colors.black38,
                      borderRadius: BorderRadius.circular(8)),
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: BusinessPageStats(),
                  ),
                ),
                const Spacer(),
              ],
            ),
          )
        ],
      ),
    );
  }
}

class BusinessPageStats extends StatelessWidget {
  const BusinessPageStats({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: const [
          StatsItem(
            title: "Followers",
            value: "500",
          ),
          VerticalDivider(
            thickness: 1,
            width: 1,
            color: Colors.grey,
          ),
          StatsItem(
            title: "Services",
            value: "25",
          ),
          VerticalDivider(
            thickness: 1,
            width: 1,
            color: Colors.grey,
          ),
          StatsItem(
            title: "Ads",
            value: "14",
          ),
        ],
      ),
    );
  }
}

class StatsItem extends StatelessWidget {
  const StatsItem({
    super.key,
    required this.title,
    required this.value,
  });
  final String title;
  final String value;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(title,
            style: getMediumTextStyle(
                fontSize: AppFontSize.medium, color: MyColors.lightCardColor)),
        Text(
          value,
          style: getLightTextStyle(
              fontSize: AppFontSize.medium, color: Colors.white),
        ),
      ],
    );
  }
}

class TabPair {
  final Tab tab;
  final Widget view;
  TabPair({required this.tab, required this.view});
}

List<TabPair> tabPairs = [
  TabPair(
      tab: Tab(
        child: Text(
          "Home",
          style: getMediumTextStyle(fontSize: AppFontSize.large),
        ),
      ),
      view: Column(mainAxisSize: MainAxisSize.min, children: [Container()])),
  TabPair(
      tab: Tab(
        child: Text(
          "About ",
          style: getMediumTextStyle(fontSize: AppFontSize.large),
        ),
      ),
      view: Container()),
  TabPair(
      tab: Tab(
        child: Text(
          "Services",
          overflow: TextOverflow.visible,
          style: getMediumTextStyle(fontSize: AppFontSize.large),
        ),
      ),
      view: Container()),
  TabPair(
      tab: Tab(
        child: Text(
          "Branches",
          overflow: TextOverflow.visible,
          style: getMediumTextStyle(fontSize: AppFontSize.large),
        ),
      ),
      view: Container())
];

class TabBarAndTabViews extends StatefulWidget {
  const TabBarAndTabViews({super.key});

  @override
  _TabBarAndTabViewsState createState() => _TabBarAndTabViewsState();
}

class _TabBarAndTabViewsState extends State<TabBarAndTabViews>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: tabPairs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // give the tab bar a height [can change height to preferred height]
        SizedBox(
          height: MediaQuery.of(context).size.height / 14,
          child: TabBar(
              unselectedLabelStyle: getMediumTextStyle(color: Colors.grey),
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorColor: MyColors.primaryColor,
              controller: _tabController,
              // give the indicator a decoration (color and border radius)
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey,
              tabs: tabPairs.map((tabPair) => tabPair.tab).toList()),
        ),
        SizedBox(
          height: MediaQuery.of(context).size.height / 1,
          child: TabBarView(
              controller: _tabController,
              children: tabPairs.map((tabPair) => tabPair.view).toList()),
        ),
      ],
    );
  }
}

class BusinessPagePersistentHeader extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final progress = shrinkOffset / maxExtent;
    return Material(
        child: Stack(fit: StackFit.expand, children: [
      AnimatedOpacity(
        duration: const Duration(milliseconds: 150),
        opacity: progress,
        child: const ColoredBox(
          color: Color(0xBE7A81FF),
        ),
      ),
      BusinessPagePreviewHeader(
        progress: progress,
      )
    ]));
  }

  @override
  double get maxExtent => 264;

  @override
  double get minExtent => 84;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      true;
}