230521
이번에 해볼것은
이 부분이다.
우선 해야할것은
위의 Container 2개와 공간을 분리시키기 위해
Sizedbox를 생성해줘야한다.
위와 같이
2행을 닫아준 다음
그 아래에 SizedBox를 생성해 준다.
SizedBox가 생성된 다음
해야할 것은
위와 같이 Text가 2개 있으므로
Row를 생성해준다.
그리고 바탕이 검정이라Text가 보이지 않으니
Text를 꾸며주도록 하자.
위와 같이 Text를 꾸며주었더니
위와 같이 나왔고
이제 두 Text를 떨어트리기 위해
저번 포스팅에서한
Row 정렬을 해주자.
❗ MainAxisAlignment
MainAxisAlignment만 할 경우
중앙으로 정렬된다.
위의 사항을 주의하여
위와 같이 세로축으로 행을 end로 정렬한 다음
spaceBetween을 적용해준다
그러면 위와 같이
가운데 정렬이 사라지고
세로축으로 정렬이 잘 된것을 확인할 수 있다.
다음으로 카드 부분을 만들기 전,
Sizedbox를 만들어주자.
위와 같이 20의 사이즈로
SizedBox를 만들어 주었다.
위의 사진을 참고해
차근차근 만들어보자.
위와 같이 첫 번째 Container에
Row(행)를 만들고
그 첫 번째 행의 첫 번째 열의 요소로
Text를 넣어주었다.
그리고 중간에 sizedbox를 추가해주고
첫 번째 행의 첫 번째 Column(열)을 만들어
Text 두 개를 넣어주었다.
Container는 아직 기능(스타일)을 수행하고 있지 않기에
Container가 필요없다고 문구가 뜬다.
위와 같이 Container에 색을 입혔다.
그리고 가독성을 위해 Text의 색도 바꾸고
Padding도 넣어주자.
첫 번째 카드의 첫 번째 Row에
마우스로 클릭하고
왼쪽의 돋보기나 Ctrl + . 를 눌러
코드작업 표시를 연다.
그리고 Text를
위와 같이 꾸며주면?
위와 같이 'Euro'가 바뀐다.
이제 첫 번째 Container의 모서리를 둥글게 바꿔보자.
위와 같이
BorderRadius.circular를 통해
모서리가 둥글게 변했다.
다음은 아래의
2개의 Text를 꾸며주자.
위와 같이 꾸며주면?
위와 같은 결과물로 보여준다.
하지만 예시는 'Euro'와
아래의 두 Text가 왼쪽에 붙어 있으므로
정렬을 하고 두 Text의 간격을 줘보자.
두 Text를 묶고있는 Column에서
CrossAxisAlignment.start로
시작 부분(start)으로 정렬해주고
두 Text사이에
SizedBox를 width를 주어
Text를 5만큼 띄어놓는다.
