파파비의 블로그

stateless widget 의 LifeCycle은 쉽습니다. 생성자 > Build() 이게 전부입니다. immutable한 객체이다 보니 이게 끝입니다. stateful widget은 다릅니다. stateful widget의 생성자 > stateful widget의 create state > state의 생성자 > state의 init state > build > didupdatewidget > build > dispose 이렇게 있을 수 있습니다. stateful widget의 생성자는 build가 실행될 때마다 다시 실행됩니다. 매우 여러번 실행됩니다. but, stateful widget의 create state, state의 생성자, state의 init state 은 한번씩만 실행됩니다. s..

widget tree를 다시 빌드하는 것이 비용이 많이 들지는 않지만, 어떤 위젯들은 절대 바뀌지 않는데도 다시 그려지면 그것은 낭비라고 할 수 있습니다. 우리는 조건을 충족하는 위젯들에 한해서 build가 실행되어도 다시 build가 되도록 하지 않게 할 수 있습니다. 위젯을 생성할 때 앞에 const 를 붙여주면 됩니다. 이런식으로 말이죠. 당연히 해당 위젯은 stateless여야하고, 생성자의 값이 시종일관하여 앱이 끝날 때까지 변하지 않는 그런 위젯이어야합니다. 생성자에 들어가는 인자의 값이 dynamic하면 앞에 const를 붙일 수 없습니다. 이 chartbar 위젯은 stateless지만, 들어가는 값들이 map의 value들이라서 dynamic합니다. 따라서 앞에 const를 붙일 수가 없..

플러터는 60fps를 목표로 합니다. 그래서 1초에 60번 화면을 다시 그립니다. 이게 무리가 가진 않을까요? 아닙니다. 1초에 60번 계산하고, 화면을 그리면 무리가 갈 순 있는데, 플러터는 변경사항이 없다면 이전 계산값을 그대로 사용합니다. 계산량을 확 줄일 수 있죠. setstate이 실행되면 build가 자동으로 실행되고, build가 실행되면 해당하는 코드들이 실행이 되면서 아시다시피 위젯들은 '객체'이기도 하기에 기존 객체들은 사라지고, 새로운 객체들로 대체 된다. 객체가 새롭게 생긴다면 화면에 다시 그려야 하는게 아닐까? 아니다. 플러터는 3개의 Tree로 구성되어 있다. Widget Tree - Element Tree - Render Tree 1) Widget Tree - 위젯트리는 우리가..

1. dart.io 파일 import 2. Platform객체를 통해 ios인지 안드로이드 인지 등 파악 가능하다. 안드로이드랑 ios에 따라 위젯들 모양이 다른 것들이 있다. 그런 것들은 .adaptive를 붙여주기만 하면, 운영체제에 따라 다르게 렌더링 된다. 바로 아래처럼 말이다. 이거 외에도 운영체제 자체를 파악하고 그에 따라 쿠페티노 위젯을 사용하든가 머테리얼 위젯을 사용하든가 하는 식의 코딩도 가능하다.

혹시 차이를 알겠나요? portrait 모드일 때는 지우는 버튼 옆에 텍스트가 없지만 land 모드 일때는 텍스트가 있습니다. 하지만 이게 방향에 따른 것은 아니고, portrait이어도 화면이 충분히 크다면, Delete 텍스트가 추가됩니다. 이렇게 방향에 따른 레이아웃 변화가 아니라 화면 사이즈에 따른 위젯 변화는 어떻게 줄까요 ? 여기를 보면 트레일링 부분에 MediaQuery를 통해 threshold를 걸어두고, 그 사이즈에 따라 생성되도록 만들어두었습니다. 이런 방법도 가능합니다. + FlatButton.icon은 FlatButton + Icon + Text가 가능한 조합의 위젯입니다!

플러터에서는 화면 방향에 따라 어떻게 대응할 수 있을까요? 1. build시 orientation을 파악합니다. (orientation이 바뀌면 build가 실행됩니다.) 이렇게 시작하자 마자 말이죠. return으로 위젯들이 만들어지기 전에요. 참고로 MediaQuery를 통해서 화면 방향 값을 찾을 수 있습니다. 2. 방향에 따라 준비된 레이아웃을 실행합니다. 여기를 보면 child에 isLandscape? 인지 먼저 파악하고 그에 따라 빌드를 다르게 합니다. 여기에서 저는 참고로 portrait일 때는 한 화면에 다 보이게 빌드를 했지만, landscape일 때는 switch를 추가적으로 넣었고, 스위치에 따라 chart가 보여질지, 아니면 다른 리스트 항목이 보여질지 정할수 있도록 해놨었습니다.

1. service 패키지를 import 한다. 2. 진입점인 main 메소드에서, runApp실행전에, WidgetsFlutterBind.ensureInitialized(); 를 실행한다. 3. 그 뒤에 가능한 방향을 리스트로 정해서 SystemChrome.setPreferredOrientations안에 인수로 넣어준다.

앱의 크기에 따라 위젯들의 사이즈를 조절할 수 있으면 얼마나 좋을까요 가능합니다. 이런 개념을 '반응형' 이라고 하며 우리는 그것을 MediaQuery과 LayoutBuilder라는 class를 통해 구현할 수 있습니다. 1. 이 앱은 크게 2가지로 구성되어 있습니다. Chart위젯과 TransactionList위젯입니다. 해당 위젯들이 화면 3:7로 나누어먹으려고 하는데, 고정사이즈로 하면 당연히 화면사이즈가 바뀔 때마다 대응을 하지 못하겠죠. 그래서 우리는 MediaQuery.of(context).size.height을 이용합니다. 이 사이즈는 앱의 화면 크기를 나타내고 따라서, appbar와 그 위의 상태바까지 포함된 크기입니다. 따라서 우리는 그 부분을 제외해주고 3:7로 비율을 나누어야 합니다...