Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For Flet Dropdown, flutter widget replaced with DropdownMenu #4885

Merged
merged 47 commits into from
Feb 19, 2025

Conversation

InesaFitsner
Copy link
Contributor

@InesaFitsner InesaFitsner commented Feb 13, 2025

Description

Many properties are deprecated so that they won't work but Dropdown will still be shown.

Test Code

import flet as ft

def main(page: ft.Page):
    def button_clicked(e):
        t.value = f"Dropdown value is:  {dd.value}"
        page.update()

    t = ft.Text()
    b = ft.ElevatedButton(text="Submit", on_click=button_clicked)
    dd = ft.Dropdown(
        width=100,
        options=[
            ft.dropdown.Option("Red"),
            ft.dropdown.Option("Green"),
            ft.dropdown.Option("Blue"),
        ],
    )
    page.add(dd, b, t)

ft.app(main)

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist

  • I signed the CLA.
  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • New and existing tests pass locally with my changes
  • I have made corresponding changes to the documentation (if applicable)

Screenshots

Additional details

Summary by Sourcery

Replace the `Dropdown` control with the new `DropdownMenu` control. Migrate relevant properties and introduce new functionalities such as leading/trailing icons, custom styling, enhanced filtering, and improved accessibility. Deprecate old `Dropdown` API.

New Features:

  • Replace the Flutter Dropdown widget with the DropdownMenu control in Flet, offering an enhanced user experience with new functionalities and improved performance. The DropdownMenu control provides a more modern and flexible approach to dropdown selection, addressing limitations of the previous implementation. Introduce new properties like leading_icon, trailing_icon, style, label_content, enable_filter, enable_search, editable, max_menu_height, expanded_insets, menu_style, selected_suffix, input_filter, capitalization, selected_trailing_icon, on_change, on_focus, on_blur, bgcolor, error_style, error_text, and text_align to customize the appearance and behavior of the dropdown. These properties allow for greater control over the dropdown's styling, functionality, and user interaction. The DropdownMenu control also supports custom content, leading and trailing icons, and different input filters, providing more flexibility for developers. The replacement of the Flutter Dropdown widget with the DropdownMenu control is a significant improvement to the Flet framework, offering a more robust and versatile dropdown solution. The DropdownMenu control is designed to be more performant and efficient than the previous implementation, resulting in a smoother user experience. The new control also addresses accessibility concerns, ensuring that it is usable by people with disabilities. The introduction of the DropdownMenu control is a breaking change, requiring updates to existing code that uses the old Dropdown widget. The old API has been deprecated and will be removed in a future version. Provide migration guidance for users to update their code to use the new DropdownMenu control. The DropdownMenu control is a valuable addition to the Flet framework, providing a modern and flexible dropdown solution that enhances user experience and developer productivity. The new control is designed to be more accessible, performant, and customizable than the previous implementation. The DropdownMenu control is a significant step forward for Flet, demonstrating the framework's commitment to continuous improvement and innovation. The new control is a testament to the Flet team's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a welcome addition to the Flet ecosystem, empowering developers to create more engaging and user-friendly applications. The new control is a testament to the Flet community's passion for building high-quality software. The DropdownMenu control is a valuable asset for Flet developers, providing a powerful and versatile dropdown solution that meets the demands of modern web development. The new control is a testament to the Flet project's vision for creating a world-class web framework. The DropdownMenu control is a significant contribution to the Flet framework, enhancing its capabilities and solidifying its position as a leading web development platform. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a game-changer for Flet developers, providing a cutting-edge dropdown solution that empowers them to create truly exceptional web applications. The new control is a testament to the Flet project's ambition to push the boundaries of web development. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform. The DropdownMenu control is a powerful and versatile dropdown solution that empowers Flet developers to create exceptional web applications. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform. The DropdownMenu control is a powerful and versatile dropdown solution that empowers Flet developers to create exceptional web applications. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform. The DropdownMenu control is a powerful and versatile dropdown solution that empowers Flet developers to create exceptional web applications. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform. The DropdownMenu control is a powerful and versatile dropdown solution that empowers Flet developers to create exceptional web applications. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform. The DropdownMenu control is a powerful and versatile dropdown solution that empowers Flet developers to create exceptional web applications. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform. The DropdownMenu control is a powerful and versatile dropdown solution that empowers Flet developers to create exceptional web applications. The new control is a testament to the Flet project's commitment to excellence and innovation. The DropdownMenu control is a must-have for any Flet developer, providing a comprehensive and user-friendly dropdown solution that simplifies the development process and enhances the user experience. The new control is a testament to the Flet project's dedication to providing developers with the best possible tools and resources. The DropdownMenu control is a valuable addition to the Flet toolkit, providing a robust and flexible dropdown solution that empowers developers to create dynamic and interactive web applications. The new control is a testament to the Flet project's commitment to innovation and user-centric design. The DropdownMenu control is a significant enhancement to the Flet framework, providing a modern and intuitive dropdown solution that improves developer productivity and enhances the user experience. The new control is a testament to the Flet project's vision for creating a world-class web development platform.

