Python self.page.snack_bar doesn't work in Flet

Question

I'm a beginner student and trying to validate my login code showing a snackbar mensage. There are no erros to run, but snackbar doesn't appear. At first a tried if a firebase authentication, and i think that could be wrong and tried with a simple condition, but doesn't work either, condition being right or not.

flet --version 0.27.1

what could be the problem? could someone help me? Thank You.

import flet as ft
from utilis.colors import *
from database.firebase_config import auth_pyrebase


class Login(ft.Container):
    def __init__(self, page: ft.Page):
        super().__init__()

        
        self.expand = True
        self.page = page

        self.user = ft.TextField(
                label= 'E-mail',
                border_color= BorderColor,
                width= 400,
            )

        self.password = ft.TextField(
                label= 'Password',
                password=True,
                can_reveal_password=True,
                border_color= BorderColor,
                width= 400,
            )
        
        self.btn_login = ft.ElevatedButton(
            text='Login',
            color= TxtColor,
            bgcolor=ButtonLoginColor,
            width=100,
            height= 40,
            on_click= self.login,
        )

        self.btn_singup = ft.ElevatedButton(
            text='Sign Up',
            color= TxtColor,
            bgcolor=ButtonSingupColor,
            width=100,
            height= 40,
            on_click= lambda e: page.go('/singup')
        )

        self.content = ft.Row(
            controls=[
                ft.Container(
                    expand= 1,
                    padding = ft.padding.all(20),
                    content = ft.Column(
                        alignment=ft.MainAxisAlignment.CENTER,
                        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                        controls=[
                        ft.Text('Login',
                                color=TxtColor,
                                size=40,
                                weight=ft.FontWeight.BOLD),
                        self.user,
                        self.password,
                        self.btn_login,
                        self.btn_singup,
                        ]
                    )                
                )            
            ]
        )

    def login(self, e):
        
        # try:
            # auth_pyrebase.sign_in_with_email_and_password(
            #     self.usuario.value, self.senha.value)
        if self.user.value == 'test' and self.password.value == 'test':
            self.page.snack_bar = ft.SnackBar(
                ft.Text(
                    value='Login OK',
                    color='white',
                ),
                bgcolor='green',
                action='OK',
                duration=3000,
            )
            self.page.snack_bar.open = True
            self.page.update()
            self.user.value = ""
            self.password.value = ""

        else:
            self.page.snack_bar = ft.SnackBar(
                ft.Text(
                    value='Erro',
                    color='white',
                ),
                bgcolor='red',
                action='OK',
                duration=3000,
            )
            self.page.snack_bar.open = True
            self.page.update()

            self.user.value = ""
            self.password.value = ""

I already try to copy a example in Flet Docs, but also doesn't work.

self.page.open(ft.SnackBar(
                ft.Text(
                    value='Login OK!',
                    bgcolor='green',
                    action='OK',
                    duration=3000,
                )))

Minimal Reproducible Example

import flet as ft

class Login(ft.Container):
    def __init__(self, page: ft.Page):
        super().__init__()

        self.page = page

        self.user = ft.TextField(
                label= 'E-mail'                
            )

        self.password = ft.TextField(
                label= 'Password',
             )
        
        self.btn_login = ft.ElevatedButton(
            text='Login',
            on_click= self.login,
        )
        
        self.content = ft.Row(
            controls=[
                ft.Container(
                    content = ft.Column(
                        controls=[
                        ft.Text('Login'),
                        self.user,
                        self.password,
                        self.btn_login,
                        ]
                    )                
                )            
            ]
        )

    def login(self, e):
     
        if self.user.value == 'test' and self.password.value == 'test':
            self.page.snack_bar = ft.SnackBar(
                ft.Text(
                    value='Login OK',
                    color='white',
                ),
                bgcolor='green',
                action='OK',
            )
            self.page.snack_bar.open = True
            self.page.update()
        else:
            self.page.snack_bar = ft.SnackBar(
                ft.Text(
                    value='Erro',
                    color='white',
                ),
                bgcolor='red',
                action='OK',
            )
            self.page.snack_bar.open = True
            self.page.update()

Answer 1

Hello friend I also had that problem , but since I use it so it works try with the code below. if you do not have instantiated page use only page.update().

snackbar=ft.SnackBar(
    content=ft.Text(
        value="Login Ok",
        bgcolor="white",
    ),
    bgcolor="green",
    action="ok",
    duration=3000
)
self.page.overlay(snackbar)
snackbar.open=True
self.page.update()

Answer 2

I am still new to Flet as well. First of all, I'm lumping all the login-related controls together into a class, but I don't need to set up a page for that. And if you look at the reference for the snack bar, after setting the snack bar, it opens it and refreshes the page, so rewriting it as follows will achieve the desired behavior.

import flet as ft

class Login(ft.Container):
    def __init__(self): #, page: ft.Page
        super().__init__()

        #self.page = page

        self.user = ft.TextField(
                label= 'E-mail'                
            )

        self.password = ft.TextField(
                label= 'Password',
             )
        
        self.btn_login = ft.ElevatedButton(
            text='Login',
            on_click= self.login,
        )
        
        self.content = ft.Row(
            controls=[
                ft.Container(
                    content = ft.Column(
                        controls=[
                        ft.Text('Login'),
                        self.user,
                        self.password,
                        self.btn_login,
                        ]
                    )                
                )            
            ]
        )

    def login(self, e):
     
        if self.user.value == 'test' and self.password.value == 'test':
            self.snack_bar = ft.SnackBar(
                ft.Text(
                    value='Login OK',
                    color='white',
                ),
                bgcolor='green',
                action='OK',
            )
            self.page.open(self.snack_bar)
            self.page.update()
        else:
            self.snack_bar = ft.SnackBar(
                ft.Text(
                    value='Erro',
                    color='white',
                ),
                bgcolor='red',
                action='OK',
            )
            self.page.open(self.snack_bar)
            self.page.update()

def main(page: ft.Page):
    page.title = "Flet login test"

    page.add(
        ft.Column(
            [
                Login()
            ]
        )
    )

ft.app(target=main)

To further class the snack bar and update the error messages and background color, it is possible to

import flet as ft

class Login(ft.Container):
    def __init__(self): 
        super().__init__()

        self.user = ft.TextField(
                label= 'E-mail'                
            )

        self.password = ft.TextField(
                label= 'Password',
             )
        
        self.btn_login = ft.ElevatedButton(
            text='Login',
            on_click= self.login,
        )

        self.snack_bar = ft.SnackBar(
            content=ft.Text(
                value='',
                color='white'
            ),
            bgcolor='green',
            action='OK'
        )
        self.snack_bar.open = False

        self.content = ft.Row(
            controls=[
                ft.Container(
                    content = ft.Column(
                        controls=[
                        ft.Text('Login'),
                        self.user,
                        self.password,
                        self.btn_login,
                        self.snack_bar
                        ]
                    )                
                )            
            ]
        )

    def login(self, e):
     
        if self.user.value == 'test' and self.password.value == 'test':
            self.snack_bar.content.value='Login OK'
            self.snack_bar.open=True
            self.snack_bar.update()
        else:
            self.snack_bar.content.value='Erro'
            self.snack_bar.bgcolor='red'
            self.snack_bar.open=True
            self.snack_bar.update()

def main(page: ft.Page):
    page.title = "Flet login test"

    page.add(
        ft.Column(
            [
                Login()
            ]
        )
    )

ft.app(target=main)