Ui 배경화면 설정에서 그라디언트까지, set Background

 

 

Container 를 사용해서 DecorationImage 로 설정하기

 

 

class OnHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imagePath ='https://cdn.pixabay.com/photo/2023/11/26/08/27/leaves-8413064_640.jpg';
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
      color: Colors.white,
      image: DecorationImage(image: NetworkImage(imagePath), fit: BoxFit.cover),
    ),
      child: Center(child: Text("Home screen", style: TextStyle(fontSize: 40))),
    )    );  }}

 

Scaffold를 Container의 child로 설정할 수도 있다.

스케폴드의  backgroundColor: Colors.transparent, 투명도를 설정해 준다.

class OnHomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imagePath = 'https://cdn.pixabay.com/photo/2023/11/26/08/27/leaves-8413064_640.jpg';
    return Container(
        decoration: BoxDecoration(
          image: DecorationImage(image : NetworkImage(imagePath),fit: BoxFit.cover)
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: Center(child: Text("Home screen", style: TextStyle(fontSize: 40))),
        ));
  }
}

 

Container 에 Container 를 이용해서 layer 효과를 줄 수 있다.

 

Container(
        decoration: BoxDecoration(
          image: DecorationImage(image : NetworkImage(imagePath),fit: BoxFit.cover)
        ),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.center,
              end: Alignment.bottomCenter,
              colors: [Colors.black, Colors.brown]
            )
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: Center(child: Text("Home screen", style: TextStyle(fontSize: 40))),
          ),
        ));

 

아래와 같이 투명도를 설정하면 그라디언트가 예쁘게 잡힌다.

 

colors: [Colors.black12, Colors.black]