[Flutter] 위젯 속성 (2) TextField, AppBar, BackgroundImage...

 

 

TextField(	
	maxLines: 1,	
	decoration: InputDecoration(border: InputBorder.none, hintText: '무엇이든 입력하세요'),
),

TextField의 밑줄 없애는 방법 : 

decoration : InputDecoration의 border속성을 none으로 설정해준다.

hintText : 텍스트필드에 입력하기 전에 어떤 내용을 작성해야하는지 알려주는 기능. 터치하는 순간 사라짐

 

 

Container(
	decoration: const BoxDecoration(
	image: DecorationImage(
		image: AssetImage("assets/background.jpg"),
		fit: BoxFit.fill
		)
	),
),

배경이미지 설정하는 방법:

먼저 asset 폴더에 background.jpg 라는 이름의 파일을 넣어둔다. (참고: 2021.10.16 - [Flutter] - [Flutter] Image Asset 추가하기)

(참고2: unsplash에서 무료 이미지를 다운받아서 사용할 수 있다.)

Container의 decoration속성에 BoxDecoration -> DecorationImage 에 등록해두었던 이미지를 추가한다.

BoxFit.fill -> 영역을 꽉 채우도록 이미지가 늘어난다. (비율 유지 안됨)

배경이미지이기 때문에, Stack을 사용하여 children속성의 제일 상단에 추가해주면 된다.

 

 

AppBar(
	backgroundColor: Colors.white,
	flexibleSpace: Container(
		decoration: const BoxDecoration(
			image: DecorationImage(
				image: AssetImage("assets/background.jpg"),
				fit: BoxFit.cover
			)
		),
	),
	title: Text('AppBar Text', style: TextStyle(color: Colors.black),),
	toolbarHeight: 40,
	shadowColor: Colors.transparent,
)

AppBar의 배경이미지 설정하는 방법:

위의 배경이미지 등록하는것과 비슷하다.

AppBar의 flexibleSpace 속성에 이미지를 추가해준다.

backgroundColor는 지정한 대로 색이 나오지는 않지만, 지정해주었더니 상단바 부분의 (시계부분) 폰트 색이 검정색이 되었었다. (밝은 배경일때 잘보이게됨)

shadowColor를 투명으로해주면 앱바와 배경이미지 간의 입체감이 없어져보인다. 분리되어 보이는것을 원한다면 생략해주면된다.

toolbarHeight 속성에는 앱바의 높이를 지정 할 수 있다.