Flutter에서 배경 이미지를 설정하는 방법은 무엇입니까?

모든 모바일 애플리케이션에는 최종 사용자의 요구 사항에 따라 다른 배경색, 배경 이미지가 있습니다. 그래서 오늘 글에서는 Flutter에서 배경 이미지를 설정하는 방법에 대해 알아보겠습니다.

Flutter에서 배경 이미지를 설정하는 방법은 무엇입니까?
사용자가 이미지가 전체 화면을 채우도록 하려면 BoxFit.cover에 맞는 DecorationImage를 사용할 수 있습니다.

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

사용자는 Container Widget 기사도 읽을 수 있습니다.

사용자는 DecoratedBox Widget을 사용하여 동일한 작업을 수행할 수도 있습니다. 아래와 같은 코드 스니펫을 고려하십시오.

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

우리는 아래와 같은 결과를 얻을 것입니다:


Flutter의 배경 이미지
사용자는 Stack Widget을 사용하여 이미지를 전체 화면으로 늘릴 수 있습니다.

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

Container Widget을 사용하여 높이를 무한대로 표시할 수 있습니다.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
          appBar: AppBar(
            title: const Text("Background Image"),
          ),
          body: SizedBox(
            height: double.infinity,
            width: double.infinity,
            child: FittedBox(
              fit: BoxFit.cover,
              child: Image.network(
                'https://images.unsplash.com/photo-1547721064-da6cfb341d50',
              ),
            ),
          )),
    );
  }

우리는 아래와 같은 결과를 얻을 것입니다:

결론:

이 기사에서는 Flutter에서 배경 이미지를 설정하는 방법을 살펴보았습니다.

읽어 주셔서 감사합니다.
계속 펄럭입니다.

Flutter 디자인 및 Flutter 개발에 도움이 필요하면 알려주세요.

우리는 당신을 도와주고 싶습니다.

FlutterAgency.com은 Flutter 기술 및 Flutter 개발자 전용 포털 플랫폼입니다. 포털에는 Flutter 위젯 가이드, Flutter 프로젝트, 코드 라이브러리 등과 같은 Flutter의 멋진 리소스가 가득합니다.