[flutter]배경화면 넣기 및 투명도 조절(Container, Opacity)

나는 Container Widget을 사용하여 배경 화면을 넣었습니다.

        body: Container(       < - Container 위젯

          decoration: BoxDecoration(   

            image: DecorationImage(

              colorFilter: ColorFilter.mode(       <- 배경화면의 투명도를 조절하기 위해 사용

                  Colors.black.withOpacity(0.1), BlendMode.dstATop),

              image: NetworkImage(

                  "https://cdn.pixabay.com/photo/2021/01/15/07/33/woman-5918637_960_720.jpg"),

              fit: BoxFit.cover,

            ),

          ),

          child: Center(    <- 실제 사용되는 위젯

 

앱의 매 화면마다 틀린 배경화면을 넣고 싶었습니다.

그래서 Container 윗젯으로 배경화면을 만들고 투명도도 추가하였습니다.

 

또 한가지 방법으로 Opacity 위젯을 사용하는 방법이 있습니다.

        body: Stack(     <- Stack 위젯으로 전체를 감싸고

          children: [     <- 배경 화면으로 사용할 이미지를 아래처럼 가져온다

            Opacity(

              opacity: 0.25,    <- 원하는 Opacity를 설정한다

              child: CachedNetworkImage(   <- 가져올 이미지를 설정하고

                imageUrl:

                    "https://cdn.pixabay.com/photo/2021/01/15/07/33/woman-5918637_960_720.jpg",

                progressIndicatorBuilder: (context, url, downloadProgress) =>

                    CircularProgressIndicator(value: downloadProgress.progress),

                errorWidget: (context, url, error) => Icon(Icons.error),

                fit: BoxFit.cover,

                colorBlendMode: BlendMode.srcATop,

              ),

            ),

            Container(    <- 화면에 띄울 위젯을 구성하는 부분이다

            ...... 이하 생략  .....

 

즐거운 시간되세요