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