차근차근 배움터

이번 시간에는 위와 같은 부분을 만들어 볼 예정이다. 이렇게 만드는 건 어렵지 않으나 이제 이 유로 아이콘을 크게 그리고 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으로 감싸고 싶을 때, 아래와 같은 저 전구 버튼을 누름으로써 자동으로 감싸줄 수 있게 하는 아주 편리한 기능이다.

const 타입 변수 1) 값을 수정할 수 없다 2) 컴파일 하기 전에 값을 알 수 있는 속성 var finalPrice = 45; 라고 값을 설정한다. 이러한 Color 값은 const이기 때문에 const Color(0xFF181818)이라고 작성하는 게 나을 지도 모른다. 여러 변수에 적용되기 쉽겠다 하지만 대신에 설정으로 가서 Json 파일이 하나 열리면 "editor.codeActionsOnSave": {"source.fixAll": true}, 해당 코드를 삽입하자 "[dart]": { "editor.formatOnSave": true, "editor.formatOnType": true, "editor.rulers": [ 80 ], "editor.selectionHighlight": false..

Container 박스에 color나 기타 속성들을 적용하고 싶을 때는 BoxDecoration을 이용한다. - Container 박스에 borderRadius 주는 법 borderRadius: BorderRadius.circular(45), 이번 강의에서는 Container와 BoxDecoration 그리고 Padding이 핵심 주제였다 다음에는 아마 두 버튼을 5대 5로 나누는 작업을 하지 않을까 싶다

맨 오른쪽 돋보기 버튼을 통해서 이렇게 developer tool을 통해서 구조를 확인할 수 있다 그리고 이 버튼을 누르게 되면, 직접 위의 아이콘을 누르면 화면에서 구조들을 클릭하며 확인할 수 있다 그리고 아래의 아이콘을 클릭하면 아래와 같이 컬럼/로우들을 보여준다 짱짱 import 'package:flutter/material.dart'; class Player { String? name; Player(); //this.name에 들어오는 인자가 name으로 들어갈 것이다 // name = this.name } void main() { var nico = Player(); runApp(App()); } class App extends StatelessWidget { @override Widget bu..

- 각 컬럼(열)을 오른쪽 정렬하고 싶을 때 crossAxisAlignment: CrossAxisAlignment.end 이걸 사용해야 한다............ Main이랑 늘 헷갈림...... - 그리고 color 들어간 Text 에 opacity 주고 싶을 때 한 번에 줄 수 있다. style: TextStyle( color: Colors.white.withOpacity(0.5), ), - background color를 16진수 코드로 주고 싶을 때 Colors.black 대신에 이렇게 사용한다. 0xFF는 기본 값으로 적고 숫자를 이어서 입력해야 한다. Color(0xFF181818), 이런 식으로 VS Code에서 색상 코드를 확인할 수 있다 (opacity 포함) - padding값 주는 법..

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Player { String name; Player({required this.name}); //this.name에 들어오는 인자가 name으로 들어갈 것이다 // name = this.name } void main() { var nico = Player(name: 'Yu'); runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( cen..

screen 구성에 적절한 구조를 제공하는 것이 Scaffold AppBar 역시 여러가지 위젯을 입력할 수 있고 그 중에 우리가 입력한 것은 title이 있었다. centerTitle: true, elevation: 1, appBar에 생성할 수 있는 이러한 위젯들도 있다. 따라서 위젯과 위젯으로 구성되어 있는 Flutter에 겁먹을 필요가 없다!