워라밸을 꿈꾸는 사람

StatefulWidget에게는 lifecycle이 있다.(이벤트에 반응한다.)MyLargeTitle 위젯을 StatefulWidget으로 바꿔보자.변수를 초기화 하려면...이전처럼 그냥 해도 되지만...  @override  void initState() {    // TODO: implement initState    super.initState();  }이렇게 하는 방법도 있다. 사실은 거의 대부분의 경우에서 필요 없다고 한다.하지만, 가끔 부모 요소에 의존하는 데이터를 초기화해야 하는 경우가 있다.ex) API를 통해서 구독 정보를 업데이트 하는 경우.initState는 항상 build보다 먼저 호출되어야 한다!그리고, 단 한번만 호출된다!initState가 실행되고 그 후에 build가 실행된다..

BuildContext.Flutter 공식 문서에 따르면...https://api.flutter.dev/flutter/widgets/BuildContext-class.html BuildContext class - widgets library - Dart APIA handle to the location of a widget in the widget tree. This class presents a set of methods that can be used from StatelessWidget.build methods and from methods on State objects. BuildContext objects are passed to WidgetBuilder functions (such as Stat..

이제 여기에서 setState가 등장한다.setState는 State클래스에게 위젯에 새로운 데이터가 있다고 알려주는 것이다.따라서 이 함수를 호출하면 build method를 호출해서 다시 렌더링 한다.  void onClicked() {    setState(() {      counter = counter + 1;    });  }  void onClicked() {    counter = counter + 1;    setState(() {});  }이 두 가지 방법 모두 가능하다.그러니까, setState함수는 단순히 변경된 데이터가 있음을 알리는 역할이다.하지만, 가독성을 위해서(어디가 변했는지 명확하게 보기 위해서) 함수 안에다가 넣자.끝.

드디어 StatefullWidget이 시작된다.지금까지 했던 toonflix는 그냥 없애버리고...버튼을 누르면 숫자가 올라가는 코드를 만들어 볼 것이다.statefullWidget을 만들자.(자동으로 만들어 준다)그러면 두 부분으로 나누어져 있는 것을 볼 수 있다.위에 있는 짧은 부분은 '위젯 그 자체'이다.class App extends StatefulWidget {  const App({super.key});  @override  StateApp> createState() => _AppState();}단순히 State를 불러와서 화면에 보여주는 역할만 한다.두 번째 부분은...class _AppState extends StateApp> {state이다. 위젯에 들어갈 데이터와 UI를 넣는 곳이다.아..

이 강의를 통해서 flutter가 진짜 매우 편하다는 것을 알게 되었다.(그냥 다 알아서 해줘...)이번에는 이 부분을 만들 것이다.가장 먼저, Container 부분이 반복되니까 ./widgets/currency_card.dart 파일을 만들어서 위젯을 따로 뺄 것이다.이전에 button.dart 파일에서 했던 것과 동일하게 진행하면 된다...자세한 방법은 3.5 Reusable Widget(https://want-to-work-life-balance.tistory.com/entry/Flutter-35-Reusable-Widgets)에 있다.currency name, currency code, currency amount, currency icon을 변수로 두었다.하지만, 비트코인쪽을 보면 색이 반대가..

몇가지 새로운 부분만 체크하고 넘어갈 것이다.아래의 사진 부분을 완성했다.ClipBehavior: Container에서 어떤 아이템이 overflow가 되었을 때 어떻게 동작할 지 알려주는 것여기에서는 Clip.hardEdge로 그냥 잘라버리도록 했다.antiAlias, antiAliasWithSaveLayer, hardEdge, none이 있다.Transform.scale(): 아이콘의 크기만 키우는 것(만약 size를 키우면 container도 같이 커진다.)Transform.translate(): 위치 이동하는 것.(offset)main.dart의 전체 코드는 다음과 같다.import 'package:flutter/material.dart';import './widgets/button.dart';v..

내가 알고 있기로는... Flutter에 Card라는 위젯이 있는 걸로 기억해서 이거를 말하는 건가 싶었는데, 그냥 Container로 연습시키더라...(이게 맞긴 해)참고로, Card 위젯이 궁금하면 공식 문서로 가보도록 하자...(나중에 쓸 일이 있기는 할듯?)https://api.flutter.dev/flutter/material/Card-class.html Card class - material library - Dart APIA Material Design card: a panel with slightly rounded corners and an elevation shadow. A card is a sheet of Material used to represent some related infor..

'Error Lens'라는 Extension을 추천하더라. 에러를 잘 설명해주더라.추출하고 싶은 위젯에 커서를 올려서 Code Action을 살펴보면 'Extract Widget'이 있다.이 것을 이용하면 자동으로 위젯을 따로 빼서 만들어준다. 개사기이것을 직접 만들어보는 것으로 하자.widget 폴더를 새로 만들어서 button.dart 파일을 만들자.class Button extends StatelessWidget {  final String text;  final Color bgcolor;  final Color textColor;  const Button({    // key는 나중에 설명할 것이다.    super.key,    required this.text,    required this...

Flutter로 코딩하다보면 왼쪽에 노란 전구 모양이 종종 보일 것이다.이게 Code Action이다. 한번 눌러보자.코딩 못하는 내가 봐도 이거는 사기 같다.Code Actions은 코드를 매우 간단한 방법으로 리펙토링 하게 해준다.padding으로 감싸고 싶으면 "Wrap with Padding"을 누르면 padding으로 감싸는 것을 자동으로 해준다.Widget으로 하면 원하는 Widget을 직접 입력할 수도 있다."Remove this widget"을 누르면 원하는 widget 없애기 가능단축키는 ctrl +.그런데 어차피 마우스로 원하는 action을 선택해야 해서 나는 마우스로 누르는 편이다.커서가 해당하는 위젯 '왼쪽'과 '오른쪽'에 위치할 때 나오는 옵션이 다르다는 것을 명심하자.

지금까지 Flutter를 보면서 계속 나와 있던 파란줄.파란줄에 마우스를 올려다보면 다음과 같은 안내문구가 나온다:Use 'const' with the constructor to improve performance.Try adding the 'const' keyword to the constructor invocation.const를 추가하면 performance가 좋아진단다.const는 compile하기 전에 '이미' 알고 있는 값으로 하여 메모리를 차지하지 않도록 한다.ex)const a = 10;const b = 20;var c = a + b;이렇게 했다면 compile을 할 때에는 다음과 같이 바뀐다고 한다.var c = 10 + 20;그냥 a 와 b는 메모리를 차지 하지 않도록 없애버리고 값을 ..