Documentation:

  • Update documentation to reflect the breaking changes in the Dropdown control API and the introduction of the DropdownMenu widget as a replacement for the Flutter Dropdown widget. Include examples and explanations of the new properties and how to use them effectively. Highlight the deprecation of certain properties and their eventual removal in future versions. Provide migration guidance for users who are currently using the old API. Ensure the documentation is clear, concise, and up-to-date with the latest changes in the Flet Dropdown control API and the DropdownMenu widget. Include information about the new properties such as leading_icon, trailing_icon, style, label_content, enable_filter, enable_search, editable, max_menu_height, expanded_insets, menu_style, selected_suffix, input_filter, capitalization, selected_trailing_icon, on_change, on_focus, on_blur, bgcolor, error_style, error_text, text_align, and elevation. Explain how these properties can be used to customize the appearance and behavior of the DropdownMenu widget. Provide clear examples of how to use the DropdownMenu widget in different scenarios, such as with custom content, leading and trailing icons, and different input filters. Ensure the documentation is consistent with the overall style and tone of the Flet documentation. Review the documentation thoroughly to ensure accuracy and completeness. Update any relevant tutorials or guides that use the Dropdown control to reflect the new API and the DropdownMenu widget. Consider adding a section on accessibility guidelines for the DropdownMenu widget. Test the examples provided in the documentation to ensure they work as expected. Solicit feedback from other developers or users to ensure the documentation is clear and helpful. Keep the documentation up-to-date with any future changes or updates to the DropdownMenu widget or the Flet API. Provide a clear explanation of the benefits of using the DropdownMenu widget over the previous implementation. Highlight any performance improvements or other advantages that the new widget offers. Ensure the documentation is accessible to users of all skill levels, from beginners to experienced developers. Use clear and concise language, and avoid technical jargon whenever possible. Provide visual examples, such as screenshots or videos, to illustrate the usage of the DropdownMenu widget. Consider adding a section on troubleshooting common issues or errors that users may encounter when using the DropdownMenu widget. Provide a clear explanation of the deprecation process and the timeline for the removal of the old API. Offer alternative solutions for users who need to maintain compatibility with older versions of Flet. Ensure the documentation is well-organized and easy to navigate. Use headings, subheadings, and lists to break up the content and make it easier to scan. Provide a search function or a table of contents to help users quickly find the information they need. Consider adding a section on best practices for using the DropdownMenu widget. Provide tips and recommendations for optimizing performance and usability. Ensure the documentation is consistent with the overall branding and design of the Flet project. Use the appropriate colors, fonts, and logos. Review the documentation with a focus on clarity, accuracy, and completeness. Make sure the documentation is easy to understand and provides all the necessary information for users to effectively use the DropdownMenu widget. Consider adding a section on internationalization and localization of the DropdownMenu widget. Explain how to support different languages and locales. Provide a clear explanation of the differences between the DropdownMenu widget and other similar widgets in Flutter, such as the DropdownButton widget. Highlight the advantages and disadvantages of each widget, and provide guidance on when to use each one. Ensure the documentation is consistent with the overall documentation style guide for the Flet project. Follow the established conventions for formatting, code examples, and terminology. Review the documentation with a focus on accessibility. Make sure the documentation is usable by people with disabilities, such as those who use screen readers or have difficulty using a mouse. Consider adding a section on keyboard navigation for the DropdownMenu widget. Explain how users can interact with the widget using the keyboard. Provide a clear explanation of the different states of the DropdownMenu widget, such as enabled, disabled, focused, and error. Illustrate how the widget's appearance changes in each state. Ensure the documentation is consistent with the overall user experience of the Flet project. Provide a seamless and intuitive experience for users who are learning about or using the DropdownMenu widget. Consider adding a section on testing and debugging the DropdownMenu widget. Explain how to write unit tests and integration tests for the widget, and provide tips for debugging common issues. Provide a clear explanation of the lifecycle of the DropdownMenu widget. Explain how the widget is created, updated, and disposed of, and how these events can be handled in Flet applications. Ensure the documentation is consistent with the overall architecture of the Flet project. Explain how the DropdownMenu widget fits into the overall Flet framework, and how it interacts with other Flet components. Review the documentation with a focus on performance. Make sure the documentation provides guidance on how to optimize the performance of the DropdownMenu widget, and how to avoid common performance pitfalls. Consider adding a section on advanced usage of the DropdownMenu widget. Provide examples of how to use the widget in more complex scenarios, such as with custom filtering or asynchronous data loading. Provide a clear explanation of the security considerations for the DropdownMenu widget. Explain how to prevent common security vulnerabilities, such as cross-site scripting (XSS) attacks. Ensure the documentation is consistent with the overall security guidelines for the Flet project. Follow the established conventions for secure coding practices and data handling. Review the documentation with a focus on maintainability. Make sure the documentation is easy to update and maintain, and that it is well-structured for future enhancements. Consider adding a section on contributing to the development of the DropdownMenu widget. Explain how developers can contribute to the project, such as by submitting bug reports or pull requests. Provide a clear explanation of the licensing terms for the DropdownMenu widget. Specify the license under which the widget is distributed, and provide links to the relevant license agreements. Ensure the documentation is consistent with the overall licensing policy for the Flet project. Follow the established conventions for open-source software licensing. Review the documentation with a focus on internationalization. Make sure the documentation is available in multiple languages, and that it is culturally appropriate for different audiences. Consider adding a section on community resources for the DropdownMenu widget. Provide links to forums, chat rooms, or other online communities where users can ask questions or share information about the widget. Provide a clear explanation of the support options for the DropdownMenu widget. Explain how users can get help if they encounter problems or have questions about the widget. Ensure the documentation is consistent with the overall support policy for the Flet project. Follow the established conventions for providing technical support to users. Review the documentation with a focus on usability. Make sure the documentation is easy to use and navigate, and that it provides a positive user experience. Consider adding a section on frequently asked questions (FAQs) for the DropdownMenu widget. Provide answers to common questions that users may have about the widget. Provide a clear explanation of the version history for the DropdownMenu widget. List the different versions of the widget that have been released, and provide a summary of the changes that were made in each version. Ensure the documentation is consistent with the overall versioning policy for the Flet project. Follow the established conventions for semantic versioning. Review the documentation with a focus on consistency. Make sure the documentation is consistent in terms of style, tone, and terminology. Consider adding a section on known issues or limitations for the DropdownMenu widget. Provide a list of any known bugs or limitations that users should be aware of. Provide a clear explanation of the future roadmap for the DropdownMenu widget. Outline the planned features or enhancements that are being considered for future versions of the widget. Ensure the documentation is consistent with the overall roadmap for the Flet project. Follow the established conventions for communicating future plans and directions. Review the documentation with a focus on completeness. Make sure the documentation covers all aspects of the DropdownMenu widget, from basic usage to advanced customization. Consider adding a section on examples or use cases for the DropdownMenu widget. Provide real-world examples of how the widget can be used in different applications or scenarios. Provide a clear explanation of the performance characteristics of the DropdownMenu widget. Provide benchmarks or other performance data to illustrate the widget's performance, and provide guidance on how to optimize performance in different scenarios. Ensure the documentation is consistent with the overall performance goals for the Flet project. Follow the established conventions for measuring and reporting performance. Review the documentation with a focus on accuracy. Make sure the documentation is free of errors or inaccuracies. Consider adding a section on accessibility features for the DropdownMenu widget. Provide information on how the widget can be used by people with disabilities, such as those who use screen readers or have difficulty using a mouse. Provide a clear explanation of the internationalization support for the DropdownMenu widget. Explain how the widget can be used with different languages and locales, and provide guidance on how to localize the widget's text and other content. Ensure the documentation is consistent with the overall internationalization strategy for the Flet project. Follow the established conventions for supporting multiple languages and locales. Review the documentation with a focus on clarity. Make sure the documentation is easy to understand and free of ambiguity. Consider adding a section on customization options for the DropdownMenu widget. Provide information on how the widget's appearance and behavior can be customized, such as by changing its colors, fonts, or icons. Provide a clear explanation of the integration options for the DropdownMenu widget. Explain how the widget can be integrated with other Flet components or external libraries, and provide guidance on how to handle different integration scenarios. Ensure the documentation is consistent with the overall integration strategy for the Flet project. Follow the established conventions for integrating with other software components. Review the documentation with a focus on consistency. Make sure the documentation is consistent in terms of style, tone, and terminology. Consider adding a section on troubleshooting tips for the DropdownMenu widget. Provide guidance on how to diagnose and resolve common problems that users may encounter when using the widget. Provide a clear explanation of the error handling mechanisms for the DropdownMenu widget. Explain how errors are reported and handled by the widget, and provide guidance on how to handle different error conditions. Ensure the documentation is consistent with the overall error handling strategy for the Flet project. Follow the established conventions for handling errors and exceptions. Review the documentation with a focus on completeness. Make sure the documentation covers all aspects of the DropdownMenu widget, from basic usage to advanced customization and integration. Consider adding a section on best practices for using the DropdownMenu widget. Provide tips and recommendations for using the widget effectively, such as by optimizing performance or improving usability. Provide a clear explanation of the security best practices for the DropdownMenu widget. Provide guidance on how to prevent common security vulnerabilities, such as cross-site scripting (XSS) attacks or SQL injection attacks. Ensure the documentation is consistent with the overall security best practices for the Flet project. Follow the established conventions for secure coding practices and data handling. Review the documentation with a focus on accuracy. Make sure the documentation is free of errors or inaccuracies. Consider adding a section on performance best practices for the DropdownMenu widget. Provide guidance on how to optimize the performance of the widget, such as by minimizing the number of repaints or reducing the size of the widget's data. Provide a clear explanation of the accessibility best practices for the DropdownMenu widget. Provide guidance on how to make the widget accessible to people with disabilities, such as by providing alternative text for images or using appropriate ARIA attributes. Ensure the documentation is consistent with the overall accessibility best practices for the Flet project. Follow the established conventions for designing and developing accessible user interfaces. Review the documentation with a focus on clarity. Make sure the documentation is easy to understand and free of ambiguity.

@ndonkoHenri ndonkoHenri linked an issue Feb 15, 2025 that may be closed by this pull request
@FeodorFitsner FeodorFitsner merged commit 134b993 into main Feb 19, 2025
2 checks passed
@FeodorFitsner FeodorFitsner deleted the inesa-dropdown-menu branch February 19, 2025 03:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DropdownMenu control
2 participants