3. Flutter Widget (Stack관련)

 

Scaffold(
      backgroundColor: misoPrimaryColor,
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                bottom: 0,
                child: Container(
                  constraints: BoxConstraints(maxWidth: 400),
                  child: Image.network(backgroundImgUrl),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    height: MediaQuery.of(context).size.height * 0.1,
                  ),
                  RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      style: TextStyle(
                        fontSize: 28,
                        height: 1.5,
                        color: Colors.white,
                      ),
                      children: [
                        TextSpan(text: "친구 추천할 때마다\n"),
                        TextSpan(
                            text: "10000원",
                            style: TextStyle(fontWeight: FontWeight.bold)),
                        TextSpan(
                          text: "할인 쿠폰 지급!",
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  GestureDetector(
                    onTap: () {
                      print('자세히보기');
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          '자세히 보기',
                          style: TextStyle(color: Colors.white),
                        ),
                        Icon(
                          Icons.chevron_right,
                          color: Colors.white,
                        )
                      ],
                    ),
                  )
                ],
              ),
              Positioned(
                bottom: 30,
                child: GestureDetector(
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(50)),
                    child: Row(children: [Icon(Icons.redeem), Text("친구 추천하기")]),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

위 소스코드는 인프런 DevStory님의 플러터앱개발완성강의의 과제코드 중 일부입니다. 

Stack Widget : 위젯들을 겹칠때 사용한다.
children 상에서 뒤에 위치하는 위젯들이 위로 나오게된다. 따라서 페이지의 배경을 생성하거나 화면상 동 떨어진 위젯을 만들때 사용하는 것을 확인하였다.

Positioned : Stack Widget과 사용하며 속성으로 bottom을 설정 밑에서 bottom의 숫자값만큼 위에 생성, right를 설정하면 우측 right값 만큼 띄어준 상태로 생성된다.

Positoned.Fill과 같은 방식으로도 사용할수 있는데 Stack을 가득 채우는 방식으로 생성된다.