워라밸을 꿈꾸는 사람

(내가 만들고 있는 앱에도 꼭 필요한 기능이었는데, 마침 있어서 매우 기분이 좋았다.)1. 일단, 좋아하는 것들을 표시하는 아이콘 부터 만든다.detail_screen.dart에서 appBar에 다음과 같이 actions에 iconbutton을 만든다. appBar: AppBar( elevation: 2, surfaceTintColor: Colors.white, shadowColor: Colors.black, foregroundColor: Colors.green, centerTitle: true, actions: [ IconButton( onPressed: () {}, ..

이번에는 Flutter에서 브라우저를 여는 방버에 대해서 공부해볼 것이다.(url_launcher를 다운받자: https://pub.dev/packages/url_launcher)그리고, pub.dev에 있는 Configuration을 참조하면 된다.2024.12.10기준으로 보자면...1. iOS의 경우LSApplicationQueriesSchemes sms tel이 친구를 Info.plist 파일로 복사 붙여넣기 하면 된다.일반적으로, 파일 위치는 다음과 같다: ./ios/Runner/Info.plist2. Android의 경우 이 친구를 AndroidManifest.xml 파일에 추가하면 된다.일반적으로, 파일 위치는 다음과 같다..

이 사진처럼 만들려고 한다.ListView를 이용해도 괜찮지만, 개수가 많지 않기 때문에 Column을 이요하려고 한다.조금 더 쉽고 원하는 대로 수정할 수 있기 때문이다.그리고, collection for을 이용한다. FutureBuilder( future: episodes, builder: (context, snapshot) { if (snapshot.hasData) { return Column( children: [ for (var episode in snapshot.data!) ..

이번에는 다음 사진처럼 웹툰의 디테일한 내용을 표시할 것이다.home_screen에서 사용했던 방식과 동일하기 때문에, 간단하다. const SizedBox( height: 25, ), FutureBuilder( future: webtoon, builder: (context, snapshot) { if (snapshot.hasData) { return Padding( padding: const EdgeInsets.symmetric( horizontal: 50.0, ..

이제 detail한 정보들을 가져와서 화면에 표시하도록 해볼 것이다.이때, detail_screen.dart에다가 home_screen.dart에서 했던 것 처럼 하면 된다고 생각하면 안된다.그러니까, 다음과 같이 하면 안된다.class DetailScreen extends StatelessWidget { final String title, thumb, id; Future webtoon = ApiService.getToonById(id); const DetailScreen({ super.key, required this.title, required this.thumb, required this.id, });이렇게 단순히:FutureWebtoonDetailModel> webto..

이번에는 웹툰의 썸네일과 제목만 가져오는 것을 넘어서, 웹툰의 상세정보와 최근 에피소드들을 가져오는 것들을 만들 것이다.일단 model 파일을 만들자.webtoon_detail_model.dartclass WebtoonDetailModel { final String title, about, gnere, age; WebtoonDetailModel.fromJson(Map json) : title = json['title'], about = json['about'], gnere = json['genre'], age = json['age'];}webtoon_episode_model.dartclass WebtoonEpsiodeModel { final String..

6.9에서 했던 것들을 Hero widget을 사용하면 아주 재미있는 것들을 많이 구현할 수 있다고 한다.이번에는 썸네일이 새로 로드되는 것이 아닌, 기존 썸네일이 이동해서 동일한 썸네일임을 명확히 할 수 있도록 하려고 한다.사용법Hero widget을 두 개의 화면에 각각 사용각각의 위젯에 같은 태그를 주기끝이다. 너무 쉬운데, 사실 이를 Hero없이 구현하려면 막막한데...썸네일만 가져올 것이기 때문에, 썸네일을 담고 있는 'Container'를 Hero widget으로 감싸면 된다.다음과 같이 말이다.webtoon_widget.dart Hero( tag: id, child: Container( width: 250, ..

웹툰 썸네일을 선택하면 상세정보를 볼 수 있도록 하는 부분을 만들 것이다.'GestureDetector'를 사용한다.Column을 GestureDetector로 감싼다.Column의 각 뭐라고 해야돼 그 각각의 데이터? 아무튼 그거를 자동으로 인식하는 듯 하다.GestureDetector에서 어떤 Gesture를 Detect할지를 이제 설정해야 한다.onTap을 사용할 것이다. -> 터치할 때를 의미한다.이때, onTap은 onTapDown + onTapUp인데, 각각은 '터치 할 때'와 '터치 하고 손을 뗄 때'를 의미한다.detail_screen.dart 파일을 screens폴더에 미리 만들어 놓자.새로운 화면을 띄울 때에는 Navigator를 사용한다.Navigator에는 Navigator.pop,..

ListView.separated가 안에 있는 것이 지저분해서 밖으로 빼자.Extract Method의 code action을 이용했고, 이름은 makeList로 하였다:  ListView makeList(AsyncSnapshotListWebtoonModel>> snapshot) {    return ListView.separated(      scrollDirection: Axis.horizontal,      itemCount: snapshot.data!.length,      itemBuilder: (context, index) {        var webtoon = snapshot.data![index];        return Text(webtoon.title);      },      se..

FutureBuilder 부분을 다음과 같이 바꾸자.      body: FutureBuilder(        future: webtoons,        builder: (context, snapshot) {          if (snapshot.hasData) {            return ListView(              children: [                for (var webtoon in snapshot.data!) Text(webtoon.title)              ],            );          }          return const Center(            child: CircularProgressIndicator(),     ..