이렇게 더보기 칸을 클릭하면 헤드라인 TOP20 뉴스를 보여줄 페이지로 이동하게끔 구현하는 것을 진행해 보려고 한다. 우선 더보기 버튼은 이미 만들어 주었기 때문에 생략하고 더보기 이후 어떤 로직들이 발생하는지 알아보자 Center( child: TextButton( onPressed: () { Navigator.of(context).push( MaterialPageRoute(builder: (context) => NewsDetailPage())); }, child: Text("더보기", style: TextStyle( fontSize: textSizeSmall2, color: isDarkMode ? Colors.white : Colors.black)), ), ) 더보기를 누르면 NewsDetailPag..

회사에서 gitlab으로 프로젝트를 공유하고 있었다. 처음에는 master로 작업을 했었는데 main branch를 따로 파서 거기에 작업을하고 최종적으로 master에 올리는 작업을 하고 싶었다. clone 진행 먼저 폴더를 생성할 곳에 가서 git bash here를 켜서 clone 을 해준다 git clone {주소} branch 확인하기 클론 받은 폴더에 들어가서 ( cd 폴더명) 현재 어떤 브랜치를 사용 중 인지 확인한다. git branch main 체크아웃 Git에서 체크아웃이라는 것은 일반적으로 코드 저장소(repository)에서 특정 브랜치(branch)로 전환하는 작업을 말하는데 현재는 master 밖에 없음으로 checkout 을 통해 main으로 전환하는 작업을 한다. git ch..

이제 마지막으로 카드 안에 뉴스카드 하나하나를 만드는 작업을 해볼 것이다 큰 순서로는 전체 큰 카드 -> 뉴스 넣을 공간 만들 -> 뉴스 컬럼 -> 클릭하면 동작 될 함수 등으로 진행 될 것이다. [ buildNewsCard ] 전체적으로 큰 뉴스 카드를 만들고 그 안에 뉴스컬럼들을 넣어 준다. 나는 웹화면과 모바일 화면에 따라 뉴스 카드의 갯수가 다르게 보여지게 하기 위해 isBigScreen 을 넣어 웹 일 때와 아닐때를 구별해 화면을 그려주었다. Card buildNewsCard(bool isDarkMode, BuildContext context, double deviceWidth, List newsList) { var showCard = deviceWidth / 3; return Card( mar..

저번에 세팅 해 뒀던 뉴스 API 를 받아와서 파싱 해서 보여주기를 진행해 보려고 한다. Flutter 뉴스 API 연동하기(1) - 기초 세팅 오늘은 뉴스 api 를 가져와서 화면에 보여주는 작업을 해볼 것이다. 아래처럼! [API 사용 설정] 아래의 홈페이지에 들어가서 뉴스 API를 사용하기 위해 가입을 하고 API 키를 받아 준다. 키를 받고 문 henniee.tistory.com [ News 클래스 만들기 ] 통신을 통해 받아 온 값들을 넣어 둘 News 클래스가 필요하다. 지난번에 포스트맨을 통해 어떤 값들을 해당 사이트에서 주는 지를 확인 했기 때문에 그 값들 중 사용 할 값들만 가지고 클래스를 만들어 준다. 나는 타이틀과, 이미지, 어느 뉴스사 인지 그리고 url 을 파싱해 올 예정이다. 따..