Flutter File Upload

Are you in search of the perfect file upload widget to meet your specific requirements? Look no further! Introducing the File Upload module, a solution born out of the need for a versatile and tailored file uploading tool. 

A picture is worth a thousand words:

The File Upload module offers support for various file upload statuses, ensuring a seamless experience:

• pending: Files are in a queue, waiting for upload.
• uploading: Files are currently in the process of being uploaded, with an option to cancel using the (x) button in the top right corner.
• processing: Uploaded files are actively being processed on the server.
• completed: Files have been uploaded and processed successfully.
• failed: Unfortunately, some file uploads may not succeed.
• cancelled: File uploading have been cancelled by the user.

You can see the following showcase live powered by Fluwix.com:-

Many open-source file upload solutions provide only frontend components, leaving a gap in the backend integration. We've bridged that gap with a robust backend API developed using Python FastAPI, hosted on AWS Lambda.

Explore the backend source code at serverless-file-upload repository to seamlessly integrate the File Upload module into your projects.

We welcome your insights and contributions to enhance the backend API implementation for file uploads. If you have alternative approaches or know of other backend API implementations that excel in this context, your input would be greatly appreciated. Your valuable suggestions can help us continually improve and refine our implementation. 

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 add your idea of showcase.

Are you facing any problem with your Flutter development? Kindly share your Flutter problem to us, we might have the solution to your problem. 

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 file_upload branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hear from you soon! :)

Flutter Chatbot UI

The Chatbot UI showcase reuses the code from hadikachmar3/ChatGPT_flutter_course and interacts with an Echo chatbot instead of the OpenAI API. When you send a message to the chatbot, it will simply echo it back to you.

The idea is to have a generic chatbot UI that can be used for any chatbot or chat-based application.

You can see the following showcase live powered by Fluwix.com:-

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 add your idea of showcase.

Are you facing any problem with your Flutter development? Kindly share your Flutter problem to us, we might have the solution to your problem. 

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 chatbot_ui branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hear from you soon! :)

Closing The Gap

This is my personal story in the journey from Java back-end development to Flutter and Ethereum Decentralized Applications (DApps) development. I wrote this post to capture my thoughts and experiences so far for ease of reference in the future. 

If you come across my previous blog post of titled "The end is just a new beginning", you will notice that in 2013 to 2014, I am on full-stack development, and start from 2015 I am solely focus on back-end development. I intend to closing the knowledge gap of front-end development since last year and I chose Flutter. 

Before I start my journey for Flutter development, I would like to sum up my experiences in back-end APIs development besides the common Restful APIs, hence I published a blog post titled "Standard query language for your Web API, why GraphQL and OData?". The blog post described the reasoning of using GraphQL API and OData API with code examples.

Flutter

In the early 2021, I created a Flutter App known as Flutter Widgets Explorer to learn about Flutter widgets, so that I don't need to create a new Flutter project each time I want to learn about an interesting Flutter package I come across in pub.dev such as the Flutter Charting library. 

As per any software project, the project is growing. It first being published to Google Play Store as mobile apps. then running as web apps in Fluwix.com and lastly Flutter Widgets Explorer mobile apps re-branded as Fluwix. Now the Fluwix is a Flutter showcases platform on the mobile apps and web. I also promote Fluwix via social media channels, so far the traffic is low. 

I published the following prominent blog posts relevant to Flutter besides those showcases related:

• Flutter Multi-modules Support
• Flutter Navigation: flutter_modular or stacked?
• Free Code Audit For Flutter Project
• Flutter App Architecture: flutter_bloc or flutter_clean_architecture?

The Fluwix platform is solely front-end application at the moment, I did think about adding back-end features few months ago, you can find out more from this github issue. Should I use the traditional back-end stack I know well such as Micronaut or Spring Boot or brand new Web3 Decentralized Applications (DApps) stack such as Ethereum blockchain?

Blockchain Technology

After closing the gap, I'm back to back-end technology again namely Blockchain. First, I took the Udemy's Blockchain A-Z™: Learn How To Build Your First Blockchain course. Thanks to the clear explanation from the instructor, I have good grasp of intuitions on Blockchain, Cryptocurrency and Smart Contract. 

After completed the course, I start exploring the Blockchain space by look beyond the obvious choice for DApps development: Ethereum. Substrate, a Rust-based framework to build your own blockchain by Polkadot catched my interest. In a short time, I find out that to get into Substrate, the prerequisites are knowledge of Rust programming language and Web Assembly. I took the Udemy's The Rust Programming Language course and completed the tutorial in Rust and WebAssembly book, then the Build a Bitcoin-like Blockchain with Substrate - Beginner Friendly YouTube video series. After completed the video 3 of 5 of the YouTube series, I realized that I jumped the gun, I'm a bit too far from DApps development. The Substrate framework is great for building your own blockhain a layer below the DApps instead of DApps itself.

After a big trip to Rust and Substrate, I turn my attention to the obvious choice: Ethereum, I pick up the Learn Ethereum book and code along with it. Currently I am at 50% of the book, so far so good. You might interested to follow some of my github repositories:

• eth-erc721-marketplace: Ethereum Digital Art Marketplace (ERC-721)
  
• fluwix-token: Fluwix Token (ERC-20)
  
• eth-todo: Ethereum Todo Smart Contract
  
• substrate-utxo-workshop: Build a Bitcoin-like Blockchain with Substrate
  
• wasm-game-of-life: Conway's Game of Life with Rust and Web Assembly
  
• eth-dapps-nextjs-boiletplate: Ethereum dApps Next.js Boiletplate
  

Conclusion

At this juncture, I can decide to build Fluwix as DApps over the Ethereum blockchain network. You can expect me to write more about this topic in the future. Lastly, a lesson learned "Sometimes it is far easier to stay with the obvious choice" even the exposure to Rust and Web Assembly is not totally wasted.

