flet-dev / website Goto Github PK

The link in the description is broken.
Instead of just column#on_scroll I think it should be docs/controls/column#on_scroll.

I'm not exactly sure how deep this problem goes, but what I've noticed is that ft.MainAxisAlignment.CENTER which is used in the documentation gives an error. And looking at the examples repo, I noticed it's mostly been with a string of "center".

This unfortunately made me really question if I want to go down the road of learning Flet. And honestly, I'm glad I gave it the time to figure out this problem, coz honestly it's a great framework. And I'm just mentioning this as it could really damage the onboarding of new developers.

This issue is also exasperated by Github Copilot

Some properties are missing documentation.

From this page, clicking the link in the description to the style prop of the elevated button says page not found. Tried to fix it, but what I saw in the markdown file seems alright:
--- See ElevatedButton.style](elevatedbutton#style)

Don't know where the issue is.. :)
Link to md file: https://github.com/flet-dev/website/blob/main/docs/controls/elevatedbutton.md

Titles:

• Onboarding Docs seriously anti- "Production Ready"
• Show OOP style in py-getting-started & direct towards a particular tutorial at end

Situation

• Just discovered this: Reusable UI Components
• after seeing class based flet UI tutorial on video: iYP6l1FYd-Y by "Mr. Newton"

Prior to this,

• I had completed the Flet Introduction, and Python Getting Started
  both of which show the flet-app done the procedural way.
• thereafter, i tried to use flet to make actual app; using Controls Reference side-by-side as needed
  this also lists instructions in POP way
• that is, the OOP way doesn't even get any mention anywhere to a newcomer
• I had almost given up on flet due to this completely POP approach
  which became impossibly hard to even grasp on trying to apply.
• and I did started doing Flutter
• ... which starts at this tutorial: first-flutter-app which teaches things the OOP way right from start....

Problem

Point I am trying to make is:

• this flow of docs given below does NOT make any sense to a newcomer.

• it first teaches it all in the POP way, then doesn't even mention about OOP way,
  and leaves the learner hanging in between.
  only for per to eventually decide it's too complicated to manage, and leave.

• the person is not guided towards a particular proper tutorial at any place.
  the tutorials don't have any order numbering, nor a "start here" label at the tutorial picker page.

• even the tutorials - I am assuming the Python - To-Do to be the first one -
  starts again from scratch from installing flet; a step already covered in the introduction

• oh, and the "how-it-works" doesn't even get any surface it seems.

- "0. Introduction"             (example 1: counter :: POP)
> "Tutorials > Want to learn how to build a real app?"
(tutorials? yes yes, sure please :))

