이렇게 더보기 칸을 클릭하면 헤드라인 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..

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

Flutter 에서는 라이트모드/다크모드를 지원해 준다. 좋다.. 색상 정의 우선 사용 할 색상을 정의해준다. Colors.dart라는 파일을 하나 생성해서 LightColors 클래스와 DarkColors 클래스를 만들어주었다. 상수값이고 전역적으로 접근해야할 클래스는 멤버를 static const로 작성해 준다. static으로 선언했기 때문에 인스턴스화없이 접근할 수 있고 const로 정적바인딩 되므로 런타임에서 값을 변경할 수 없어 안전하다. // Colors.dart import 'package:flutter/material.dart'; import 'package:get/get.dart'; class LightColors { // color define static const Color bas..

이렇게 달러를 클릭하면 달러의 주식가격이 원을 클릭하면 원화 가격이 나오게 토글버튼을 구현 해보려고 한다. 먼저 토글 버튼과 금액을 다른 컨테이너로 움직이기 때문에 (눈속임... 이라고 할 수 있음) 토글 버튼을 먼저 구현 하는 것을 정리해 보려고 한다. 코드는 아래와 같고 토글 버튼은 켰다 껐다 의 개념으로 true, false 를 주어 해당 버튼이 어떤 상태인지 인지하게 해준다. isSelected = [ture, false]; ToggleButtons( fillColor: Colors.grey, selectedColor: Colors.white, selectedBorderColor: Colors.white, onPressed: (int index) { for (int buttonIndex = 0; ..