circle_app/circle_app/lib/app/home/view.dart

import 'package:circle_app/app/circle/view.dart';
import 'package:circle_app/app/like/view.dart';
import 'package:circle_app/app/minefragment/view.dart';
import 'package:circle_app/app/msg/view.dart';
import 'package:circle_app/util/util.dart';
import 'package:circle_app/view/ExitAppConfirmation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin,SingleTickerProviderStateMixin {
  @override
  bool get wantKeepAlive => true;

  HomeLogic logic = Get.find<HomeLogic>();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    logic.tabController = TabController(length: 4, vsync: this, initialIndex: 0,animationDuration: Duration.zero);
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder(builder: (HomeLogic controller) {
      return ExitAppConfirmation(
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: const Color.fromRGBO(15, 10, 31, 1.0),
          bottomNavigationBar: Container(
            height: 49.sp + MediaQuery.of(context).padding.bottom,
            width: Get.width,
            // color: Colors.red,
            padding: EdgeInsets.only(left: 20.sp, right: 20.sp),
            decoration: BoxDecoration(
                color: const Color(0xFF423055),
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage(
                      getTabbarImage('tabbar_bg'),
                    ))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                funcItem(0, 'circle', 0 == controller.currentIndex, controller),
                funcItem(1, 'like', 1 == controller.currentIndex, controller),
                funcItem(2, 'msg', 2 == controller.currentIndex, controller),
                funcItem(3, 'mine', 3 == controller.currentIndex, controller),
              ],
            ),
          ),
          body: Stack(
            fit: StackFit.expand,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                // height:
                //     Get.height - 49.sp + MediaQuery.of(context).padding.bottom,
                decoration: const  BoxDecoration(image: bgWidget),
              ),
              TabBarView(
                physics: const NeverScrollableScrollPhysics(),
                controller: logic.tabController,
                children: [
                  const CirclePage(),
                  LikePage(),
                  MsgPage(),
                  MinefragmentPage()
                ],
              )
            ],
          ),
        ),
      );
    });
  }

  funcItem(int index, String image, bool isSelected, HomeLogic controller) {
    return SizedBox(
      width: 80.sp,
      height: 50.sp,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          if (!isSelected) {
            logic.tabController.animateTo(index, duration: Duration(milliseconds: 0), curve: Curves.ease);
            controller.updateIndex(index);
          }
        },
        child: Stack(alignment: Alignment.center, children: [
          Container(
              margin: EdgeInsets.only(top: 8.sp),
              child: Center(
                  child: Image.asset(
                isSelected
                    ? getTabbarImage('${image}_selected')
                    : getTabbarImage('${image}_normal'),
                width: 38.sp,
                height: 38.sp,
                fit: BoxFit.fill,
                excludeFromSemantics: true,
                gaplessPlayback: true,
              ))),
          // if (logic.showcirlceUnred.value && index == 1)
    Obx(() => Visibility(
        visible: index == 1 && controller.showcirlceUnred.value,
        child: Positioned(
              // right: 4.sp,
              top: 10.sp,
              child: Container(

                width: 14.sp,
                height: 14.sp,
                  margin: EdgeInsets.only(
                          left:24.sp),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(7.sp),
                    gradient: LinearGradient(
                        colors: controller.showcirlceUnred.value ? [Color(0xFFC343F9), Color(0xFFFB34B2)] : [Color(0xFFC343F9), Color(0xFFFB34B2)]),
                    border:
                    Border.all(color: Color(0xFF170730), width: 1.sp))),
            ))),
          //  Obx(() => null)
          Obx(() => Visibility(
              visible: index == 2 && controller.unreadSIze != "0",
              child: Positioned(
                // right: 4.sp,
                top: 6.sp,
                child: Container(
                  margin: EdgeInsets.only(
                      left: int.parse(controller.unreadSIze.value) > 99
                          ? 30.sp
                          : 20.sp),
                  height: 18.sp,
                  padding: EdgeInsets.only(left: 5.sp, right: 5.sp),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(10.sp)),
                  child: Text(
                    int.parse(controller.unreadSIze.value) > 99
                        ? '99+'
                        : controller.unreadSIze.value,
                    // The number in the red dot
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12.0.sp, // Font size of the text
                    ),
                  ),
                ),
              )))
        ]),
      ),
    );
  }
}