워라밸을 꿈꾸는 사람

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...

https://dribbble.com/shots/19858341-Financial-Mobile-IOS-App Financial Mobile IOS App dribbble.com여기에 있는 디자인을 따라서 해본다고 한다.(단순히 UI만 따라서 할 것이다.)나는 'ColorZilla'라는 chrome extension을 이용해서 색상을 가져왔다.진행한 내용은 다음과 같다: appBar를 제거한다. -> 제목 없이 모두 body에 때려박는 것 같다. (AI가 만들어주던 앱은 appBar를 사용하던데...)backgroundColor : 배경화면이 #181818인데, 이를 '0xFF'를 앞에 붙이고 뒤에 181818를 붙여주면 된다.Padding을 통해서 좌우의 공백을 만들어준다.SizedBox를 이용해서 위의..

단순하게, 그냥 여러 클래스에서 재활용하기 위해서 만드는 것이라고 생각하면 편하다.mixin Strong {  final double strengthLevel = 1500;}mixin QuickRunner {  void runQuick() {    print("Ruuuuuuuuun");  }}mixin Tall {  final double height = 1.80;}이렇게 정의한다. 원래 class로 선언할 수 있지만, 버전이 바뀌면서 mixin이라고 명시적으로 선언해야 하는 것 같다.어떻게 쓰냐고?class Player with Strong, QuickRunner, Tall {  final Team team;  Player({    required this.team,  });}with으로 쓰면 된다.상..

이번에는 Inheritance. 상속.python같은 다른 언어와 비슷하다고 하는데...사실 나는 코드를 직접 배워본 적이 없고 야매로 하는 사람이라 잘 몰랐다...Human이라는 이름을 갖는 class가 있다고 하자.class Human {  final String name;  Human(this.name);  void sayHello() {    print("Hi my name is $name");  }}이제 Player이라는 이름을 갖는 class를 만들 것이다.그런데, Player도 사람일테니 Human class를 그대로 가져오고 싶다.(상속)class Player extends Human {  final Team team;  Player({    required this.team,    req..