I have a screen layout like newsfeed instagram When I come to this screen I got issue like this

problem I have parent screen where place the bottom bar :

 return Scaffold(
  body: homeScreenItems[_page],
  bottomNavigationBar: Offstage(
    offstage: isSwipeLeft,
    child: BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
          ),
          label: '',
          backgroundColor: primaryColor,
        ),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
            ),
            label: '',
            backgroundColor: primaryColor),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.video_camera_back_outlined,
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.favorite,
          ),
          label: '',
          backgroundColor: primaryColor,
        ),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.person,
          ),
          label: '',
          backgroundColor: primaryColor,
        ),
      ],
      onTap: onPageChanged,
      currentIndex: _page,
      backgroundColor: (_page != 2) ? primaryColor : blackColor,
      type: BottomNavigationBarType.fixed,
      selectedItemColor: (_page != 2) ? blackColor : primaryColor,
      unselectedItemColor: secondaryColor,
    ),
  ),
);

This is the place where I code of newsfeed:

 @override

Widget build(BuildContext context) { final width = MediaQuery.of(context).size.width;

return Scaffold(
  backgroundColor:
      width > webScreenSize ? webBackgroundColor : primaryColor,
  appBar: width > webScreenSize
      ? null
      : AppBar(
          backgroundColor: primaryColor,
          centerTitle: false,
          title: SvgPicture.asset(
            'assets/ic_instagram.svg',
            color: blackColor,
            height: 32,
          ),
          actions: [
            IconButton(
              icon: const Icon(
                Icons.add_box_outlined,
                color: blackColor,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.messenger_outline_rounded,
                color: blackColor,
              ),
              onPressed: onPress,
            ),
          ],
          automaticallyImplyLeading: false,
        ),
  body: PageStorage(
    bucket: bucketGlobal,
    child: ListView.builder(
      itemBuilder: (context, index) {
        return ItemFeed(
          userModel: DataDefault.userModelDemo,
          index: index,
        );
      },
      itemCount: DataDefault.userModelDemo.length,
      key: PageStorageKey<String>('listFeed'),
      shrinkWrap: true,
      padding: EdgeInsets.all(5),
      scrollDirection: Axis.vertical,
    ),
  ),
);

Finally is where I placed feed_Item:

     Widget buildFeedItem(List userModel, int index) {
    return Column(
      children: [
        //header
        Row(
          children: [
            CircleAvatar(
              backgroundImage: AssetImage(
                userModel[index]['userAvaUrl'],
              ),
            ),
            SizedBox(
              width: 5,
            ),
            Text(
              userModel[index]['userName'],
            ),
          ],
        ),
        SizedBox(
          height: 15,
        ),

        //image post
        GestureDetector(
          onDoubleTap: () {
            setState(() {
              isLikeAnimating = true;
              isHeartAnimating = true;
            });
          },
          child: Stack(
            alignment: Alignment.center,
            children: [
              // list postUrl
              SliderImage(
                listPost: userModel[index]['postUrl'],
              ),

              AnimatedOpacity(
                duration: const Duration(milliseconds: 200),
                opacity: isLikeAnimating ? 1 : 0,
                child: LikeAnimation(
                  isAnimating: isLikeAnimating,
                  child: Icon(
                    Icons.favorite,
                    color: isHeartAnimating ? errorColor : primaryColor,
                    size: 100,
                  ),
                  duration: const Duration(
                    milliseconds: 400,
                  ),
                  onEnd: () {
                    setState(() {
                      isLikeAnimating = false;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            // color: blueColor,
            child: Row(
              children: [
                //icon like
                CustomIcon(
                  child: Icon(
                    isHeartAnimating
                        ? Icons.favorite_rounded
                        : Icons.favorite_border,
                    color: isHeartAnimating ? errorColor : blackColor,
                    size: 30,
                  ),
                  onPress: () {
                    setState(() {
                      isLikeAnimating = true;
                      isHeartAnimating = !isHeartAnimating;
                    });
                  },
                  isAnimating: isLikeAnimating,
                  onEnd: () {
                    setState(
                      () {
                        isLikeAnimating = false;
                      },
                    );
                  },
                ),
                SizedBox(
                  width: 10,
                ),
                //icon comment
                CustomIcon(
                  child: Icon(
                    Icons.chat_bubble_outline,
                    color: blackColor,
                    size: 30,
                  ),
                  onPress: () {
                    setState(() {
                      isCommentAnimating = true;
                    });
                  },
                  isAnimating: isCommentAnimating,
                  onEnd: () {
                    setState(
                      () {
                        isCommentAnimating = false;
                      },
                    );
                  },
                ),
                SizedBox(
                  width: 10,
                ),
                //icon share
                CustomIcon(
                  child: Icon(
                    Icons.send,
                    color: blackColor,
                    size: 30,
                  ),
                  onPress: () {
                    setState(() {
                      isShareAnimating = true;
                    });
                  },
                  isAnimating: isShareAnimating,
                  onEnd: () {
                    setState(
                      () {
                        isShareAnimating = false;
                      },
                    );
                  },
                ),

                //icon save
                Expanded(
                  child: Align(
                    alignment: Alignment.bottomRight,
                    child: CustomIcon(
                      child: Icon(
                        isSave
                            ? Icons.bookmark_added_rounded
                            : Icons.bookmark_border,
                        color: isSave ? saveColor : blackColor,
                        size: 30,
                      ),
                      onPress: () {
                        setState(() {
                          isSaveAnimating = true;
                          isSave = !isSave;
                        });
                      },
                      isAnimating: isSaveAnimating,
                      onEnd: () {
                        setState(
                          () {
                            isSaveAnimating = false;
                          },
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

 

     @override
      Widget build(BuildContext context) {
        return Container(
          key: PageStorageKey<String>('listFeed'),
          child: buildFeedItem(
            widget.userModel,
            widget.index,
          ),
        );
      }

Where did I do wrong? Please help me

CodePudding user response：

Positioned need a StackParentData as it's parent. But Column is not.

Put Positioned in Stack may resolve your problem.