Flutter - Typography와 Layout 만들기

 

글자는 크기, 색상, 폰트를 바로 입력하는게 아닌 TextStyle을 이용해서 써주야아함

 

 

Text( '글자임', 
  style : TextStyle( color : Colors.red ) 
)

 

 

버튼

 

TextButton( child: Text('버튼임'), onPressed: (){} )
ElevatedButton( child: Text('버튼임'), onPressed: (){} )
IconButton( icon: Icon(), onPressed: (){} )

 

 

3개종류의 버튼이 있다

onPressed 버튼 클릭시 작동할 함수를 넣는곳으로 빼면 에러냄

 

 

 

AppBar 디자인

 

 

AppBar(
  title : Text('앱제목'),
  leading : Icon(Icons.star),
  actions : [ Icon(Icons.star), Icon(Icons.star) ]
)

 

 

leading 제목 왼쪽 아이콘

actions : 제목 오른쪽 아이콘

 

 

레이아웃  잘짜는 팁

 

 

 

 

다음같이 구현 하고자 하는 예시가 있다 

그럼 내용을 모두 박스에 담는다 이때 빈칸없이 채워서

그리고 큰 박스부터 차례대로 채우면 된다

 

각 박스마다 크기 옵션 조절 하고, 

아이콘, 텍스트 적절히 위치시키고 하면 된다. 

 

 

 

 

 

 

다음같이 숙제를 하던중에 분홍색 box의 width값을 설정을 잘 못하겠다

처음에는 내부 text양 만큼 box 의 크기가 정해졌고 크기를 넘어가면 에러를 냈다 

그래서 임의로 width 값을 주면 text가 늘어나도 알아서 줄 바꿈을 한다. 

 

하지만 내부 text에 상관없이 그냥 처음 container(노란 박스)에서 우측으로 마진만큼만 떨어진 고정적인 박스를 

만들고 싶은데 해결하지 못했다.

 

그래서 강의를 보았다

 

숙제 내용에 앞서 레이아웃을 짜는데 도움이 되는 몇개의 위젯을 배웠다.

 

 

 

Flexible

 

Row(
  children : [
    Flexible( child: Container(color : Colors.blue), flex : 1 ),
    Flexible( child: Container(Color : Colors.green), flex : 1 )
  ]
)

 

Flexible 감싸면 Container를 퍼센트로 나타낼 수 있다.

다음 예시는 1:1 비율 화면에 반반 차지 하는 것이고 

1 :3 , 1:2 등등 비율로 나타낸다. 

 

 

Expanded

 

Row(
  children : [
    Expanded( child: Container(color : Colors.blue), flex : 1 ),
    Container(Color : Colors.green, width : 100),
  ]
)

 

남은 부분을 하나의 박스로 꽉 채우고 싶을때 쓴다

width 가 100을 가지는 box를 제외한 나머지 부분을 다 차지한다.

 

숙제를 마저 해보면 Expanded 를 사용해서 이미지 부분을 제외한 나머지 부분을 채우면 될 것 같다.

그리고 텍스트는 x 축으로 좌측 정렬

아이콘은 우측 정렬 

 

그리고 하다가 내가 굳이 안해도 될 코드를 짠게 있다. 

box 를 다 만들어야한다는 생각때문에 바로 Text 위젯을 사용하면 될것을 

굳이 Container 를 만들어 그 안에 담았다. 

 

        body: Container(
            width: 600, height: 200, color: Colors.amberAccent,
            child: Row( children: [
              Container( margin:EdgeInsets.all(10),child: Image.asset('peachs.jpeg')),
              Expanded( flex : 1 ,child: Container(color : Colors.amberAccent,margin:EdgeInsets.all(10)
                , child: Column( mainAxisAlignment:MainAxisAlignment.spaceEvenly,crossAxisAlignment: CrossAxisAlignment.start,
                children: [Text('JUSTICE 앨범 팝니다'), Text('향림골 10-23번지'),Text('15000원'),
                Row(mainAxisAlignment: MainAxisAlignment.end,children: [Icon(Icons.favorite),Text('30')],)],
              ),))
            ],


                )

 

 

mainAxisAlignment 와 crossAxisAlignment 파라미터를 유용하게 썼다. 

Dart 가 코드블럭 스킨 지원안하는거 가만해도 가독성 너무 쓰레기긴하다.