Flutter 뉴스 API 연동하기(4) - 뉴스디테일 페이지
·
Flutter
이렇게 더보기 칸을 클릭하면 헤드라인 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..
Flutter 뉴스 API 연동하기(3) - 화면에 그리기
·
Flutter
이제 마지막으로 카드 안에 뉴스카드 하나하나를 만드는 작업을 해볼 것이다 큰 순서로는 전체 큰 카드 -> 뉴스 넣을 공간 만들 -> 뉴스 컬럼 -> 클릭하면 동작 될 함수 등으로 진행 될 것이다. [ buildNewsCard ] 전체적으로 큰 뉴스 카드를 만들고 그 안에 뉴스컬럼들을 넣어 준다. 나는 웹화면과 모바일 화면에 따라 뉴스 카드의 갯수가 다르게 보여지게 하기 위해 isBigScreen 을 넣어 웹 일 때와 아닐때를 구별해 화면을 그려주었다. Card buildNewsCard(bool isDarkMode, BuildContext context, double deviceWidth, List newsList) { var showCard = deviceWidth / 3; return Card( mar..
Flutter 뉴스 API 연동하기(1) - 기초 세팅
·
Flutter
오늘은 뉴스 api 를 가져와서 화면에 보여주는 작업을 해볼 것이다. 아래처럼! [API 사용 설정] 아래의 홈페이지에 들어가서 뉴스 API를 사용하기 위해 가입을 하고 API 키를 받아 준다. 키를 받고 문서에 들어가 보면 사용법을 제공한다. News API – Search News and Blog Articles on the Web “Ascender AI has a mission to apply AI to the media, and NewsAPI is one of our most valuable resources. Ascender is redefining how users interact with complex information, and the NewsAPI feed is an essential ..
해니01_15
'플러터api' 태그의 글 목록