3/25 TIL
플러터 힘드러 ㅠ
-
텍스트에 스타일 주려면 Text(style: TextStyle())
사용하면 된다.
- 색 주는 법은 세가지가 있는데
color: Colors.원하는색
이 있고 Color(0xff”헥스코드")
그리고 Color.fromRGBO()
가 있다.
- 폰트 두께는
fontWeight: FontWeight.*w100 ~ 900
* 하면 된다.
-
버튼은 TextButton
, ElevatedButton
, IconButton
세가지가 있는데 Text와 Elevated는 child와 onPressed 두가지 속성이 들어가야 하고 IconButton은 child 대신 icon이 들어간다. icon: Icon(Icons.star)
이렇게 쓰면 된다.
-
AppBar() 안에는 여러가지 넣을 수 있는 파라미터들이 있다. 그 중 title은 제목을 넣는 것이고 leading은 왼쪽 아이콘, actions는 오른쪽 아이콘이다. 사용방법은 아래와 같다.
AppBar(
actions: [Icon(Icons.star)], //actions는 배열이라 아이콘을 여러개 넣을 수 있다.
leading: Icon(Icons.star),
title: Text('앱'), //맥은 가운데 정렬이라 왼쪽정렬하고 싶으면 centerTitle 끄면 된다.
centerTitle: false,
)
-
레이아웃 혼자 잘짜는법
예시디자인 준비 → 예시화면에 네모 그리기 → 바깥네모부터 하나하나 위젯으로 만들기 → 마무리 디자인(마진,패딩,사이즈,색,정렬 등)
-
이번 숙제는 위 사진과 같은 레이아웃을 만들어 보는 것이다. 우선 박스를 크게 나누어서 왼쪽 이미지와 오른쪽 텍스트를 Row로 나누었다. 그리고 오른쪽 텍스트를 Container로 감싼 뒤 Column으로 세개의 텍스트와 한개의 Row(하트이모티콘 + 숫자) 로 나누었다. 그리고 정렬만 하면 끝!
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset('Ipadmini6.jpg',),
Container(
width: 340, //[*1]
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('아이패드 미니6 + 애플펜슬 2세대 팔아요', style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20)),
Text('오산시 금암동 ・ 끌올 10분 전', style: TextStyle(fontWeight: FontWeight.w100, fontSize: 10, color: Colors.grey)),
Text('300,000원', style: TextStyle(fontWeight: FontWeight.w900, fontSize: 18)),
Row(
mainAxisAlignment: MainAxisAlignment.end, //[*2]
children: [
Icon(Icons.favorite_border_sharp),
Text('4', style: TextStyle(color: Colors.grey),)
],
)
],
),
),
],
)
[*1] 의 경우 width를 넓게 설정하지 않을 경우 [*2], 즉 하트아이콘과 숫자가 오른쪽 끝으로 정렬되지 않는다. 왜냐하면 애초에 컨테이너 크기가 넓게 설정되지않았기 때문에 오른쪽 끝으로 가봤자 티가 안나는 것이다. 이것때문에 한참 해맸다. ㅠ 여기서 문제는 화면을 더 키우면 width도 더 커져야 하는데 지금 width는 정적인 숫자라 대응을 하지 못한다는 것이다. 이건 다음시간에 배울 것 같다.
최종적으로 만든 숙제!
무슨 광고창 같다. ㅋㅋㅋ
마치며
오늘 동기하고 토이프로젝트 계획을 짰다. 서로 이것저것 아이디어 생각해놓은 걸 얘기한 뒤 최종 결정된 아이디어를 구현하기 위해 앞으로 한달동안 플러터 공부를 끝내기로 했다. 나도 오늘 코딩애플님 강의를 구매했는데 다음달까지 열심히 들어야겠다. 그래도 목표가 생기니 화이팅이 생기는 것 같다.
그리고 벨로그 운영에 있어서 고민이 생겼다. 현재는 노션으로 정리를 한번 쭉 한 뒤 벨로그에 복사해서 올리는 형태인데 노션에 정리되있는걸 굳이 벨로그에 복붙해서 올리는 의미가 있나 싶다. 이러다보니 벨로그에는 있는 부분이 노션에는 없기도 하고 노션에는 있는 부분이 벨로그에 없기도 해서 나중에 내가 뭘 봐야할 지 헷갈릴 것 같다. 어느 하나를 딱 정하고 해야할 것 같다.
Author And Source
이 문제에 관하여(3/25 TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@nmh369/325-TIL
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
텍스트에 스타일 주려면 Text(style: TextStyle())
사용하면 된다.
- 색 주는 법은 세가지가 있는데
color: Colors.원하는색
이 있고Color(0xff”헥스코드")
그리고Color.fromRGBO()
가 있다. - 폰트 두께는
fontWeight: FontWeight.*w100 ~ 900
* 하면 된다.
버튼은 TextButton
, ElevatedButton
, IconButton
세가지가 있는데 Text와 Elevated는 child와 onPressed 두가지 속성이 들어가야 하고 IconButton은 child 대신 icon이 들어간다. icon: Icon(Icons.star)
이렇게 쓰면 된다.
AppBar() 안에는 여러가지 넣을 수 있는 파라미터들이 있다. 그 중 title은 제목을 넣는 것이고 leading은 왼쪽 아이콘, actions는 오른쪽 아이콘이다. 사용방법은 아래와 같다.
AppBar(
actions: [Icon(Icons.star)], //actions는 배열이라 아이콘을 여러개 넣을 수 있다.
leading: Icon(Icons.star),
title: Text('앱'), //맥은 가운데 정렬이라 왼쪽정렬하고 싶으면 centerTitle 끄면 된다.
centerTitle: false,
)
레이아웃 혼자 잘짜는법
예시디자인 준비 → 예시화면에 네모 그리기 → 바깥네모부터 하나하나 위젯으로 만들기 → 마무리 디자인(마진,패딩,사이즈,색,정렬 등)
이번 숙제는 위 사진과 같은 레이아웃을 만들어 보는 것이다. 우선 박스를 크게 나누어서 왼쪽 이미지와 오른쪽 텍스트를 Row로 나누었다. 그리고 오른쪽 텍스트를 Container로 감싼 뒤 Column으로 세개의 텍스트와 한개의 Row(하트이모티콘 + 숫자) 로 나누었다. 그리고 정렬만 하면 끝!
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset('Ipadmini6.jpg',),
Container(
width: 340, //[*1]
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('아이패드 미니6 + 애플펜슬 2세대 팔아요', style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20)),
Text('오산시 금암동 ・ 끌올 10분 전', style: TextStyle(fontWeight: FontWeight.w100, fontSize: 10, color: Colors.grey)),
Text('300,000원', style: TextStyle(fontWeight: FontWeight.w900, fontSize: 18)),
Row(
mainAxisAlignment: MainAxisAlignment.end, //[*2]
children: [
Icon(Icons.favorite_border_sharp),
Text('4', style: TextStyle(color: Colors.grey),)
],
)
],
),
),
],
)
[*1] 의 경우 width를 넓게 설정하지 않을 경우 [*2], 즉 하트아이콘과 숫자가 오른쪽 끝으로 정렬되지 않는다. 왜냐하면 애초에 컨테이너 크기가 넓게 설정되지않았기 때문에 오른쪽 끝으로 가봤자 티가 안나는 것이다. 이것때문에 한참 해맸다. ㅠ 여기서 문제는 화면을 더 키우면 width도 더 커져야 하는데 지금 width는 정적인 숫자라 대응을 하지 못한다는 것이다. 이건 다음시간에 배울 것 같다.
최종적으로 만든 숙제!
무슨 광고창 같다. ㅋㅋㅋ
마치며
오늘 동기하고 토이프로젝트 계획을 짰다. 서로 이것저것 아이디어 생각해놓은 걸 얘기한 뒤 최종 결정된 아이디어를 구현하기 위해 앞으로 한달동안 플러터 공부를 끝내기로 했다. 나도 오늘 코딩애플님 강의를 구매했는데 다음달까지 열심히 들어야겠다. 그래도 목표가 생기니 화이팅이 생기는 것 같다.
그리고 벨로그 운영에 있어서 고민이 생겼다. 현재는 노션으로 정리를 한번 쭉 한 뒤 벨로그에 복사해서 올리는 형태인데 노션에 정리되있는걸 굳이 벨로그에 복붙해서 올리는 의미가 있나 싶다. 이러다보니 벨로그에는 있는 부분이 노션에는 없기도 하고 노션에는 있는 부분이 벨로그에 없기도 해서 나중에 내가 뭘 봐야할 지 헷갈릴 것 같다. 어느 하나를 딱 정하고 해야할 것 같다.
Author And Source
이 문제에 관하여(3/25 TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nmh369/325-TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)