> "1. Py Getting Started"       (example 2: Name input :: POP)
(hmm, Tutorial & Getting Started, sounds same :D let's proceed :))

> "but it's a matter of personal preference :)"
(umh, is that it? doesn't feel like it.)
(wow, such an abrupt stop! where to go next?)

> "Testing on iOS"
(whattt? oh it's flet-python documentation)

> "Tutorials"
(so many, umh which one to pick now??)
<trying randomly>

> "Python To-Do"
(OOP - the right way) ...

Let's Talk Solutions

1. show the how-it-works inside introduction to showcase those advantages to the technically acquaint person.
2. move the Flet app example and below sections from introduction to a new (next) page with "minimal" added in the title.
   smth like "Flet app minimal example" or "Flet minimal example"

3. [SALT]: Are you sure about the planned "multilanguage support"?
   This will make docs etc a lot more involved and require lots of redundant/repeated work.
4. [cntinued]: If yes, then some way to compile to different targets seems worth trying.
   See shen Yggdrasil - it will cover python, C/C++, JVM (java vm), JS (JavaScript), & Lisp in one go.

5. [Anyways, B2TT]¹: Add a successor page (or section) to py-getting-started aimed at converting the POP code obtained at that point into OOP styled; and move the reusable-ui-components at this new page's top.
6. At the end of this new page, refer to one particular tutorial - say, the python-todo
7. At the end of that (now designated first tutorial), refer to the tutorial picker page.

https://api.flutter.dev/flutter/material/SearchAnchor-class.html

Add a list of supported file formats in the Audio control docs.

Thew doc says this: "Every control has disabled property which is false by default - control and all its children are enabled. " It turns out the ft.Tab() doesn't have a disabled property!

In fact to do something like disabling a tab requires jumping through some hoops to make it work. You actually have to create a container for the tab, and disables it.This is pretty bogus because the user can go to a tab that has been disabled. One can capture the on_selected property and force it to a particular value, but this too is bogus. What happens is the selected tab is displayed and then you force it to another tab.

It would be so much nicer if the Tab had the disabled property and just wouldn't allow the tab to be selected.

I want to build my own fork.
I only need to build it on Windows, but others might want to build flet on other platforms.

• - Color for CupertinoButton
• - Remove filled property for CupertinoButton
• Remove elevation property for CupertinoButton
• - CupertinoFilledButton control that is inherited from CupertinoButton and has bgcolor = primary, text color = on_primary
• - Adaptive property for Outlined Button, FilledButton, FilledTonalButton
• CupertinoFilledButton in the list of buttons

• To-do app
• Calculator app
• Trello clone
• Solitaire game
• Chat app

3. [SALT]: Are you sure about the planned "multilanguage support"?
   This will make docs etc a lot more involved and require lots of redundant/repeated work.
4. [CNTD]: If yes, then some way to compile to different targets seems worth trying.
   See shen Yggdrasil - it will cover python, C/C++, JVM (java vm), JS (JavaScript), & Lisp in one go.

Re: "multilanguage support" - that was the "grand" idea
currently it's unreachable goal
adopting Flet for a different language is like starting all over again
- Originally posted by @FeodorFitsner in #141 (comment)

• that's understandable, but the source doesn't reflect it. that's why i got confused.
• i mean sure, i understand that it was a pre-paration & hint for anticipation.
• but if it's far far distant, i don't think this should be featured so prominently even in docs like it's there already.
  just mention at one prominent place that such feature (here, multilang) may come in future.

Sources:

1. Flet homepage
   

   website/src/pages/index.js

   Lines 54 to 62 in c5ab4c4

   	{
   	title: <>Speaks your language</>,
   	imageUrl: 'img/pages/home/feature-language.svg',
   	description: (
   	<>
   	Flet is language-agnostic, so anyone on your team could develop Flet apps in their favorite language. <a href="/docs/guides/python/getting-started">Python</a> is already supported, Go, C# and others are <a href="/roadmap">coming next</a>.
   	</>
   	),
   	},

2. Flet Introduction
   

   website/docs/introduction.md

   Line 90 in c5ab4c4

   Want to learn how to build a real app? Jump to a getting started guide for your language:

3. Tutorials Picker
   

   website/sidebars.js

   Lines 64 to 67 in c5ab4c4

   	type: "generated-index",
   	description:
   	"Flet apps can be created in multiple languages. Follow a getting-started guide below for your language.",
   	slug: "/tutorials",

4. Tutorials Trello Clone
   

   website/docs/tutorials/trello-clone.md

   Line 14 in c5ab4c4

   ## Why Flet?

• https://flet.dev/docs/controls/elevatedbutton#buttonstyle-class
• https://flet.dev/docs/controls/floatingactionbutton/#shape

I'm just curious.

The unchanged code has forced line breaks and there are issues with trailing commas and semicolons. Once I format it, the code files themselves that have not changed will also be modified due to formatting issues. They cannot be merged directly, conflicts will occur and need to be done manually. Adjustment, this is very troublesome. At first glance, it seems to be a format problem.

This is the default configuration of the vscode plug-in

For *.js

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "singleAttributePerLine": false,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/alan/gitproj/website/src/components/signup-form/index.js",
  "parser": "babel"
}

Flet accessibility section's example doesn't work as excpected when you press "Ctrl" + "S"

I run exactly this example and it's has a weird behaviour

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    def on_keyboard(e: ft.KeyboardEvent):
        print(e)
        if e.key == "S" and e.ctrl:
            page.show_semantics_debugger = not page.show_semantics_debugger
            page.update()

    page.on_keyboard_event = on_keyboard

    txt_number = ft.Text("0", size=40)

    def button_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        txt_number,
        ft.Text("Press CTRL+S to toggle semantics debugger"),
        ft.FloatingActionButton(
            icon=ft.icons.ADD, tooltip="Increment number", on_click=button_click
        ),
    )

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

when I click anywhere on the screen after pressing "ctrl" + "s", the mouse pointer show a blue circle.

Please @FeodorFitsner, when a new prop/method/event is added, we need to document them directly. The devs need to know the existence of each prop. And you know better than me, that we greatly rely on the online documentation for explanations (no docs in code). Below are some page props not found in the online docs. Please document them(keeping the alphabetical ordering in mind).
Hope I didn't miss any.

• debug
• platform_brightness
• error()
• design
• bottom_sheet
• fetch_page_details()
• get_control()
• insert()
• login()
• logout()
• name
• navigation_bar
• on_login
• on_logout
• on_platform_brigthness_change
• on_scroll_interval
• query
• remove()
• remove_at()
• session
• url

Hello every developer in flet-dev, here is a proposal about allow translation for flet's homepage.

Today's web may meet with localization problem in many situation, if their user from all over the world. Some project mainly maintained by some company will use English only, such as google's go.dev or dart.dev , while another popular programming language like rust, ruby, nodejs and even vue.js, all of them are becoming more friendly to user from different countries or region. Here I'll use S-Chinese as example:

• https://github.com/ruby/www.ruby-lang.org/tree/master/zh_cn

• https://github.com/rust-lang/www.rust-lang.org/tree/master/locales/zh-CN

• https://github.com/nodejs/nodejs.org/tree/main/locale/zh-cn

• https://github.com/vuejs-translations/docs-zh-cn

Maybe you'll feel strange when just see those square character. For me, my language is S-Chinese, I can read English and write a piece of text, but if I can explore flet or read the docs in my native language, it will be happy and more relaxable, more willing to learn this framework, and let me know that at least one developer who using my native language has been active on this open source project.

I looks for flet-dev organization's current 6 repository and haven't found where to raise a proposal, so I open this issue, and want to listen to flet's maintainer's advice. Thank you for reading this.

The volume property of ft.Audio is misplaced in the Methods section rather than Properties section

Audio control docs - volume

Kind of a ping until it is done. 🙂

• Full list of supported emojis (colon markup like 👍 💯 🥇 ) are missing. (a link would be enough of course)
• There is no example or description on how to add intentional line break in a table cell
• No mention of non breaking space to avoid linebreaks
• The documentation briefly mentions extension_set, without any description of what the four options are, what are the differences and where are the full specs of the extensions.

For example: google github_web markdown leads to

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

Following that document one could expect a Table Of Contents to appear as in:
"When you use two or more headings, GitHub automatically generates a table of contents that you can access by clicking within the file header. "

Since the documentation does not specify what to expect from any of the extensions I don't know what to expect from any symbol not directly mentioned in the example.

There is an error in the NavigationRail code sample https://flet.dev/docs/controls/navigationrail#examples.

The code

destinations=[
    NavigationRailDestination(
        icon=ft.icons.FAVORITE_BORDER, selected_icon=ft.icons.FAVORITE, label="First"
    ),
    NavigationRailDestination(
        icon_content=ft.Icon(ft.icons.BOOKMARK_BORDER),
        selected_icon_content=ft.Icon(ft.icons.BOOKMARK),
        label="Second",
    ),
    NavigationRailDestination(
        icon=ft.icons.SETTINGS_OUTLINED,
        selected_icon_content=ft.Icon(ft.icons.SETTINGS),
        label_content=ft.Text("Settings"),
    ),
],

has to be changed to

destinations = [
    ft.NavigationRailDestination(
       icon=ft.icons.FAVORITE_BORDER, selected_icon=ft.icons.FAVORITE, label="First"
    ),
    ft.NavigationRailDestination(
       icon_content=ft.Icon(ft.icons.BOOKMARK_BORDER),
       selected_icon_content=ft.Icon(ft.icons.BOOKMARK),
       label="Second",
    ),
    ft.NavigationRailDestination(
       icon=ft.icons.SETTINGS_OUTLINED,
       selected_icon_content=ft.Icon(ft.icons.SETTINGS),
       label_content=ft.Text("Settings"),
    ),
],

The ft. is missing in front of the NavigationRailDestination.

e.data is always an empty string. e.control.data gives you the expected value.

https://docusaurus.io/docs/search

• Pagelet control
• bottom_appbar property for page.
• note that navigation_bar will be used if both navigation_bar and bottom_appbar is provided, both for page and pagelet
• trailing property for CupertinoAppBar
• compare properties for CupertinoAppBar and AppBar and propose adaptive property and changes to property names.