3/25 TIL

8379 단어 TILTIL

플러터 힘드러 ㅠ


  1. 텍스트에 스타일 주려면 Text(style: TextStyle()) 사용하면 된다.

    1. 색 주는 법은 세가지가 있는데 color: Colors.원하는색 이 있고 Color(0xff”헥스코드") 그리고 Color.fromRGBO() 가 있다.
    2. 폰트 두께는 fontWeight: FontWeight.*w100 ~ 900* 하면 된다.
  2. 버튼은 TextButton , ElevatedButton , IconButton 세가지가 있는데 Text와 Elevated는 child와 onPressed 두가지 속성이 들어가야 하고 IconButton은 child 대신 icon이 들어간다. icon: Icon(Icons.star) 이렇게 쓰면 된다.

  3. AppBar() 안에는 여러가지 넣을 수 있는 파라미터들이 있다. 그 중 title은 제목을 넣는 것이고 leading은 왼쪽 아이콘, actions는 오른쪽 아이콘이다. 사용방법은 아래와 같다.

    AppBar(
    	actions: [Icon(Icons.star)], //actions는 배열이라 아이콘을 여러개 넣을 수 있다.
    	leading: Icon(Icons.star), 
    	title: Text('앱'), //맥은 가운데 정렬이라 왼쪽정렬하고 싶으면 centerTitle 끄면 된다.
    	centerTitle: false,
    )
  4. 레이아웃 혼자 잘짜는법

    예시디자인 준비 → 예시화면에 네모 그리기 → 바깥네모부터 하나하나 위젯으로 만들기 → 마무리 디자인(마진,패딩,사이즈,색,정렬 등)

  5. 이번 숙제는 위 사진과 같은 레이아웃을 만들어 보는 것이다. 우선 박스를 크게 나누어서 왼쪽 이미지와 오른쪽 텍스트를 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는 정적인 숫자라 대응을 하지 못한다는 것이다. 이건 다음시간에 배울 것 같다.

    최종적으로 만든 숙제!

    무슨 광고창 같다. ㅋㅋㅋ

    마치며

    오늘 동기하고 토이프로젝트 계획을 짰다. 서로 이것저것 아이디어 생각해놓은 걸 얘기한 뒤 최종 결정된 아이디어를 구현하기 위해 앞으로 한달동안 플러터 공부를 끝내기로 했다. 나도 오늘 코딩애플님 강의를 구매했는데 다음달까지 열심히 들어야겠다. 그래도 목표가 생기니 화이팅이 생기는 것 같다.
    그리고 벨로그 운영에 있어서 고민이 생겼다. 현재는 노션으로 정리를 한번 쭉 한 뒤 벨로그에 복사해서 올리는 형태인데 노션에 정리되있는걸 굳이 벨로그에 복붙해서 올리는 의미가 있나 싶다. 이러다보니 벨로그에는 있는 부분이 노션에는 없기도 하고 노션에는 있는 부분이 벨로그에 없기도 해서 나중에 내가 뭘 봐야할 지 헷갈릴 것 같다. 어느 하나를 딱 정하고 해야할 것 같다.

좋은 웹페이지 즐겨찾기