Expanded vs Flexible: Flutter

Do you know that Expanded is also Flexible ??

Photo by Ben White on Unsplash

Yes, you heard it right. Expanded is nothing but an extended class of Flexible.

Expanded class in the flutter

Now that we know a jawbreaking fact, let’s see the similarities between Expanded and Flexible?

Look at both codes. Both results in the same result.

Example of expanded and flexible
Result
Result of expanded and flexible [Same result]

If you look closely at the code, we can easily spot that one container is placed inside of expanded and flexible in both respectively.

But, both produce the exact same result.

So, we can say that sometimes both produce the same results.

[Both results are same that’s why only one image is shown.]

It was very surprising to see similar results for both. Now, let’s change our container by adding the height parameter in it and see the change.

Look at both codes. Both results are different.

Example of flexible and expanded
Result of flexible and expanded

If we look closely at the above codes, we can see only one change and that is we added ` height:100` in the container (inside of expanded & flexible). But this small change gave us different results.

So, if the child in flexible knows its height (in Column and width in Row) then it will take the mentioned height. But if the height is not mentioned then it will take the remaining height and it will act like an expanded widget.

And expanded widget will always take remaining height (or width).

Thanks for reading.

Connect me on Twitter: Vivek Yadav(@viveky259259)

Find open source contents on Github

Connect with me: Github LinkedIn Instagram Patreon

#HappyCoding #flutter #widgets #crossplatform #tutorial #channel #viveky259 #viveky259259 #procoach

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.


Expanded vs Flexible: Flutter was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Vivek Yadav

Do you know that Expanded is also Flexible ??

Photo by Ben White on Unsplash

Yes, you heard it right. Expanded is nothing but an extended class of Flexible.

Expanded class in the flutter

Now that we know a jawbreaking fact, let’s see the similarities between Expanded and Flexible?

Look at both codes. Both results in the same result.

Example of expanded and flexible
Result
Result of expanded and flexible [Same result]

If you look closely at the code, we can easily spot that one container is placed inside of expanded and flexible in both respectively.

But, both produce the exact same result.

So, we can say that sometimes both produce the same results.

[Both results are same that’s why only one image is shown.]

It was very surprising to see similar results for both. Now, let's change our container by adding the height parameter in it and see the change.

Look at both codes. Both results are different.

Example of flexible and expanded
Result of flexible and expanded

If we look closely at the above codes, we can see only one change and that is we added ` height:100` in the container (inside of expanded & flexible). But this small change gave us different results.

So, if the child in flexible knows its height (in Column and width in Row) then it will take the mentioned height. But if the height is not mentioned then it will take the remaining height and it will act like an expanded widget.

And expanded widget will always take remaining height (or width).

Thanks for reading.

Connect me on Twitter: Vivek Yadav(@viveky259259)

Find open source contents on Github

Connect with me: Github LinkedIn Instagram Patreon

#HappyCoding #flutter #widgets #crossplatform #tutorial #channel #viveky259 #viveky259259 #procoach

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.


Expanded vs Flexible: Flutter was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Vivek Yadav


Print Share Comment Cite Upload Translate Updates
APA

Vivek Yadav | Sciencx (2021-03-23T16:15:53+00:00) Expanded vs Flexible: Flutter. Retrieved from https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/

MLA
" » Expanded vs Flexible: Flutter." Vivek Yadav | Sciencx - Tuesday March 23, 2021, https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/
HARVARD
Vivek Yadav | Sciencx Tuesday March 23, 2021 » Expanded vs Flexible: Flutter., viewed ,<https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/>
VANCOUVER
Vivek Yadav | Sciencx - » Expanded vs Flexible: Flutter. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/
CHICAGO
" » Expanded vs Flexible: Flutter." Vivek Yadav | Sciencx - Accessed . https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/
IEEE
" » Expanded vs Flexible: Flutter." Vivek Yadav | Sciencx [Online]. Available: https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/. [Accessed: ]
rf:citation
» Expanded vs Flexible: Flutter | Vivek Yadav | Sciencx | https://www.scien.cx/2021/03/23/expanded-vs-flexible-flutter/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.