목적
- ElevatedButton이 여러개 담겨있는 공간을 가로로 스크롤 & 스와이프 하여 확인할 수 있도록 하기.
코드
- ListView() 위젯을 활용
- 가로로 스크롤 하고 싶다면
- scrollDirection: Axis.horizontal
- 세로로 스크롤 하고 싶다면
- scrollDirection: Axis.vertical
class SwipeRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 60,
margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: ListView(
scrollDirection: Axis.horizontal,
children: [
ElevatedButton(onPressed: () {}, child: Exchange(), style: ElevatedButton.styleFrom(backgroundColor: Colors.white),),
ElevatedButton(onPressed: () {}, child: Exchange(), style: ElevatedButton.styleFrom(backgroundColor: Colors.white),),
ElevatedButton(onPressed: () {}, child: Exchange(), style: ElevatedButton.styleFrom(backgroundColor: Colors.white, elevation: 1),),
ElevatedButton(onPressed: () {}, child: Exchange(), style: ElevatedButton.styleFrom(backgroundColor: Colors.white, elevation: 1),),
ElevatedButton(onPressed: () {}, child: Exchange(), style: ElevatedButton.styleFrom(backgroundColor: Colors.white, elevation: 1),),
// 원하는 만큼 버튼을 추가해도 됨.
],
),
);
}
}
'Flutter' 카테고리의 다른 글
[Flutter, 토이 프로젝트] CustomScrollView 안의 패딩 위젯 - SliverPadding (0) | 2023.08.21 |
---|---|
[Flutter, 토이 프로젝트] ElevatedButton Radius 변경 - styleFrom (0) | 2023.08.19 |
[Flutter, 토이 프로젝트] 아이콘 좌우 반전 - Matrix4 (0) | 2023.08.19 |
[Flutter, 토이 프로젝트] BottomNavigationBar (0) | 2023.08.18 |
[Flutter] 반응형으로 스크린 사이즈 대응하기 & 유용한 패키지 (0) | 2023.08.17 |