Flutter 로 웹툰 앱 만들기
1.Introduction
멀티 플랫폼 개발 지원이제 ios, android, web, IOT.. 전부다 된다!!세가지 앱을 만들어볼 예정이다dart는 꼭 알아보고 오자dart + flutter 면 다 만들 수있어서 가성비오짐!!woderous엄청 예쁜 플러터로 만든 앱임!!!웹도됨..ㄷㄷflu
2.HELLO FLUTTER
시뮬레이터 설치하기\[https://flutter-ko.dev/docs/get-started/install/macos위에서 그냥 따라하면 된다..!그냥..웹에서도 할 수있다 플러터code . 으로 terminal 에서 vsc 열기https://www.
3.UI CHALLENGE - 1
Column 안에 Row안에 Column안에 Text를 배치하기 위해 위와 같이 코드를 작성했다.위와같이 색상코드까지 다 줘도모서리에 박혀있다.그렇기에 SizedBox를 줘보자그러면 위와 같이 내려온다!mainAxisAlignment: MainAxisAlignment.
4.UI CHALLENGE - 2 (셋팅)
상수들을 constant로 지정안해서 파란색 밑줄이 뜬다위를 setting.json에 작성해준다.그러면 자동으로 const로 변환해준다.. 대박.."dart.previewFlutterUiGuides": true,위를 추가해주면부모를 알려주는 줄이 생긴다..요 전구에 대
5.UI CHALLENGE - 3(Reusable Widgets)
"editor.formatOnSave": true, 가 자동으로 에딧해줘서 완전 편함Error Lense 설치도 하면 에러를 화면에서 바로 알려준다.이전 버튼을 복사해서 사용하면화면에 overflow가 발생함을 알려준다.버튼 크기를 줄이고, 색상을 바꾸고, 붙어 있는
6.UI CHALLENGE - 4(Cards)
이런 카드를 만들어보자backgroundColor.Colors.white.withOpacity(0.8),withOpacity를 가지고 있으면 const배열에 넣으면 안된다.SizedBox를 주고 Row에 작성한 Text를 떨어뜨려야한다.어떻게 해야할까?mainAxisA
7.UI CHALLENGE - 5(Challenge)
Transform.translate를 card안에서 설정가능하게 하자!즉, 투명도를 컴포넌트의 맴버로 만들어라는거다 위젯에서final double gap;required this.gap,offset: Offset(0, gap),를 줘서아래와 같이 만들었다.메인 - 카드