Flutter Widget Guide — Table Widget in 5 mins or less.
This is Part 10 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
Flutter provides us with a lot of different ways of arranging widgets on a screen. The most important task for us as developers is to arrange them in a systematic manner. You might face a situation where you would want to create a grid of widgets with varying (or same) size. The grid arrangement is quite typical to make on your own and you’ll have to keep in mind a lot of parameters like relative positions of widgets etc. You’ll have to create a lot of custom sized rows and columns to make it work.
Flutter has a solution to this problem.
Table Widget
1 | What?
This widget will help you arrange your widgets of varying or same size in a grid fashion. You simply need to create a Table widget and add TableRow widgets to it. You can control parameters like border and columnWidth. The Table widget will resize its Row according to the size of children provided to the TableRow widget. You can set a vertical alignment property to the Table widget to specify how the widgets (Row cells) are aligned vertically.
2 | Wondering how it works?
Have a look at the Code snippet below.
Below is the visual representation of the code above.
3 | Explanation
In the above code snippet I have created a Table with two rows. Both the rows have three children. You’ll notice how the TableRow expands vertically to adjust all its children properly. You can choose to center the cell elements in the row by changing defaultVerticalAlignment property of the Table widget. Currently it is set to TableCellVerticalAlignment.top in the above example. You can decide to add a border in the Table widget as well. Click on the option at the upper right corner to toggle between the two states. Table view is just like a GridView but it doesn’t scroll.
Previous 👆
Up next 👇
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.
See more in the series:
Have a wonderful day 🙂
