[Flutter] 앱 배경화면 사진으로 채우기

 앱 배경화면을 사진으로 채우기

배경화면을 흰 바탕이나 색으로 채우기에는 불편함이 없지만
앱 페이지마다 직접 디자인한 사진이 들어가야 한다면
Scaffold는 따로 지원해 주는 것이 없기 때문에 Container에서 설정을 해줘야 합니다
그래서 이번 포스팅은 배경화면을 사진으로 채우는 방법에 대해서 알아보겠습니다

 

Widget 설정 및 사용방법

방법은 매우 간단하지만 반복되는 코드이기에 코드를 따로 빼주는 작업만 해주면 편합니다

import 'package:flutter/material.dart';

Widget backgroundContainer(
    {required BuildContext context,
    required Widget child,
    required String imagePath}) {
  return Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage(imagePath),
        //📲 이 부분은 사진에 맞게 맞춰주시면 됩니다
        //📲 페이지 마다 따로 설정해야 한다면 파라미터로 빼도 됩니다
        fit: BoxFit.contain,
      ),
    ),
    //📲 Column 위젯을 사용하는 것을 권장합니다
    child: child,
  );
}

 

위젯을 설정해주셨으면 사용하는 방법은 아래와 같습니다
주의하실 점은 이미지의 확장자의 대소문도 구분하니 완전 똑같이 써주셔야 합니다

import 'package:flutter/material.dart';
import 'package:supabase_connect/utils/background_setting.dart';

class Background extends StatefulWidget {
  const Background({super.key});

  @override
  State<Background> createState() => _BackgroundState();
}

class _BackgroundState extends State<Background> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text('Nuridal Class: background fill image',
                style: TextStyle(fontSize: 15))),
                
        //📲 body 부분에 설정한 위젯을 가져옵니다
        body: backgroundContainer(
            context: context,
            //📲 이미지 경로를 맞게 기입합니다
            //📲 특히! 확장자 대소문까지 맞아야 하니 확인해야합니다
            imagePath: 'assets/background.PNG',
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [Text('')],
            )));
  }
}

 

 

 실행화면

이미지 경로를 틀리지 않았다면 아래와 같이 설정한 사진이 표시가 될 것입니다

아래에 이미지 파일을 샘플로 올려두었으니 바로 사용해 보셔도 됩니다

background.PNG

0.10MB

---

오늘은 간단하지만 설정해두면 편한

이미지를 배경화면에 채우는 방법에 대해서 알아보았습니다

조금이나마 도움이 되셨길 바랍니다

그럼! 코딩이 쉬워지는 그날까지!!