Flutter UI

https://www.youtube.com/watch?v=kJ2mGh5BLYk 

https://github.com/FilledStacks/flutter-tutorials

GitHub - FilledStacks/flutter-tutorials: The repo contains the source code for all the tutorials on the FilledStacks Youtube cha

나는 Flutter를 위의 링크와 함께 공부하기 시작했다.

 

첫번째 영상에서는 여러 method들이 나온다.

 

Flutter의 Widget에는 Row와 Column이 있다.

Column는 세로 레이아웃 이며,

Row는 가로 레이아웃 이다.

 

Container는 html의 div와 비슷하다고 볼 수 있다.

Expanded는 부모 Container로 부터 남은 영역을 모두 담당한다고 볼 수 있다.

 

mainAxisSize에는 min과 max로 두개의 값이 있다.

mainAxisSize.min은 세로축의 자식에 맞게 크기가 설정된다.

mainAxisSize.max는 남은 영억을 모두 사용한다.

 

crossAxisAlignment는 center와 start, end, stretch, baseline 값을 가지고 있다.

여기서는 crossAxisAlignment.end를 사욯하는데, 가로축(Row)일 경우 bottom으로 정렬이 되고, 세로축(Column)일 경우에는 오른쪽으로 정렬이 된다.

 

mainAxisAlignment는 css에서 display: flex와 비슷한것 같다.

mainAxisAlignment.spaceEvenly를 이용하면 여러 elements들의 사이에 같은 공간을 두며 정렬할 수 있다.

반응형

 

나는 CachedNetworkImage를 사용중에 Error: The method 'CachedNetworkImageProvider.load' has fewer positional arguments than those of overridden method 'ImageProvider.load'.

라는 에러가 발생했는데, 

https://stackoverflow.com/questions/59783940/flutter-cachednetworkimageprovider-is-not-working

flutter CachedNetworkImageProvider is not working

링크를 통해 해결할 수 있었다.

 

decoration: BoxDecoration()을 사용하면 css처럼 border를 곡선으로 하는 등 효과를 줄 수 있다.

 

padding: EdgeInsets.only(bottom: 15.0)과 같이 only값에서는 위치를 지정하여 값을 넣을 수 있으며,

padding: EdgeInsets.all(11.0)은 모든 위치에 한번에 값을 넣을 수 있다.