차근차근 배움터

이번 강의에서는 Theme 설정을 주는 방법을 알아본다 매번 위젯에 색상 설정을 하는 게 아니라 아예 앱의 디폴트 값을 설정하는 방법이다. import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatefulWidget { @override State createState() => _AppState(); } class _AppState extends State { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( textTheme: const TextTheme( titleLarge: TextStyle..

다시 한 번 setState() 의 용법에 대해서 설명을 했다. 프로그램이 데이터를 저장하고 보여주기를 희망할 때, 이렇게 사용하라는 것 하지만 setState()가 사실 플러터에서 그렇게 많이 사용되지 않는다는 이야기를 하니............... 무엇이 더 사용되는 걸까 Where can I use setState Flutter? We call setState only when we want the change in a variable to reflect on the UI of the screen. For instance, say you have a form containing a text field and a button to submit it. User types in the text fiel..

한 가지를 잊었는데 모든 것이 적용되게 하기 위해서는 setState funcion을 적용해야 한다. state class에게 데이터가 바뀐다는 것을 알리기 위해서 사용해야 한다. setState our state hey man the data is new so react do something react yourself void onClicked() { setState(() { counter = counter + 1; }); } 즉 setState() 안에 담지 않으면, when you call setState, telling flutter, data is new build method again :0 calling this method once more with the new data. 그리고 함수를..

Stateless는 데이터가 없는 것 Statefull은 반대로 데이터를 갖고 사용할 수 있는 것 State of the widget is where we put the data data/ui를 data가 변하면 ui of the widget changes as well 입력한 숫자를 Text로 받을 때 Text('$counter'), State.. 클릭했을 때 숫자가 올라가는 기능을 만들어본다 import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatefulWidget { @override State createState() => _AppState(); } class _AppState exten..

지난 시간에 SingleChildScrollView로 overflow 에러 없이, 스크롤 가능하게 하는 법을 확인해 봤다. 그리고 결과물을 이렇게 만들었고, 현재는 외운다기 보다는 어떻게 작동하는 지 그 과정을 이해하고 이용할 줄 알면 된다. 챌린지는 생성자 변수에 offSet 정보를 넣으라는 것인데........... 흠.......... 숙제로 생각해봐야 겠다

Transform.scale 몇 배만 큼 그게 할 것인지 그리고 그 안의 child에 들어가는 transform. Translate() 는 x축 y축으로 얼만큼 옮길 것인지를 정한다. 그리고 overflow한 부분을 자르기 위해서 Container 하위에 Clip clipBehavior를 넣음으로서 자른다. clipBehaviour : Clip.hardEdge, 깔끔하게 자르게 한다. reusable한 기능을 사용하기 위해서 crurency_card.dart 파일을 생성하고 import 'package:flutter/material.dart'; class CurrencyCard extends StatelessWidget { @override Widget build(BuildContext context) ..

이번 시간에는 위와 같은 부분을 만들어 볼 예정이다. 이렇게 만드는 건 어렵지 않으나 이제 이 유로 아이콘을 크게 그리고 overflow 되게끔 할 수 있는 건 생각보다 어렵다! 일반적으로 박스 안에 담긴 아이콘의 크기를 키우면, 박스의 크기 역시 같이 늘어나지만 Transform.scale 을 사용하면 아이콘이 박스 크기를 늘리지 않고 자유롭게 커질 수가 있다. 그리고 유로를 아래로 내릴 예정 Transform.translate()을 이용하면 된다. Transform.scale( scale: 2.2, child: Transform.translate( offset: const Offset(8, 25), child: const Icon( Icons.euro_rounded, size: 98, color: C..

children도 const를 사용해서 안된다. mainAxisAlignment: MainAxisAlignment.spaceBetween, Row 내에 있는 두 버튼 등 사이에 공간을 두는 것 왼쪽 끝 오른쪽 끝으로 정렬된다. MainAxisAlignment.spaceBetween으로 끝에서 끝으로 이동했으나 Row 내 수직 정렬이 가운데 있는 것이 불편할 때 그 때 Row 내에서 crossAxisAlignment.end를 사용해서 수직 정렬을 맞춰준다. crossAxisAlignment: CrossAxisAlignment.end, 늘 헷갈리는 이것........ 컬럼의 배열이 이런식으로 되어 있으면, (EURO 와 6428라인) 첫번째 컬럼 두번째 컬럼 어쩌구 저쩌구 이 컬럼들을 왼쪽 정렬하기 위해서 ..

Error Lense라는 익스텐션을 설치해서, 오류가 났을 때 그 원인을 쉽게 알아보도록 하자 플러터는 이런 식으로 UI가 overflow 하는 경우과 같은 때, 경고하듯이 이렇게 보여준다. 변하지 않을 값에 const를 주지만, button 클래스를 만들어 버리면 배경색상, text들이 const의 속성을 갖지 않게 되기 때문에, const를 제거해주어야 한다. lib 폴더에 button.dart 파일을 만들어서 Button 클래스를 작성했다. 그 전에 수강했던 강의에서는 밖으로 빼는 것만 했는데 이렇게 비슷한 버튼들을 쉽게 재사용 가능하게 만드는 법은 오늘 알게 되었다. 아주 유용한 것! 클래스 덕분에 한 결 간결해진 코드를 볼 수 있다. import 'package:flutter/material.d..

code Action은 코드를 리팩토링하는 데 큰 도움이 된다. Row()와 같은 걸 Padding으로 감싸고 싶을 때, 아래와 같은 저 전구 버튼을 누름으로써 자동으로 감싸줄 수 있게 하는 아주 편리한 기능이다.