ListView 3

[Flutter, 토이 프로젝트] 가로,세로 요소 스크롤 & 스와이프 - ListView

목적 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, childre..

Flutter 2023.08.19

[Flutter] 탭으로 페이지 나누는 법 (사진 추가, ListView)

탭으로 페이지 나누는 법 페이지 나누는 방법 Navigator Router Tab 동적인 UI 만드는 방법 State 만들기 State에 현재 UI의 상태를 저장 화면 구현 State에 따라 Tab이 어떻게 보일지 작성 UX 경험 반영 유저가 쉽게 State 조작을 할 수 있도록 작성 구현 우선 state를 만들고 추후 변형 될 것을 위해 statefull 한 클래스로 변경 변수 생성 후 현재 상태 값을 넣어주기 보여질 값을 작성 state 변경 함수 작성 이후 현재 만들어 둔 BottomNavigationBar 에는 onPress가 없기에 onTap으로 state 변경 함수를 적용하기 여기서 파라미터 값을 추가해주고, 해당 파라미터 값은 items에 있는 버튼들의 종류를 의미 import 'packag..

Flutter 2023.08.09

[Flutter] 목록 ListView, Builder & 버튼 기능 구현

목록 ListView, Builder & 버튼 기능 구현 우선 좌측에 사진, 우측에 글이 있는 경우 예를 들어 페이스북 또는 인스타, 카톡의 유저 목록을 구현할 때 사용하면 좋은 것으로 ListTile() 이라는 위젯이 있다. ListTile()을 사용하면 Row를 하지 않아도 쉽게 레이아웃을 구현할 수 있는 장점이 있다. // 기존 숙제로 작성했던 코드 body: ListView( children: [ Row( children: [ Icon(Icons.person, size: 50), Text('홍길동', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400),) ], ), Row( children: [ Icon(Icons.person, size: 5..

Flutter 2023.07.30