Flutter Widgets Explorer: The Charts Gallery

Happy weekend!

The charts gallery screen is taken from official example of the charts_flutter package. Full credit is given to the development team of charts_flutter.

A picture is worth a thousand words:

You can see the data visualization capability of the flutter package by running the code in emulator or simply check out the online charts gallery.

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the charts_gallery branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you! :)

Flutter Widgets Explorer: The Expansion/Collapse View

As there is always space constraints in mobile devices, expandable panel is a common widget used in mobile application. Like most developers, I tempted to look into third party flutter package such as expandable to implement such functionality.

However, my experience told me that the better way is first try to implement any functionality using Flutter built-in widgets, then only look into third party flutter packages when built-in widgets unable to deliver the desired functionalities. This approach will reduce unnecessary dependencies to third party flutter packages.

The following example taken from the article Flutter: Expansion/Collapse view, the author implemented the expandable panel using the built-in ExpansionTile and ExpansionPanelList widget:

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen above, please check out the expansion_collapse_view branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you!

Flutter Widgets Explorer: The Stock Chart

If you plan to develop a stock trading application, you definitely come across a requirement: Create the stock price chart using line chart or candlestick chart. 

The good news is I found a flutter package known as trading_chart which did exactly that. What's more? It come with built-in support of the most common stock trading technical indicators such as MACD, RSI, MA, etc. 

A picture is worth a thousand words:- 

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the stock_chart branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request. 

I'd love to hear from you and happy weekend! :) 

Flutter Widgets Explorer: The Tab Buttons

As per the developer of the buttons_tabbar flutter package mentioned in the article Flutter: TabBar With Buttons as Tabs, he created the package is to create tab bar which common in iOS application, but he was unable to find one in the default flutter implementation.

A picture is worth a thousand words:-

After I implemented the example, I found an article 5 Ways of styling Tab in Flutter. I think we might able to style the default tabs to achieve similar effect.

Hence, before you use the buttons_tabbar flutter package in your application, I think you might first try to use the default tab and change its style to fit your application requirements.

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the tab_buttons branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you whether the project is helpful to you. :)

Flutter Widgets Explorer: The Nested List

The Nested List screen allowed users view more information of a list item without leaving the current listing screen. It called "Nested List" as the detail of a list item presented as a horizontal list view in a vertical list item of dynamic height which depends on the height of the content of the list item. 

The horizontal list view is activated by pressing the arrow button on the right of the list item, then it pull more information of the list item from the back end. The screen was designed in this way to reduce data loaded from the back end when the listing screen is loaded. 

A picture is worth a thousand words:-

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the screen, please check out the nested_list branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request. 

I'd love to hear from you. :) 

Your First Flutter App: The Flutter Widgets Explorer

Happy new year 2021!

If you found a third party widget which seems good fit to your application, I think the first thing you do is create a dedicated flutter application to test out the widget and get yourself familiar with the widget before integrate it to your existing application, right? I will do the same. But there's more and more widgets I need to test out along the way, projects created test out each widget will grow quickly and become unmanageable.

I think "What if I create a project that allows me to test the new widget without creating new Flutter project? How nice if I just need to create a new dart file to test out the new widget?" Hence, the born of the Flutter Widgets Explorer project.

The Flutter Widgets Explorer project is created to learn, test and demo flutter widgets. You can show case all your widgets in one Flutter application like the following screen:

Thanks for your patient and reading till here. You are invited to fork the fluwix github repo, add your code and send me pull request. The key takeaways are you can showcase your code live in an Android app, Fluwix.com and embedded HTML (as iframe) in your blog post. We will take care the hassles of managing the deployment, production and marketing for you. If you're interested, please submit your idea of showcase.

Are you facing any problem with your Flutter development? Please answer the 3 questions Flutter Development Survey as we might have the solution to your problem. 

By the way, you can install the Fluwix (formerly Flutter Widgets Explorer) app to your android phone by clicking on the following image link:

Kindly raise an issue if you have any problem running the Fluwix on your mobile or web.

If you are interested to reuse the source code of the project, first go through the introduction of the project. The source code of the project is hosted in Github at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

I'd love to hear from you whether it is helpful to you. :)