Flutter (12) 썸네일형 리스트형 Flutter - PageView에서 각 페이지의 값 유지하기 PageView에서 각 페이지를 넘기면 값이 초기화 된다. 내가 지금 만들고 있는 앱에서 각 Page에 TextField가 있는데 유저가 입력한 값을 저장하고 Page를 넘겨도 그래도 저장해야한다. https://cyj893.github.io/flutter/Flutter10/ Flutter - PageView: 페이지 스크롤해도 상태 저장하기, ExpandablePageView 등 cyj893.github.io 다음 블로그를 참고하였다. 근데 여기서 주의해야할게 PageView 위젯에 다음 과정을 바로하는게 아닌 상태를 저장할 item class에 해줘야한다. 그래서 다음 코드를 보면 PageView.builder에서 Container를 retrun 하는데 이걸 따로 커스텀 위젯을 만들어 거기서 위 블로.. Flutter - pageView, onPageChanged pageView 는 말그대로 여러개의 뷰가 페이지를 이뤄 슬라이드로 넘기는 식으로 구성되어 있다. https://api.flutter.dev/flutter/widgets/PageView-class.html PageView class - widgets library - Dart API A scrollable list that works page by page. Each child of a page view is forced to be the same size as the viewport. You can use a PageController to control which page is visible in the view. In addition to being able to control the pixel o.. Flutter - 자식이 위젯에서 부모 위젯의 state 바꾸기, input 받기 부모 위젯에서 받아온 값을 자식위젯에서 이벤트가 발생할때 바꾸려고 한다. 하지만 그냥 바꾸면 안된다. 간접적으로 조작하면 된다. 1. 미리 state를 조작하는 함수를 부모 위젯에 만든다. addOne(){ setState(() { total ++; }); } 함수명(){} 이렇게 함수를 정의하면 되고 값이 바뀌므로 setState를 사용함 이제 이 함수를 보내고, 등록하는것은 앞서했던 변수를 전달하는 방법과 같다. 사용자의 input 받기 유저가 textField에 입력한 내용을 가져오는 방법 class DialogUI extends StatelessWidget { DialogUI({Key? key,this.state,this.addOne}) : super(key: key); final state; f.. Flutter - 자식이 위젯에서 부모 위젯의 state 사용하기 자식이 위제에서 부모 위젯의 state를 사용하려면 3가지 단계가 필요하다 . (자식 => 부모) (동급 위젯 => 동급 위젯) 끼리는 state 전달 안됨 1. 보내기 2.자식 위젯에 등록하기 3.쓰기 1. 보내기 return DialogUI(state : a); DialogUI 위젯에 작명 : 보내고자 하는 state 를 파라미터로 담는다 2. 자식 위젯에 등록하기 class DialogUI extends StatelessWidget { DialogUI({Key? key,this.state}) : super(key: key); final state; 두 곳에 등록해줘야 한다. this.state final state 여기서 final 은 변수 var 과 같지만 나중에 변경이 안되는 변수를 만들때 사용.. Flutter - Dialog/ 모달창 만들기, context Dialog 팝업창, 모달창 같은거임 showDialog() 라는 기본함수에 파라미터 몇개 넣어서 쓰면됨 floatingActionButton: FloatingActionButton( child: Text('버튼'), onPressed: (){ showDialog(context: context, builder: (context){ return Dialog( child: Text('AlertDialog Title'), ); }, ); }, ), context, builder 이렇게 두개의 파라미터가 있다. builder에 return 으로 Dialog 함수를 넣어주면 된다. 하지만 이렇게 실행하면 에러가 난다. 이유를 알기전에 context에 대해 알아야한다. Context 비유하면 족보임 현재 위젯의 부.. Flutter - StatefulWidget 만들기 앱내에서는 많은 데이터들이 바뀐다. 이때 데이터가 바뀔때 그 값은 바뀌어도 렌더링이 안된다면 그 값을 그대로 표시가 된다. 이때 사용하는게 state 이다. state는 변수랑 똑같지만 변경사항이 생기면 위젯이 자동으로 재렌더링이 된다. state를 사용해보자 state를 만들려면 state 보관함 + 커스텀 widget 이렇게 한 세트를 만들어야한다. class 테스트 extends StatefulWidget { const 테스트({Key? key}) : super(key: key); @override _테스트State createState() => _테스트State(); } class _테스트State extends State { var a = 1; //여기 만드는 변수는 state가 됩니다 @ove.. Flutter - ListView.builder 앞서 ListView 로 스크롤이 생기는 여러 항목을 만들었는데 그 안에 Row를 이용해 Text 와 Icons을 넣었다. 하지만 ListTile을 이용하면 좀 더 수월하게 할 수 있다. ListTile 더 많은 속성들 https://youtu.be/l8dj0yPBvgQ ListTile( leading : Image.asset('assets/profile.png'), title : Text('홍길동') ) 이렇게 바로바로 넣어 줄 수 있다. 하지만 이것도 각 항목을 일일히 만드는데 목록을 동적으로 많이 만들경우에 ListView.builder() 를 사용한다. ListView.builder( itemCount: 20, itemBuilder: (context, i) { return Text('안녕'); }.. Flutter - 커스텀 위젯 코드가 길어지고 반복되는 코드는 커스텀 위젯을 만들어 따로 관리하는게 편하다 stless 치면 자동완성이 된다. class 작명하셈 extends StatelessWidget { const 작명하셈({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return 짧은단어로축약할위젯() } } 커스텀 위젯의 간단한 문법설명 flutter의 모든 위젯은 class임 class 안에는 많은 변수, 함수가 있어 직접 적는건 번거로워서 class를 복사해서 사용함 이때 extends 키워드를 사용함 복사하기 좋은 위젯 class 가 StatelessWidget 이고 이걸 복사해서 커스텀 위젯을 만듬 @override class.. 이전 1 2 다음
