[Flutter] Flutter Create slide animation bottom bar (MFN)

enter image description hereWriting Your Own Flutter Study Notes: Step 1

CWidget is a library I use. It serves the same purpose as StatelessWidget.

I was looking for a slide animation bar library, but I couldn't find any that I liked, so I decided to create my own. I used GetX, and I'm happy to see that the slide functionality works correctly.

// stl widget

class SlideBottomBar extends CWidget {
SlideBottomBar({super.key});
final homeController = Get.put(HomeController());

@override
Widget build(BuildContext context) {
// double screenWidth = MediaQuery.of(context).size.width;
double screenWidth = Get.width;
// build container 개수 만큼 screen width 에서 나누기
double buttonWidth = (screenWidth / 4) - 17; // (margin + padding) / 2

return Obx(
() => CContainer(
decoration: BoxDecoration(
color: Colors.grey[900],
borderRadius: BorderRadius.circular(100),
),
margin: const EdgeInsets.all(24),
padding: const EdgeInsets.all(10),
child: Stack(
children: [
// 슬라이드 애니메이션
AnimatedPositioned(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
left: homeController.sliderPosition * buttonWidth,
child: CContainer(
width: buttonWidth,
height: 40,
decoration: BoxDecoration(
color: Colors.white, // 슬라이더 색상
borderRadius: BorderRadius.circular(100),
),
),
),
CRow(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildBottomButton(0, Icons.home, "홈", buttonWidth),
_buildBottomButton(1, Icons.business, "비즈니스", buttonWidth),
_buildBottomButton(2, Icons.school, "학교", buttonWidth),
_buildBottomButton(3, Icons.person, "프로필", buttonWidth),
],
),
],
),
),
);
}

Widget _buildBottomButton(
int index, IconData icon, String label, double width) {
return CContainer(
onTap: () {
if (homeController.selectedIndex == index) {
return;
}
homeController.selectedIndex = index; // 선택된 인덱스 변경
homeController.sliderPosition = index; // 슬라이더 위치 변경

print(index);
switch (index) {
case 0:
Get.toNamed('/');
break;
case 1:
Get.toNamed('/b');
break;
case 2:
Get.toNamed('/c');
break;
case 3:
Get.toNamed('/d');
break;
default:
print('Invalid index');
break;
}
},
width: width,
height: 40,
child: CRow(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: Colors.grey),
homeController.selectedIndex == index
? CText(
label,
textStyle: const TextStyle(color: Colors.grey),
)
: Container(),
],
),
);
}
}


: Getx controller

class HomeController extends GetxController {
final _selectedIndex = 0.obs;
final _sliderPosition = 0.obs;

get selectedIndex => _selectedIndex.value;
set selectedIndex(value) => _selectedIndex.value = value;

get sliderPosition => _sliderPosition.value;
set sliderPosition(value) => _sliderPosition.value = value;

PageController pageController = PageController();

onItemTapped(int index) {
selectedIndex = index; // 선택된 인덱스를 업데이트
pageController.animateToPage(index, // 페이지 전환 애니메이션
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut);
}

@override
void dispose() {
pageController.dispose(); // PageController 해제
super.dispose();
}
}


There's nothing specific to explain in words, but Stack Overflow suggests writing longer posts.

If any developers have alternative methods for creating a slide animation bottom bar, please leave a comment on the post. Thank you!

Continue reading...