@override
  Widget build(BuildContext context) {
    return Consumer<ArticalProvider>(
      builder: (context, articalP, child) {
        return articalP.isLoading || articalP.articalData == null
            ? Scaffold(body: Center(child: CircularProgressIndicator()))
            : Builder(builder: (context) {
                final articalData = articalP.articalData!;
                final category = articalData.category;
                return Scaffold(
                    floatingActionButtonLocation:
                        FloatingActionButtonLocation.centerDocked,
                    floatingActionButton: _floatingButton(context, widget.id),
                    body: CustomScrollView(
                      controller: _scrollController,
                      physics: BouncingScrollPhysics(),
                      slivers: <Widget>[
                        SliverAppBar(
                          shadowColor: color00.withOpacity(.25),
                          pinned: true,
                          snap: false,
                          floating: false,
                          flexibleSpace: FlexibleSpaceBar(
                            background: MyCachedNetworkWidget(
                                imageUrl: articalData.thumbnailImage),
                          ),
                          expandedHeight: 308,
                          backgroundColor: primaryColor,
                          leading: IconButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              icon: Icon(Icons.arrow_back)),
                          title: Transform.translate(
                            offset: Offset(-20, 0),
                            child: Text(articalData.title, style: whiteBold18),
                          ),
                          actions: <Widget>[
                            Transform.translate(
                              offset: Offset(10, 0),
                              child: IconButton(
                                  onPressed: () {},
                                  icon: Icon(
                                    Icons.share_outlined,
                                    color: white,
                                  )),
                            ),
                            Consumer<BookmarkProvider>(
                              builder: (context, bookmarkP, child) =>
                                  IconButton(
                                      onPressed: () => Functionality.bookMark(
                                          context: context, id: widget.id),
                                      icon: Icon(
                                        bookmarkP.isBookmarked(widget.id)
                                            ? Icons.bookmark_outlined
                                            : Icons.bookmark_outline,
                                        color: white,
                                      )),
                            )
                          ],
                        ),
                        SliverList(
                            delegate: SliverChildListDelegate([
                          ListView(
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            padding: EdgeInsets.zero,
                            children: [
                              Padding(
                                padding: const EdgeInsets.all(20)
                                    .copyWith(bottom: 0),
                                child: Column(
                                  children: [
                                    IntrinsicHeight(
                                      child: Row(
                                        children: [
                                          Container(
                                              width: vDividerSize,
                                              color: secColor),
                                          widthSpace10,
                                          Expanded(
                                            child: Text(articalData.title,
                                                style: blackSemiBold16),
                                          ),
                                        ],
                                      ),
                                    ),
                                    heightSpace5,
                                    Row(
                                      children: [
                                        MyCachedNetworkWidget(
                                          imageUrl: category.image,
                                          height: 2.15.h,
                                          width: 2.h,
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 5),
                                          child: Text(category.name,
                                              style: color94Medium14),
                                        ),
                                        Image.asset(clockIcon,
                                            height: IconSize.tiny),
                                        Padding(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 5),
                                          child: Text(
                                              formatTimeAgo(
                                                  articalData.createdAt),
                                              style: color94Medium14),
                                        ),
                                        Image.asset(viewIcon,
                                            height: IconSize.tiny),
                                        Padding(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 5),
                                          child: Text(
                                              '${articalData.viewCount} view',
                                              style: color94Medium14),
                                        ),
                                      ],
                                    ),
                                    heightSpace20,
                                    HtmlWidget(articalData.description),
                                    heightSpace20,
                                  ],
                                ),
                              ),
                              ..._relatedNews(articalP)
                            ],
                          )
                        ]))
                      ],
                    ));
              });
      },
    );
  }