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

Refactor helper functions #737

Open
6 of 8 tasks
jlcrodrigues opened this issue Mar 1, 2023 · 0 comments
Open
6 of 8 tasks

Refactor helper functions #737

jlcrodrigues opened this issue Mar 1, 2023 · 0 comments

Comments

@jlcrodrigues
Copy link
Contributor

jlcrodrigues commented Mar 1, 2023

Remove helper functions as described below.

Checklist

Uni Code Guidelines

Helper functions

It's common having to separate widgets inside a build() method.
Imagine you are building a card and want to include your very own button.
In order to separate concerns, you want to write the code for this button elsewhere, so as to simplify the Card's build method.
This can be done one of two ways: creating a helper function and creating a class (better).

Helper function

Many times we take this shortcut as it is faster to implement.
This is used all over the application.
However, it brings a set of problems, namely impacting performance:

  • If the user triggers a re-draw of your button, this will imply re-drawing the whole widget. As you can imagine, this will become costly for larger widgets.
class MyCard extends StatelessWidget {
    const MyCard({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Container(
            child: createButton(context),
        );
    }

    Widget createButton(context) {
        // Button is created here
    }

Class Widgets

What we should strive to do is create sub components inside their own separate classes.
This will improve performance, sparing CPU utilization. Moreover, class widgets become easier to test and more accurate.

class MyCard extends StatelessWidget {
    const MyCard({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Container(
            child: MyButton(),
        );
    }

class MyButton extends StatelessWidget {
    const MyButton({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        // Button is created here
    }

If you have any doubts refer to this video by the Flutter team.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: 📋 Product Backlog
Development

No branches or pull requests

1 participant