Firstly, I am having a problem that I cannot align the icons with the slide in the center.

How can I align it perfectly?

error in layout in widget inspector in the row:

code:

/// bottom nav bar
      Row(
      children: [
        SizedBox(
          width: size.width,
          height: size.height / 10,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                alignment: Alignment.center,
                child: ClipRRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 15,
                      sigmaY: 15,
                    ),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Theme.of(context).brightness == Brightness.light
                            ? const Color.fromRGBO(184, 99, 99, 0.28)
                            : const Color.fromRGBO(255, 255, 255, 0.1),
                        border: Border(
                          top: BorderSide(
                            width: 1,
                            color:
                                Theme.of(context).brightness != Brightness.light
                                    ? Colors.white.withOpacity(0.2)
                                    : Colors.pink.withOpacity(0.2),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),

              /// slide
              Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: Theme.of(context).brightness == Brightness.light
                        ? const AssetImage('assets/images/lgt_slide.png')
                        : const AssetImage('assets/images/drk_slide.png'),
                    fit: BoxFit.fill,
                  ),
                ),
              ),

              /// bar items
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  bnbItems('assets/icons/icn1.png', 0, 25.33),
                  bnbItems('assets/icons/icn2.png', 0, 32),
                  bnbItems('assets/icons/icn3.png', 0, 33.33),
                  bnbItems('assets/icons/icn4.png', 0, 17),
                  bnbItems('assets/icons/icn5.png', 0, 30),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget bnbItems(String image, int index, double height) {
    return GestureDetector(
      onTap: () => setState(() {
        selectedIndex = index;
      }),
      child: Image.asset(
        image,
        height: height,
      ),
    );
  }

For animation I want the slide to move to the item I select.

What will be the best way to do so?

CodePudding user response：

You can check out circular_bottom_navigation package, it may suit your case

CodePudding user response：

1. Centering

To me it looks like the size of the assets images might be different or they centre of the image might not be where it seems to be, you can check it by wrapping image in a coloured container to see it's size or just use Widget inspector tool.

2. Animations

I suggest you use presets like this https://gallery.flutter.dev/#/demo/bottom-navigation

Other option would be to use PositionedTransition on your Container, or SlideTransition. Here is an example https://api.flutter.dev/flutter/widgets/PositionedTransition-class.html