Gradients Background

Gradient 배경을 추가하여 앱을 좀 더 예쁘게 만들 시간이다.

Gradient는 CSS와 마찬가지로 플러터에서도 쉽게 사용 할 수 있으며, 매우 핫(hot)하기 때문에 사용하기 좋다.

Gradient를 사용하려면 먼저 Container위젯이 필요하며, 그 안에 decoration 속성을 액세스 해야 한다.

main.dart파일에 _MyHomePageState클래스의 build메서드안 Container위젯의 decoration을 빌드 하는것으로 시작해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// main.dart

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.black87,
),
body: Container(
// Box decoration 추가
decoration: BoxDecoration(
// Box decoration은 gradient를 가진다.
gradient: LinearGradient(
// linear gradient가 시작되고 끝나는 위치
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// 각 색상에 대해 하나의 종료점을 추가. 종료점은 0에서 1까지 증가 해야함.
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
// 색상처리는 플러터의 Colors클래스 덕분에 겁나 쉬움.
Colors.indigo[800],
Colors.indigo[700],
Colors.indigo[600],
Colors.indigo[400],
],
),
),
child: Center(
child: DogList(initialDoggos),
),
),
);
}

gradients가 적용된 모습:
apply gradients

Comment and share

크리에이티브 커먼즈 라이선스
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용할 수 있습니다.
  • page 1 of 1
Author's picture

Jace Shim


Seoul, Korea