ResponsiveRow how to make 2 Column When Size Mobile

[bobwatcherx]

Question

how to make 2 column when size screen is mobile . when i set col sm is 6 . why my container full width .

Code sample

from flet import *
import requests

class Home(UserControl):
    def __init__(self):
        super(Home, self).__init__()
        self.body_column = ResponsiveRow()

    def build(self):
        # Ini adalah tampilan sederhana, Anda dapat menyesuaikannya sesuai kebutuhan
        return Column([
            Text("Data from JSONPlaceholder:"),
            self.body_column
        ])

    def did_mount(self):
        url = "https://random-data-api.com/api/users/random_user?size=10"  # Ganti dengan URL yang sesuai
        try:
            response = requests.get(url)
            data = response.json()
            for user in data:
                self.body_column.controls.append(
                    Column(
                        col={"sm": 6, "md": 4, "lg": 4},
                        controls=[
                            Container(
                                bgcolor="blue200",
                                content=Column([
                                    Image(src=user['avatar'], width=100, height=100),
                                    Text(f"ID: {user['uid']}"),
                                    Text(f"Name: {user['first_name']} {user['last_name']}")
                                ])
                            )
                        ]
                    )
                )
        except Exception as e:
            print("Error fetching data:", str(e))
        self.update()


def main(page: Page):
    page.scroll = True
    page.padding = 0
    page.spacing = 0
    page.add(Home())

app(main, view=AppView.WEB_BROWSER, port=5050)

Error message

No response

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

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

[burhansvural]

@bobwatcherx
You need to use ResponsiveRow.
https://flet.dev/blog/responsive-row-and-mobile-controls/

[burhansvural]

@bobwatcherx
I'm sorry I didn't see it. You used responsive row, but the content placement is incorrect.

`
from flet import *
import requests

class Home(UserControl):
def init(self):
super(Home, self).init()
self.body_column = ResponsiveRow()

def build(self):
    # Ini adalah tampilan sederhana, Anda dapat menyesuaikannya sesuai kebutuhan
    return Column([
        Text("Data from JSONPlaceholder:"),
        self.body_column
    ])

def did_mount(self):
    url = "https://random-data-api.com/api/users/random_user?size=10"  # Ganti dengan URL yang sesuai
    try:
        response = requests.get(url)
        data = response.json()
        for user in data:
            self.body_column.controls.append(
                Column(
                    col={"sm": 6, "md": 4, "xl": 2},
                    controls=[
                        Image(src=user['avatar'], width=100, height=100),
                        Text(f"ID: {user['uid']}"),
                        Text(f"Name: {user['first_name']} {user['last_name']}")
                        ]
                    )
                )
            
            
    except Exception as e:
        print("Error fetching data:", str(e))
    self.update()

def main(page: Page):
page.scroll = True
page.padding = 0
page.spacing = 0
page.add(Home())

app(main, view=AppView.WEB_BROWSER, port=5050)
`

[bobwatcherx]

i forgot use xs . solved

[burhansvural]

Ok. I'm glad you solved the problem. bobwatcherx ***@***.***>, 5 Şub 2024 Pzt, 12:23 tarihinde şunu yazdı:

…

i forgot use xs . solved — Reply to this email directly, view it on GitHub <#2554 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDXQYGVOZ7FINJAUSRUSFDLYSCQJ5AVCNFSM6AAAAABCZVB4JOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNRXGUYDM> . You are receiving this because you commented.Message ID: ***@***.***>