Refactoring widget trees to improve legibility

There is a delightfully sardonic anti-pattern in coding known as the pyramid of doom. This pattern describes code that is excessively nested (such as 10+ nested if statements and control flow loops). You end up getting code that, when you look at it from a distance, resembles a pyramid. Pyramid-like code is highly bug-prone. It is hard to read and, more importantly, hard to maintain.

Widget trees are not immune to this deadly pyramid; in fact, quite the opposite. In this chapter, we've tried to keep our widget trees fairly shallow, but none of the examples so far is really indicative of production code—they are simplified scenarios to explain the fundamentals of Flutter. The tree only grows deeper from here.

To fight the pyramid of doom, we're going to use a weapon known as refactoring. This is a process of taking code that is not written ideally and updating the code without changing its functionality. We can take our n...

Applying global themes

Consistency is at the heart of any good design. Every screen in your app should look as if it were designed as a single unit. Your font selections, color palettes, and even text padding are all part of your app's identity. When users look at your app, branding consistency is critical for recognition. Apple products look like Apple products, with their white backgrounds and sleek curves. Google's Material Design is a colorful splash of primary shapes and shadows.

To make all their products look like they belong to the same design system, these companies use detailed documents that explicitly describe the schematics of how UIs should be designed. On a programmatic side, we have themes. These are widgets that live at the top of the tree and influence all of their children. You don't need to declare styling for every single widget. You just need to make sure that it respects the theme.

In this recipe, we will take the e-commerce mock-up screen and simplify...

Proportional spacing with the Flexible and Expanded widgets

Today, almost every device has a different height and width. Some devices also have a notch at the top of the screen that insets into the available screen space. In short, you cannot assume that your app will look the same on every screen——your user interfaces have to be flexible.

In this recipe, we will demonstrate two ways to develop proportional widgets: Flexible and Expanded widgets.

Getting ready

You should have completed the project in the previous recipe before starting this one.

Create a new Dart file called flex_screen.dart and create the requisite StatelessWidget subclass called FlexScreen. Also, just like the last recipe, replace the home property in main.dart with FlexScreen.

How to do it...

Before we can show off Expanded and Flexible, we need to create a simple helper widget:

1. Create a new file, called labeled_container.dart, and import material.dart.
...

Drawing shapes with CustomPaint

So far, we’ve been limiting ourselves to very boxy shapes. Rows, Columns, Stacks, SizedBoxes and Containers are just boxes. Boxes will cover the majority of UIs that you would want to create, but sometimes you may need to break free from the tyranny of the quadrilateral.

Enter CustomPaint. Flutter has a full-featured vector drawing engine that allows you to draw pretty much whatever you want. You can then reuse these shapes in your widget tree to make your app stand out from the crowd.

In this recipe, we will be creating a star rating widget to see what CustomPaint is capable of.

Getting ready

This recipe will update the ProfileScreen widget that was created in the Placing widgets one after another recipe in this chapter. Make sure that in main.dart, ProfileScreen() is set in the home property.

Also, create a new file called star.dart in the lib directory and set up a StatelessWidget subclass called Star.

How to do it...

Nesting complex widget trees

The speed of making changes significantly impacts the effectiveness of any given platform. Hot reload helps with this exponentially. Being able to quickly edit properties on a widget, hit Save, and almost instantly see your results without losing state is wonderful. This feature enables you to experiment.

It also allows you to make mistakes and quickly undo them without wasting precious compile time.

But there is one area where Flutter’s nested syntax can slow your progress. Throughout this chapter, we have used the phrase wrap in a widget frequently. This implies that you are going to take an existing widget and make it the child of a new widget, essentially pushing it one level down the tree. This can be error-prone if done manually, but thankfully, the Flutter tools help you manipulate your widget trees with speed and effectiveness.

In this recipe, you are going to explore the IDE tools that will allow you to build deep trees without...

Refactoring widget trees to improve legibility

There is a delightfully sardonic anti-pattern in coding known as the pyramid of doom. This pattern describes code that is excessively nested (such as 10+ nested if statements and control flow loops). You end up getting code that, when you look at it from a distance, resembles a pyramid. Pyramid-like code is highly bug-prone. It is hard to read and, more importantly, hard to maintain.

Widget trees are not immune to this deadly pyramid; in fact, quite the opposite. In this chapter, we’ve tried to keep our widget trees fairly shallow, but none of the examples so far are really indicative of production code—they are simplified scenarios to explain the fundamentals of Flutter. The tree only grows deeper from here.

To fight the pyramid of doom, we’re going to use a weapon known as refactoring. This is a process of taking code that is not written ideally and updating the code without changing its functionality. We...

Applying global themes

Consistency is at the heart of any good design. Every screen in your app should look as if it were designed as a single unit. Your font selections, color palettes, and even text padding are all part of your app’s identity. When users look at your app, branding consistency is critical for recognition. Apple products look like Apple products, with their white backgrounds and sleek curves. Google’s Material Design is a colorful splash of primary shapes and shadows.

To make all their products look like they belong to the same design system, these companies use detailed documents that explicitly describe the schematics of how UIs should be designed. On the programmatic side, we have themes. These are widgets that live at the top of the tree and influence all of their children. You don’t need to declare styling for every single widget. You just need to make sure that it respects the theme.

In this recipe, we will take the e-commerce mock...

Summary

In this chapter, you have seen several ways to manage your widget trees:

• You have used Row and Column widgets to place their content in a linear way, and seen an introduction to proportional spacing between widgets with the use of Flexible and Expanded widgets.
• You have used a CustomPaint widget to draw custom shapes: in the code example, you have designed stars that can be used to show ratings for products or any other content.
• You have seen how to break up complex layouts into smaller, reusable widgets, and used refactoring techniques to simplify widget trees and improve maintainability and performance.
• Finally, we have covered the use of global themes to apply a consistent visual style to a Flutter app, and how to use the Theme widget to define properties that can be inherited by child widgets.
• One of the key takeaways from this chapter is the importance of creating reusable widgets and breaking up complex layouts into smaller, more manageable...