Blueprint for the Flutter Exploration series

Now there is a new addition to the Annals of Flutter, a crucial module for Flutter exploration: layout. The creation process of the five books is also my in-depth exploration of Flutter framework. Experienced a lot of difficulties, but also got a lot of harvest.

  • Exploration of Flutter layout:Exploration of Flutter Layout – Legend of Light
  • Painting module : The Guide to Drawing Flutter – A Wonderful Book
  • Gestures module: The Exploration of Flutter Gestures – The Whole World
  • Animation module :Flutter Animation Exploration – Streamer Phantom
  • Flutter slip exploration:The Quest for Flutter Sliding – Better Fit

I thought I had written a book called “Magic Brush Flower” just for fun, but I didn’t expect it to develop to the present situation step by step. Up to now, the publication of five volumes has outlined the rudiments of a deeper understanding of Flutter and laid a solid foundation for a comprehensive understanding of Flutter. Finally, the most difficult and the most simple two most difficult parts to write, you can complete the seven swords together.

The ideological primer on Flutter for people without programming background —- The foundation of Flutter language – where dreams begin; An exploration of how the Frame layer of the Flutter world works —- The Flutter rendering mechanism – Little bits add up. When you finish reading the book of rendering mechanics, and then go back to the place where the dream started, you will feel the growth along the way, and the beauty of the original immature, this cycle is even what I want to build.


On the surface, the seven swords reveal the secrets of the Flutter world, but in essence, they embody the spirit of exploration, the process of thinking and the embodiment of unknown challenges. No one can recognize the principle at first glance, but through debugging, through analysis, combing bit by bit, we can always clear away the clouds and look at the whole world from a higher realm. Others can teach you knowledge, but the realm is your own knowledge of the world, only depends on your thoughts.

I don’t like to preach, and what other people do doesn’t really matter to me. The world is so big, there will always be poor people who are self-corrupted, there will always be ignorant and fearless bars, there will always be proud of the beautiful children, there will always be stubborn, there will always be lazy to eat but also want to climb the sky, there will always be forced to survive under the oppression of passers-by.

I can’t stand in other people’s environment to understand their thinking, so I don’t want to point out anyone’s way of life. For example, if you are a musician and you know the charm of music, you want everyone to learn music theory, understand music, and become musicians. Little do they know that not everyone can live in elegance. Some people struggle to survive, when he is tired, rather than let him learn music theory, it is better to play a song for him, to ease the tension of the mind.

Trying to impose what you think is beautiful on others is dangerous. Can not stand in the living environment of others, is “why not eat meat?” The true embodiment of. Therefore, I cannot force everyone to explore the source code and have a deep understanding of Flutter. While it’s best to understand the principles, like meat is good to eat, not everyone can eat them.

What I can do is try my best to build a bridge across this sea. Whether you walk or not, whether you want to open up your own path on the road I pointed out, is your own freedom. As for why I do all this, it is to sing a song to the travelers on the path of Flutter.


Two, layout brochure introduction

The importance of layout is self-evident. If the interface is compared to building a house, layout is reinforced cement, which is the foundation of the interface. If the interface is compared to the battlefield, the layout is the mobilization of troops, to present a specific formation. There are three key points at the heart of this book’s exploration of the layout of Flutter:

1. I need to control how big [my area] is -- Size 2. I need to limit the range of the [sub-constraints] - BoxConstraints 3. I need to determine the [sub-region] Offset - OffsetCopy the code

For layouts, this is explicitly a matter of the Widgets layer, but behind the scenes component layout features are essentially determined by the rendered objects. A component is just a property porter. To a certain extent, the understanding of the layout process in the source code can also be viewed from a higher perspective through the appearance of widgets to see the function of the rendered objects, thus gaining a deeper understanding of the Flutter framework.


Iii. Brief introduction to the contents of this volume

Module 1: Let everyone perceive the existence of box constraints and recognize the characteristics of layout. This part is a relatively easy introduction, combining some cases, explaining the seemingly unreasonable size phenomenon from the perspective of box constraints, and having a basic understanding of layout structure.

Module 2: A preliminary understanding of common layout components features and exercises. This section will select commonly used layout components, analyze their layout characteristics from the interpretation of attributes, and finally conduct drills with several cases.

Module 3: Explore component layout features from a source code perspective. Here comes the second half of the hardcore chapter. Through the analysis of the source code of the layout component, the realization of the internal constraint transfer, size determination and offset setting of each layout component is fundamentally understood.

Module 4: Custom layout components and summary. This section will show you how to customize a layout with CustomSingleChildLayout, CustomMultiChildLayout, Flow components, and how to implement a floating layer with the Overlay component. By learning this part of Flutter, you will be able to control the layout more freely than just the layout components that Flutter provides. Finally, a summary of this book will be made.

Finally: due to the limitations of pure manual code words and cognition, if there are any mistakes, questions, wrong words or modification suggestions in the content of this book, you can correct them in the comment area, or directly contact me to discuss ~


I have learned a lot from my exploration of the source code of Flutter layout. I also hope that what I see in my eyes can be conveyed to more people through this small volume, so that you can also stand on the layout system to experience the charm of the Flutter world. Thank you for your continued support