Some display issues in Flet 0.25.1 version

[lasifea]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

• The tooltips in the SegmentedButton and BarChartGroup components are escaped every time the page.update method is used.
• The default border of the SegmentedButton component is missing.
• When the hint_text property in the TextField component is not focused, it will not be displayed. Setting the max_length property does not have a default display value, and counter_text must be specified at the same time.
• The FilledButton, Filled-DonalButton, and ElevatedButton components lack left and right padding, resulting in inconsistent button styles.
  
  Additionally, I hope the markdown component can support parsing brtags. (From machine translation, please understand if the expression is inaccurate.)

Code sample

Code

import flet as ft


def main(page: ft.Page):
    def open_dialog(e):
        dialog = ft.AlertDialog(content=ft.Text('This is a test.'), open=True)
        # page.overlay.append(dialog)
        # page.update()
        page.open(dialog)

    def change_theme(e):
        page.theme_mode = ft.ThemeMode.DARK if page.theme_mode == ft.ThemeMode.LIGHT else ft.ThemeMode.LIGHT
        page.update()

    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.spacing = 15
    page.theme_mode = ft.ThemeMode.LIGHT

    segments = [
        ft.Segment('1', ft.Icon(ft.icons.LOOKS_ONE), ft.Text('cat', size=16), tooltip='喵喵喵'),
        ft.Segment('2', ft.Icon(ft.icons.LOOKS_TWO), ft.Text('dog', size=16), tooltip='wow wow wow')]
    segment_btn = ft.SegmentedButton(segments, selected={'1'},
                                     # style=ft.ButtonStyle(side=ft.BorderSide(width=1, color='secondary')),
                                     )

    name_input = ft.TextField(width=400, hint_text="What's your name?", max_length=20,
                              # counter_text='{value_length}/{max_length}',
                              )

    bar_group = ft.BarChartGroup(x=0, bar_rods=[ft.BarChartRod(to_y=40, color=ft.colors.AMBER, tooltip="苹果", width=20)])
    bar_group2 = ft.BarChartGroup(x=1, bar_rods=[ft.BarChartRod(to_y=80, color=ft.colors.BLUE, tooltip='banana', width=20)])
    labels = [ft.ChartAxisLabel(value=0, label=ft.Text("apple")),
              ft.ChartAxisLabel(value=1, label=ft.Text('banana'))]
    chart = ft.BarChart(bar_groups=[bar_group, bar_group2], border=ft.border.all(1, ft.colors.GREY_400),
                        left_axis=ft.ChartAxis(labels_size=40, title=ft.Text("fruits"), title_size=40),
                        bottom_axis=ft.ChartAxis(labels=labels, labels_size=32),
                        tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300),
                        max_y=100, width=600)

    btn = ft.FilledButton('open dialog', on_click=open_dialog)
    btn2 = ft.FilledTonalButton('change theme', on_click=change_theme)
    btn3 = ft.ElevatedButton('没有事情发生')
    btn4 = ft.OutlinedButton("I'm still the same.")

    page.add(segment_btn, name_input, chart, btn, btn2, btn3, btn4)


if __name__ == '__main__':
    ft.app(main)

To reproduce

1. Click the switch theme button.
2. Place the mouse on SegmentedButton and BarChartGroup components.

Expected behavior

• I hope the default style of the component can maintain its previous appearance, but the default style of version 0.25 is strange.
• And I hope the markdown component can support parsing brtags.

Screenshots / Videos

Captures

[Upload media here]

Operating System

Windows

Operating system details

Windows10

Flet version

0.25.1

Regression

Yes, it used to work in a previous Flet version (please specify the version in additional details)

Suggestions

No response

Logs

Logs

[Paste your logs here]

Additional details

No response

[Muddassir-Farooq-official]

Height of textfields are also not working if nothing in it

[lasifea]

@Muddassir-Farooq-official Yeah, it doesn't work, but you can set text_size and content_padding properties to maintain the same height.

[Muddassir-Farooq-official]

@Muddassir-Farooq-official Yeah, it doesn't work, but you can set text_size and content_padding properties to maintain the same height.

Can you share example code

[lasifea]

@Muddassir-Farooq-official This is sufficient in most cases.

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    input_a = ft.TextField(width=600, hint_text='hello')
    input_b = ft.TextField(width=600, label='python', text_size=24, content_padding=40)
    input_c = ft.TextField(width=600, value='flet', text_size=32, content_padding=ft.Padding(40, 80, 40, 80))
    page.add(input_a, input_b, input_c)


if __name__ == '__main__':
    ft.app(main)

[Muddassir-Farooq-official]

But I don't want text to be look like this starting from center it should start from top corner of field

[ndonkoHenri]

Setting the max_length property does not have a default display value, and counter_text must be specified at the same time.

We made it as such. Issue #4273, PR #4403

The tooltips in the SegmentedButton and BarChartGroup components are escaped every time the page.update method is used.

We have an open issue concerning this: #4378.

---

Concerning the Height of the textfield, see this:

Example

 import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT

    def handle_slider_change(e: ft.ControlEvent):
        field_1.height = e.control.value
        field_2.height = e.control.value
        page.update()

    page.add(
        ft.Slider(
            value=70,
            min=70,
            max=300,
            divisions=20,
            on_change=handle_slider_change,
        ),
        ft.Row(
            controls=[
                field_1 := ft.TextField(
                    label="fit_parent_size",
                    fit_parent_size=True,
                    height=70,
                ),
                field_2 := ft.TextField(
                    label="fit_parent_size + collapsed + content_padding",
                    fit_parent_size=True,
                    height=70,
                    collapsed=True,  # helps aligns the text in the field to the top vertically
                    content_padding=15,
                ),
            ]
        ),
    )


ft.app(target=main)

[lasifea]

@ndonkoHenri OK, there are also the second item, the first half of the third item, the fourth item, and a function request.

[ndonkoHenri]

Several issues have been fixed. Give the the latest pre-release a try: pip install 'flet[all]' --pre

[lasifea]

@ndonkoHenri OK, it's fine in version 0.25.2, but the default padding style for the button is still different from version 0.24, it looks a little strange. 🤔I have to spend more time modifying the style to migrate my application to version 0.25. Additionally, I hope the markdown component can support parsing br tags.

[ndonkoHenri]

default padding style for the button is still different

@lasifea please share code to repro that.

[lasifea]

@ndonkoHenri It just in the example code above, the default padding style for the FilledButton, FilledDonalButton, and ElevatedButton components have been changed.