Flutter 앱에서 공유 배경 설정

지난 몇 달 동안 저는 Flutter에서 고객을 위한 앱을 구축하기 시작했습니다. 당분간은 Google에서 구축한 이 라이브러리가 마음에 듭니다. 하지만 내 앱의 다양한 페이지에서 지속되는 배경을 설정하는 방법을 파악하는 데 어려움을 겪고 있었습니다.
최신 앱에서 어떻게 했는지 알아보려면 계속 읽으세요.

Photo by Efe Kurnaz on Unsplash

플러터 이해하기: 위젯

Flutter는 Widgets로 만들어졌습니다. 이들은 마치 레고 블록과 같습니다. 하나를 서로 위에 올려 고유한 앱 인터페이스를 구축할 수 있습니다.
Flutter의 기본 위젯은 MaterialApp입니다. 머티리얼 디자인을 사용하는 경우 이 위젯은 휴대폰에서 앱을 렌더링하는 방법과 명명된 내비게이터를 사용하는 경우 탐색할 수 있는 페이지를 알려줍니다(권장).

비계 위젯 구조

모든 Flutter 애플리케이션에서 찾을 수 있는 또 다른 기본 위젯은 Scaffold 입니다. 이를 통해 위젯을 화면에 표시할 수 있으며 기본적으로 AppBars , BottomNavigationsAppBars 및 Drawers 를 구현합니다. 정말 대단한 일입니다.
계속 진행해 보겠습니다. 각각Scaffold에는 하나의 필수 필드가 있습니다.

예를 들면 다음과 같습니다.

import 'package:flutter/material.dart';

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Text('Hi world!'),
        ));
  }
}

이것은 기본적으로 화면 왼쪽 상단에 텍스트를 렌더링하도록 지시합니다. 직접 확인하세요.



이제 이 게시물의 주장으로 넘어갈 시간이라고 합니다. 애플리케이션 전체에서 이미지를 배경으로 공유하기 위해 필요한 정보를 어떻게 사용할 수 있습니까?
대답은 정말 간단합니다. 우리가 해야 할 일은 또 다른 기본 flutter의 위젯을 사용하는 것입니다: body .

다른 위젯: 스택

스택을 통해 우리가 할 수 있는 것은 단순히 위젯을 서로의 위에 놓는 것입니다.
Flutter에서 위젯을 렌더링하는 세 가지 방법이 있습니다: Widget , Stack 및 Row 하지만 이 게시물의 주장은 아니며 이러한 위젯에 대한 정보는 flutter 문서에서 쉽게 볼 수 있습니다.

어떻게 우리의 목적을 위해 스택을 사용할 수 있습니까?

이제 우리가 할 수 있는 것은 Scaffold 위젯을 사용하여 기본적으로 스택이 있는 본문을 렌더링하는 것입니다. 스택 하위는 Column 위젯과 Stack 위젯입니다.
이미지 위젯은 휴대폰의 모든 화면을 덮는 이미지를 렌더링하고 컨테이너는 이미지를 배경으로 사용하여 이미지 위에 다른 위젯을 렌더링하기 위해 화면의 모든 공간을 차지합니다. 코드는 다음과 같습니다.

import 'package:flutter/material.dart';

class MyScaffold extends StatelessWidget {
  final Widget child;
  final String image;

  ModelToysScaffold(
      {@required this.child,
      this.image = 'assets/images/background.png',});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), =>
      body: Stack(
        children: [
          Positioned(
            top: 0,
            child: Image.asset(
              image,
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover,
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: child,
          ),
        ],
      ),
    );
  }
}

결과는 다음과 같습니다.



이 접근법에 대해 어떻게 생각하십니까?
댓글로 알려주세요! 😉