Hello App/Flutter (28) 썸네일형 리스트형 Flutter _ Pause Play & Date Format 230527 오늘은 지난 시간에 이어 Timer를 업그레이드 해보겠다. 현재 플레이 버튼을 누르면 누를수록 1초씩 빨리 줄어들기 때문에 일시정지가 필요한 상황이다. 이러한 문제를 우선 해결해보자. 1. Pause Play 위와 같이 실행중일때의 상태를 저장하는 bool 타입의 변수를 선언하고 두 번째 Flexible에 있는 아이콘 위젯에 조건을 추가한다. 만약 isRunning이 True이면 Icon은 pause_circle_outline을 보여주고 만약 isRunning이 False이면 Icon은 play_circle_outline을 보여준다. 그리고 Timer가 실행되는 함수로 이동하여 타이머가 실행되면 setState()를 이용해 isRunning이 True가 되는 코드를 추가한다. 우리는 Icon.. Flutter _ Timer 230526 오늘은 지난 포스팅에 이어 Timer를 만들어 보겠다. Timer를 만들기 전에 세 번째 Flexible에 있는 Container의 모서리 부터 빠르게 둥글게 만들고 가자. BorderRadius.circular(50)을 적용 시켰다. 훌륭하다. 1. Timer 우리는 아래의 Button을 누르면 위의 숫자가 줄어드는 Timer를 만들것이다. 우선 시간을 나타내는 totalSeconds를 선언하고 25분을 초로 환산하면 1500초 이므로 1500이라 선언한다. 그리고 버튼을 눌렀을때 Timer가 실행되야 하므로 onStartPressed() 함수를 선언한다. 중요한 포인트는 Dart는 표준 라이브러리에서 Timer를 제공하는데 Timer를 통해 정해진 간격에 한번씩 함수를 실행할 수 있다. .. Flutter _ User Interface 230525 오늘은 Pomodoro라는 애플리케이션을 만들어 볼것이다. pomodoro는 생산성 기술인데 25분 일하고 5분 쉬는 것을 말한다. https://www.behance.net/gallery/98918603/POMO-UIKIT?tracking_source=search_projects%7Cpomo+uikit POMO | UIKIT This pet project is called "Pomo" which is an App based on the " Pomodoro Technique " www.behance.net Omar Sharif의 디자인을 사용하여 연습해보겠다. 우리가 직접 만들어볼 디자인은 위의 디자인이고 홈페이지에 나와있는 색상표를 토대로 위와 같이 Theme에 backgroundColor.. Flutter _ Build Context 230524 오늘은 Build Context에 대해 알아보고 실습해보겠다. 우선 Stateful Widget에서 Text를 위젯으로 추출해주자. 코드 작업 표시에서 Extract Widget을 선택하면 된다. Text 위젯을 MyLargeTitle로 추출하였다. 우리는 지금까지 Text 위젯을 만들때 하나하나 수작업으로 글씨 크기, 색상, 굵기를 한곳에서 수정하였다. 이러한 불편함 없이 Flutter가 준비한 앱의 모든 스타일을 한 곳에서 지정하는 기능인 Theme를 사용해보자. 1. Theme Theme를 사용하기 위해서_AppState 클래스의MaterialApp으로 가준다. 위와 같이 _AppState의 build()의 return값인 MaterialApp에 theme이 존재하고 theme에 Tex.. Flutter _ Stateful Widget 230523 우리는 지금까지 Stateless Widget을 build 메서드를 통해 UI를 출력만 해왔다. 이번에는 Stateful Widget을 구현해보자. Stateful Widget의 Stateful의 개념의 핵심은 상태를 가지고있다는 의미이다. 💡 State (상태) state는 위젯에 들어갈 데이터와 UI를 넣는곳이다. 상태에 따라 변하게 될 데이터를 생각할 수 있고 어떤 데이터가 변화하면 UI의 모습도 변하는 WIdget이라 생각하면 될 것 같다. Stateful Widget은 두 부분으로 나뉜다.1. state가 없는 위젯 그 자체2. state에 데이터가 들어와 가변하는 위젯 1. Create Stateful Widget stateful widget을 만드는 방법은 간단하다. 먼저 st를.. Flutter _ Reusable Widgets 230521 오늘은 저번 포스팅에 이어 계속해서 앱을 만들어 보겠다. 왼쪽의 노란색 Container에 이어 오른쪽의 검정계열의 Container을 만들어 보자. 우리는 현재 어플리케이션 화면의 2행에 위젯을 추가하고있고 똑같은 디자인의 Container를 2행의 첫 번재 Container뒤에 복사에서 붙여 넣은 다음 텍스트 색깔만 바꿔주었다. 결과 화면을 보니 우선 2개의 Container가 붙어있고 오른쪽에 이상한 문구 하나가 떠있다. 우선 위의 문구부터 설명을 하자면 앱의 위젯이 얼마만큼 벗어나있다고 경고해 주는 것이다. 이렇게 Flutter의 Debug모드 실행은 우리에게 아주 유익한 경고까지 해준다. 자 그럼 위의 문제를 해결해주기위해 padding의 값을 바꿔주자. 위와 같이 본문 UI의 pa.. Flutter _ Button Section 230520 오늘은 위의 빨간 사각형으로 표시된 부분을 만들어 보겠다. 우선 2번째 Row부분에 똑같이 sizedbox를 만들고 데이터를 넣어보자. 1행 1열의 마지막을 의미하는 Column 다음에 위와 같이 SizedBox를 넣어서 공간을 확보하고 Text를 정의해준다. 그러면 위와 같이 기존의 빨간 영역 아래로 노란영역 부분에 위젯이 들어간것을 확인할 수 있다. 하지만 우리가 본 예시는 해당 텍스트가 왼쪽에 붙어 있다. Padding된 메인 Column에 돌아와서crossAxisAlignment.start로시작 부분으로 붙여준다. 위와 같이 Padding도 적용되고 시작부분에도 붙어있는것을 확인할 수 있다. 그 다음 Text는 가격이므로 위의 Total balance라는 텍스트 부분을 그대로 복사해서.. Flutter _ Header 230518 자 이제 Flutter는 Widget으로 이루어져 있고 어떻게 사용되는지 확인 했으니 실제로 무언가를 만들어보자. https://dribbble.com/shots/19858341 Financial Mobile IOS App dribbble.com 위 사이트의 디자인을 참고해 만들어 보겠다. 위 사진과 같은 디자인을 만들기 위해 우선 배경 부터 건들어 보겠다. 1. Background Color 배경은 Scaffold의 Color? backgroundColor를 사용하면 된다. 위 코드와 같이 backgroundColor에서 Colors에 색을 입힐 수 있다. .method로 옵션 설정이 가능하다. 하지만 우리가 원하는 것은 검은 배경이므로 위와같이 black으로 바꿔 주었다. 2. Colum.. 이전 1 2 3 4 다음
