main.py

            
                
import flet as ft
import requests

def main(page: ft.Page):
    id = ft.TextField()
    password = ft.TextField()
    password_check = ft.TextField()

    def signup_request(e):
        url = 'http://127.0.0.1:8000/api/signup'
        data = {
            'id': id.value,
            'password': password.value
        }

        response = requests.post(url, json=data)
        response_data = response.json()
        page.snack_bar = ft.SnackBar(ft.Text(f"{response_data['status_code']} {response_data['content']}"))
        page.snack_bar.open = True
        page.update()

    page.add(
        ft.Text("아이디"),
        id,    
        ft.Text("패스워드"),
        password,
        ft.Text("패스워드확인"),
        password_check,
        ft.TextButton(text="회원가입", on_click=signup_request),
    )

ft.app(main)
  
            
        

작업순서

        
import flet as ft
        
    

import을 이용하여 사용할 패키지를 선언합니다.

flet의 경우 별칭(alias)을 사용하기 위해 `as ft`로 이하 ft를 이용합니다

        
ft.app(main)
        
    

flet의 app함수를 이용해 main을 실행시킵니다.

        
def main(page: ft.Page):
        
    

함수를 정의하고 함수안에서 사용할 page변수를 flet의 Page로 정의합니다.

        
id = ft.TextField()
password = ft.TextField()
password_check = ft.TextField()
        
    

사용할 TextField 컨트롤을 변수에 할당합니다.

        
page.add(
    id,
    password,
    password_check,
)
        
    

페이지에 추가하여 실행해봅니다.

        
page.add(
            ft.Text("아이디"),
            id,    
            ft.Text("패스워드"),
            password,
            ft.Text("패스워드확인"),
            password_check,
            ft.TextButton(text="회원가입", on_click=signup_request),
        )
        
    

구분을 위해 필요한 텍스트를 직접 넣어봅니다.

그리고 텍스트버튼도 추가하되 표시될 텍스트와 클릭했을시 함수명을 설장합니다

        
import requests
        
    

API통신을 위해 사용할 requests를 선언합니다

        
            
def signup_request(e):
    url = 'http://127.0.0.1:8000/api/signup'
    data = {
        'id: id.value,
        'password': password.value
    }

    response = requests.post(url, json=data)
    response_data = response.json()
    page.snack_bar = ft.SnackBar(ft.Text(f"{response_data['status_code']} {response_data['content']}"))
    page.snack_bar.open = True
    page.update()
  
        
    

API통신을 위해 url주소와 post로 통신하기위해 json 데이터를 만들어줍니다

post로 선언한 url과 json으로 데이터를 보냅니다

결과를 response에 받도록 지정합니다

받은 결과는 json으로 변환하고

json의 데이터를 snack_bar에 셋팅하여

보이도록 설정하고 해당 페이지를 갱신합니다.

이때 교육용 api 서버 하나가 켜져있어야합니다.

원하는걸 고민하고 설계하고 프로그램을 만들면서

본인에게 맞는 방식을 찾을 수 있도록

flutter, svelet, react도 있으니

알맞는 스킬을 습득하셨으면 좋겠습니다.