[Question] How do I set the background of my View to an image without container

[coolninjaturtle]

Question

This code is not working like I intend it to. I know I could just set the img_src property of a container to the path of the image and set expand = True to get my desired effect. However, a Container does not take a ShaderMask object as an image source, and I need to apply the gradient. Please help me, I cannot get this control to expand so that it fills up the entire background of my View. For reference, this is what it currently looks like:

Code sample

import flet as ft


class OpeningView(ft.View):
    def __init__(self, page: ft.Page):
        super().__init__()
        self.padding = 0
        self.bg_image = ft.Container(
            expand=True,
            content=ft.ShaderMask(
                ft.Image(src="images/bg_image.jpg", fit=ft.ImageFit.FILL),
                blend_mode=ft.BlendMode.DST_IN,
                expand=True,
                shader=ft.LinearGradient(
                    begin=ft.alignment.top_center,
                    end=ft.alignment.bottom_center,
                    colors=[ft.colors.BLACK, ft.colors.TRANSPARENT],
                    stops=[0.5, 1.0],
                ),
            ),
        )

        self.text_and_button_container = ft.Container(
            alignment=ft.alignment.center,
            padding=ft.padding.only(bottom=50, left=5, right=5),
            content=ft.Column(
                expand=True,
                spacing=40,
                controls=[
                    ft.Text(
                        spans=[
                            ft.TextSpan(
                                text='Document Your Favorite Recipes!',
                                style=ft.TextStyle(
                                    color=ft.colors.WHITE,
                                    size=30,
                                    weight=ft.FontWeight.BOLD,
                                    shadow=ft.BoxShadow(color=ft.colors.BLACK, offset=ft.Offset(2, 3)),
                                ),
                            )
                        ],
                        text_align=ft.TextAlign.CENTER,
                    ),
                    ft.ElevatedButton("Get Started", on_click=lambda _: page.go("/login")),
                ],
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                alignment=ft.MainAxisAlignment.END,
            )
        )

        self.background_container = ft.Container(
            alignment=ft.alignment.center,
            expand=True,
            content=ft.Stack(
                expand=True,
                controls=[
                    self.bg_image,
                    self.text_and_button_container,
                ]
            ),
        )

        self.controls = [self.background_container]

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[coolninjaturtle]

I figured it out if anyone is facing the same problem that I am. The only part of my code that changed was the following:

self.bg_image = ft.Row( expand=True, controls=[ft.ShaderMask( ft.Image(src="images/bg_image.jpg", fit=ft.ImageFit.FILL, height=1155), blend_mode=ft.BlendMode.DST_IN, expand=True, shader=ft.LinearGradient( begin=ft.alignment.top_center, end=ft.alignment.bottom_center, colors=[ft.colors.BLACK, ft.colors.TRANSPARENT], stops=[0.5, 1.0], ), )], )
Wrapping the content in a Row instead of a container made it magically work. Went through the flet documentation and figured out that the only controls whose children can actually expand are the row and column controls. However, employing a Column here instead of a Row does not work, and I have no idea why. Anyway, I am happy as long as my code works.