Thanks for reading. I hope you get something out of my experiences. :)

Free Code Audit For Flutter Project

When you see the title you must think that this is a click bait, otherwise it is too good to be true, right? Is there any catch? It is Better Code Initiative run by me to raise the awareness on code quality matters among stakeholders of computerized systems/apps and IT projects, not just developers. 

It is inspired by a conversation between a Flutter developer and I on the subject of code quality as in my opinion "Most businesses don't care about code quality until their application or system crashed in the production environment". I hope you prove me wrong if you are a business stakeholder who is reading the article. By the way, if you care about code quality, your engineering team members will put priority on the quality of codes they wrote, which in turn will improve the overall health and robustness of your application or system.

You can adopt the best practices of writing code used internally at Google for free with 3 steps:

1. Add the pedantic package to the dev_dependencies of the pubspec.yaml file of your Flutter project before you write the first line of code, for example pedantic: ^1.11.0 at the time of writing.
2.  Add a analysis_options.yaml file to the root directory of your Flutter project with the following line: include: package:pedantic/analysis_options.yaml
3. Your IDE such as Visual Studio Code will report the code issues automatically or you can see the list of code issues by execute the flutter analyze in the command line.

If you still not sure how to do it, you can check out the offer I will audit the code quality of your flutter projects for free at Fiverr. I will generate a report for your Flutter project including: 

• Summary of number of code analysis/linting issues and null safety issues
• List of code analysis/linting issues and null safety issues
• Cost of fixing the issues reported

You can see the sample report below:

If you need helping hands to fix the coding issues and improving the code quality of your Flutter project, please feel free to contact me.

Hear from you soon! :)

FlutterQuill: A rich text editor for Flutter

The Rich Text Editor showcase the example of the flutter_quill package created by Xin Yao from BulletJournal.us. In my opinion, the package is the best Rich Text Editor for Flutter, please let me know if you found a better one.

You can see the following showcase live powered by Fluwix.com:-

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 add your idea of showcase.

Are you facing any problem with your Flutter development? Kindly share your Flutter problem to us, we might have the solution to your problem. 

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 rich_text_editor branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hear from you soon! :)

The Fluwix Go Social!

I'm glad to inform you that I created a Facebook Page for Fluwix at https://www.facebook.com/fluwixfb. Feel free to like, share and follow the page.

Also, a Telegram Group created at https://t.me/fluwix_chat

Let's connect and chat!

Expandable Floating Search Bar

The Search Bar showcase the example of the material_floating_search_bar package using the code shared by ResoCoder. The package simplify the creation of expandable floating search bar similar to the one Google used in their own apps.

You can see the following showcase live powered by Fluwix.com:-

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 add your idea of showcase.

Are you facing any problem with your Flutter development? Kindly share your Flutter problem to us, we might have the solution to your problem. 

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 search_bar branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hope to hear from you. :)

Create Native Settings for Flutter App in minutes

The Settings UI showcase the example of the settings_ui package created by Yako.io. The package simplify the creation of Settings screen.

You can see the following showcase live powered by Fluwix.com:-

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 add 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 settings_ui_showcase branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hope to hear from you. :)

Fluwix: The Neumorphism Design

The Neumorphism Design showcase the example of the flutter_neumorphic package created by Idean.com. There are 6 categories of showcase such as Neumorphic Playground, Text Playground, Samples, Widgets, Tips and Accessibility.

You can see the following showcase live powered by Fluwix.com:-

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 neumorphism_design branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Lastly, Flutter Widgets Explorer now re-branded to Fluwix, so that the mobile apps and web is under one brand.

Hope to hear from you. :)

Flutter Widgets Explorer now Fluwix

I'm glad to inform you that Flutter Widgets Explorer is rebranded to Fluwix. Start from now the mobile apps and the web app under one brand name.

 

I think the experience of manage the re-branding process is worth sharing here besides the announcement. First of all, if you change the applicationId of the android app, you're actually publish a new app instead of update the existing one in the Google Play Store. Hence, you need a proper way to phase out the existing app and inform user the new app. I'm adopted the following process:

1. Making all the necessary changes for app re-branding and publish the new app to Google Play Store. 

2. Once the new app is ready to be installed by users, update the existing app to inform users to install the new app. I'm using alert dialog, please refer to the following screen: 

3. After user click the "Install Now" button, it will bring the user to the Google Play Store screen to install the app.

Please let's me know if you have better way to manage the re-branding process.

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 retiring branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Hope to hear from you!

Fluwix: The Glassmorphism Design

The Glassmorphism Design showcase an example of the glassmorphism package created by Ritick Saha.

The package simplified the creation of Glassmorphic container. I not sure why the package's owner make the width and height properties of the GlassmorphicContainer class required. It is harder to make a widget responsive if you need to specify the height and width of the widget.

You can see the following showcase live powered by Fluwix.com:-

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 glassmorphism_design branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Lastly, Flutter Widgets Explorer is still in the progress of re-branding to Fluwix, so that the mobile apps and web is under one brand name.

I'd love to hear from you. :)

Fluwix: The Percent Indicator

The Percent Indicator display animated progress widgets based on percentage, can be Circular or Linear, you can also customize it to your needs.. It was created by Diego Velásquez. 

You can see the following showcase live powered by Fluwix.com:-

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 percent_indicator_showcase branch of the git repository hosted at https://github.com/limcheekin/fluwix. Feel free to fork the repository and send me pull request.

Lastly, Flutter Widgets Explorer is in the progress of re-branding to Fluwix, so that the mobile apps and web is under one brand name.

I'd love to hear from you. :)