당근마켓 FloationActionButton 만들기 (flutter)
오늘은 플러터로 프로젝트를 진행하다가 FloatingActionButton을 클릭했을 때
2개의 동작을 할 수 있게끔 만들어주고 싶어서 어떻게 해야할지 고민하다가
당근마켓 어플에 FloatingActionButton을 따라 만들어야겠다고 생각을 하게 되었다
지금 만들어 보긴 했는데,,, 똑같지는 않고 유사하다,,!
한 번 봐보도록 하자!
1, flutter_speed_dial 패키지를 pubspec.yaml 파일에 추가
이걸 가장 먼저 해줘야한다 왜냐하면 우리는 SpeedDial 이라는 새로운 패키지를 사용할 것이기 때문이다!
이렇게 추가를 해주고 pub get을 눌러주면 패키지 추가가 완료 되었다!
2, SpeedDial을 사용하는 함수 만들기
나 같은 경우에는 bottomNavi로 연결된 홈화면의 4개 화면중에 0번째랑 1번째 두 곳에서
floatingActionButton을 띄워야 하기 때문에
함수로 만들어서 사용을 해주었다!
Widget buildFloatingButton(){
return SpeedDial(
icon: Icons.edit,
activeIcon: Icons.delete_forever_outlined,
backgroundColor: AppColors.dark(8),
foregroundColor: Colors.white,
overlayColor: Colors.black,
overlayOpacity: 0.5,
spacing: 5,
spaceBetweenChildren: 4,
children: [
SpeedDialChild(
child: Icon(Icons.chat_outlined, color: Colors.white,),
backgroundColor: AppColors.dark(8),
label: '게시글',
onTap: (){
}
),
SpeedDialChild(
child: Icon(Icons.question_answer_outlined, color: Colors.white,),
backgroundColor: AppColors.dark(8),
label: 'Q&A',
onTap: (){
}
),
],
);
}
이게 내가 만든 함수이다
간단히 설명을 해보자면
icon : 기본적으로 화면에 처음 뜨는 floatingActionButton의 아이콘을 의미한다
activeIcon : active 상태가 되었을 때 뜨는 icon을 의미한다
spacing : 아이템 간의 간격을 의미한다
spaceBetweenChildren : 아이템과 버튼간의 간격을 의미한다
SpeedDialChild : 이것들을 active 상태가 되었을 때 뜨는 다른 항목들을 의미한다
3, floatingActionButton과 연결
이후 나는 위의 함수를 floatingActionButton과 연결했다
floatingActionButton: switch (selectIndex){
0 => buildFloatingButton(),
1 => buildFloatingButton(),
_ => SizedBox.shrink()
},
결과
