flutter study - 04 Text와 아이콘에 스타일 적용하기

Text와 아이콘에 스타일 적용하기

Text에 색상 입히기

1. Text에 Style을 주고 싶을때. 아래처럼 정의된 색상을 이용할 수 있다.

return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(title: Text("This is an app")),  
        body: SizedBox(  
          child: Text('Hello',  
            style: TextStyle( color: Colors.red ),  
          )  
        ),  
      )  
    );
    

2. 정의되어 있는 색상 대신 6자리 hex color code를 넣고싶으면 코드앞에 0xff 를 붙이면 된다.

style: TextStyle( color: Color(0xffaaaaaa) )
    

3. RGBO 로 정의할 수도 있다.

style: TextStyle( color: Color.fromRGBO(r, g, b, opacity) )
    

기타 TextStyle

글씨 크기

style: TextStyle( fontSize: 30 )
    

자간

style: TextStyle( letterSpacing: 2),
    

배경색

style: TextStyle( backgroundColor: Colors.blue),
    

글자두께(100~900)

style: TextStyle( fontWeight: FontWeight.w700),
    

아이콘에 스타일 입히기

아이콘에는 색상과 사이즈가 입힐수 있는 전부이다.

Sizedbox( child: Icon(Icons.star, color: Colors.red, size: 40,) )
    

버튼

아래 세가지 중 사용

• TextButton()
• IconButton()
• ElevatedButton() 버튼에는 child와 onPressed가 항상 포함되어야한다

SizedBox(  
      child: TextButton(  
        child: Text('Button'),  
        onPressed: (){},  
      )  
    ),
    

위 예시에서 TextButton 대신 ElevatedButton을 적용하면 기본 색상 및 효과가 적용된 버튼이 보인다.

버튼에 스타일을 적용하고 싶으면 style 파라미터를 추가하면 된다.

ElevatedButton(  
      child: Text('Button'),  
      onPressed: (){},  
      style: ButtonStyle( ),  
    )
    

아이콘 버튼은 아래처럼 만들 수 있다.

IconButton(  
      icon: Icon(Icons.star),  
      onPressed: (){},  
    )
    

Appbar 디자인

title은 제목을 쓸때

appBar: AppBar(title: Text("This is an app")),
    

leading은 왼쪽에 아이콘을 추가할때 주로 사용

appBar: AppBar(  
      title: Text("This is an app"),  
      leading: Icon(Icons.star),  
    
    ),
    

actions는 우측에 아이콘 추가할때 사용 list형태로 여러개를 입력할 수 있다.

appBar: AppBar(  
      title: Text("This is an app"),  
      leading: Icon(Icons.star),  
      actions: [Icon(Icons.phone), Icon(Icons.percent)],  
    ),
    

레이아웃 짜기

1. 예시디자인이 필요. 없으면 다른 어플 참고
2. 예시화면에 네모그리기. 빈공간 없게 네모를 그려서 모든 항목을 구분한다
3. 바깥 네모부터 하나씩 위젯으로 만들면 된다
   • 박스는 container 또는 sizedbox
   • 가로 정렬은 Row,

연습

• row가 정렬이 안되는 경우 상위 위젯의 사이즈 설정이 필요할 수 있다.

    return MaterialApp(
          home: Scaffold(
              appBar: AppBar(title: Text("This is an app")),
              body: Container(
                height: 150,
                padding: EdgeInsets.all(10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Image.asset('camera.jpeg', width: 150, height:150),
                    Expanded(
                      child: SizedBox(
                        width: 300,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("캐논 DSLR 1000D 단렌, 충전 16기가 SD포함"),
                            Text("끌올 10분 "),
                            Text("1000"),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Icon(Icons.favorite),
                                Text('5')
                              ],
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              )
          ),
        );