Friday, December 8, 2023
HomeiOS Developmentandroid - White Line seem on the backside of the Tab Bar...

android – White Line seem on the backside of the Tab Bar in Flutter Display


I’m going through a problem relating to the TabBar in flutter,I’ve used this TabBar as bottomNavigationBar property in my code.

The aim of utilizing a TabBar is that I’ve prime indicator so to realize that I’ve used it as bottomNavigationBar property.

Residence Display Picture

Please assist me resolve this seemed for a lot of options however not resolved :

class Residence extends StatelessWidget {

  HomeTabController homeTabController = Get.put(HomeTabController());

  Residence({tremendous.key});

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.appBarColor,
        physique: const SafeArea(
          youngster: CommonAppBar(),
        ),
        bottomNavigationBar: createTabBar(context),
    );
  }

  Widget createTabBar(BuildContext context) {
    return Container(
      top: DesignConstants.tabHeight,
      width: Get.width,
      youngster: TabBar(
        indicator: TopIndicator(),
        controller: homeTabController.tabController,
        labelPadding: EdgeInsets.all(0),
        tabs: homeTabController.tabs,
      ),
    );
  }
}

Controller Class

class HomeTabController extends GetxController with GetSingleTickerProviderStateMixin{

  late TabController tabController;

  remaining Record<Tab> tabs = <Tab>[];
  var tabpos = 0.obs;

  @override
  void onInit() {
    tremendous.onInit();

    getTabs();
    tabController = TabController(size: tabs.size, vsync: this);
  }

  void getTabs() {
    tabs.clear();
    tabs.add(createTab('Residence',"${ImagePaths.bottomMenuPath}/home_icon.svg",0));
    tabs.add(createTab('Matches',"${ImagePaths.bottomMenuPath}/home_icon.svg", 1));
  }

  Tab createTab(String textual content,String imagePath,int index) {
    return Tab(
        youngster: Obx(() => Middle(
          youngster: Column(
            kids: [
              SvgPicture.asset(
                imagePath,
                height: DesignConstants.bottomMenuIconSize,
                width: DesignConstants.bottomMenuIconSize,
              ),
              TextLanCommon(text.toUpperCase(),
                  style: (tabpos.value == index)
                      ? getnotificatontabselected()
                      : getnotificationtabunselected()),
            ],
          ),
        )));
  }

  @override
  void onClose() {
    tabController.dispose();
    tremendous.onClose();
  }
}

High Indicator Class

class TopIndicator extends Ornament {
  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _TopIndicatorBox();
  }
}

class _TopIndicatorBox extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Paint _paint = Paint()
      ..colour = AppColors.indicatorColor
      ..strokeWidth = 3
      ..isAntiAlias = true;

    canvas.drawLine(offset, Offset(cfg.dimension!.width + offset.dx, 0), _paint);
  }
}

I attempted utilizing theme and background colors however problem with the TabBar itself what I did improper.Please assist me resolve this



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments