css 먹여보기

• Scaffold 내부에 또 다른 위젯을 설정할 수 있다.

• 대부분의 위젯은 다른 인수에 값을 넘기게 해주기 때문에 거의 항상 최소한 하나의 인수인수나 body: 혹은 child: 같은 걸 갖고 있다. 이는 또 다른 위젯을 원하는 것이다. 외부 위젯의 래핑 위젯에 포함되어 있다.

• 하지만 종종 위젯을 원하지 않는 다른 인수도 있다.
  하지만 대신에 우리가 이를 구성하거나 이 위젯을 스타일링할 수 있도록 하는 것이다.

• 그래서 보면 backgroundColor에 Color값이 optional인 것을 확인할 수 있는데 이는 null이 들어가도 무방하며 이땐 배경색을 설정하지 않은 것과 같다.

• 그리고 물론 Color type으로 지정해야하기에 그대로 써도 좋지만 더 좋은 방법도 있다. 바로 Colors type이다.
  
  아래 사진과 같이 매우 다양한 색을 IDE에서 바로 확인하고 넣을 수 있다.

• 또한 색 박스를 클릭하여 내가 원하는 색으로 바꿀 수도 있다.
  

• 그렇게 되면 Colors => Color로 바뀌고 .fromARGB() 라는 함수에 의해 색이 생성되는 것을 확인할 수 있다.

Container

• 컨테이너 위젯은 위젯의 배경 색상을 설정하는 데에 많은 옵션을 제공한다.

그라데이션

• 이는 정확히 말해 2개의 색을 지정하여 그라데이션을 지정할 수 있다.
  그러기 위해서는 우선 Container로 warpping을 해야한다.

• 그런데 빨간 줄이 생긴것을 확인할 수 있는데 이는 Flutter가 Container에 대하여 const를 지원하지 않기 때문이다.

• 또한 지정한 해당 위젯 트리에서 더 높은 부모 위젯도 const를 설정할 수 없다.

• 따라서 일단 코드를 작성한 후 파란 선이 시작되는 가장 최 상단에 const를 박으면 된다.

이렇게 하면 이것들은 모두 저장되도록 설정된 개체가되고
래서 DART는 이 값들을 코드 내 다른 어딘가에 사용한다면 캐싱하고 저장하고 재사용할 수 있다.
메모리 사용량 최적화의 장점을 취하고 앱 성능을 향상시킬 수 있는 것이다.

• 그럼 위와같은 결과값을 확인할 수 있다.
  이제 추가적으로 그라데이션을 왼위 에서 오아래로 바꿔보자.

begin: Alignment(x, y)

• 이부분 역시 (x, y) 생성자 함수로 본인이 직접 작성할 수 있지만 역시 . 을 이용하여 미리 정의된 값에 접근할 수 있다.
  

Text css

• 위 사진에서 알 수 있듯 TextStyle 객체에 내부 text css를 지정할 수 있다.
• 그리고 역시 color는 Color 객체를 이용하여 작성할 수 있다.

margin

• 추후 포스팅한 padding에서도 같은 객체를 사용한다.
  
• Container에서 margin argument를 주어 이것을 EdgeInsets라는 객체로 쉬게 마진을 부여할 수 있다.