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가 적용된 모습:
Comment and share
