limcheekin/fluwix

Fluwix: A Flutter showcase platform on the mobile apps and web.

Fluwix (formerly Flutter Widgets Explorer)

The Fluwix is a Flutter showcases platform on the mobile apps and web.

Alternatively, you can see it on the web at fluwix.com.

Getting Started

The first screen launched in the app is a list of showcases. After select a showcase, the selected showcase details will show on next screen.

Each showcase will be coded in it's own branch and module, can have it's own readme or license file, please see Steps To Add Your Showcase for more information.

Branches:

base: Basic skeleton of the Fluwix project. If you would like to create similar project, you can start here!	nested_list: Nested horizontal list with dynamic content in vertical list items.	tab_buttons: tabbar where each tab indicator is a toggle button.
stock_chart: Stock candlestick or line chart with indicators support.	expansion_collapse_view: Expansion/Collapse view using Flutter built-in widgets.	charts_gallery: Charts Gallery show case the data visualization capability of the charts_flutter package.
chart_data_table: Real world quarterly results in combo chart and tabular format.	syntax_view: View code, copy and paste.	animated_icons: Animate any two icons.
url_launcher_showcase: Launch a URL to browse website, make phone call, send Email or SMS.	markdown_view: Display Markdown file from Github repository.	shimmer_effect: Better way to show loading status.
about_dialog: About the application and licenses.	source_code_view: Share your source code of Github public repository.	showcase_view: Showcase your widget with read me, codes and license.
material_design_showcase: Showcase Material Design components.	percent_indicator_showcase: Showcase Circular and Linear percent indicators.	glassmorphism_design: Simplify the creation of Glassmorphic Container.
neumorphism_design: A complete, ready to use, Neumorphic UI kit.	settings_ui_showcase: Create native settings for Flutter app in minutes.	search_bar: An expandable floating search bar similar to the one Google used in their own apps.
rich_text_editor: FlutterQuill: A rich text editor for Flutter.	number_trivia: Flutter App Architecture with flutter_bloc or flutter_clean_architecture.

General References

• Lab: Write your first Flutter app
• Cookbook: Useful Flutter samples
• Online documentation
• flutter-examples: An ultimate cheatbook of curated designs
• TodoMVC for Flutter
• Open Source Flutter Apps
• Flutter Samples by the Flutter Team
• Flutter Gems - A Curated Package Guide for Flutter
• Flutter Layouts Demo
• Flutter Community Plus Plugins

fluwix's Issues

ScrollController attached to multiple scroll views

In the showcase_view module, the following exception caused by Scrollbar widget in web platform:
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49 throw
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3 assertFailed
packages/flutter/src/widgets/scroll_controller.dart 109:33 get position
packages/flutter/src/widgets/scrollbar.dart 862:25
packages/flutter/src/scheduler/binding.dart 1144:15 [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1090:9 handleDrawFrame
packages/flutter/src/scheduler/binding.dart 998:5 [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 896:13 invoke
lib/_engine/engine/platform_dispatcher.dart 145:5 invokeOnDrawFrame
lib/_engine/engine.dart 259:45

Toggle Fullscreen mode

https://flutteragency.com/make-fullscreen-flutter-application/
https://pub.dev/packages/fullscreen
https://medium.com/@petehouston/make-fullscreen-image-in-flutter-cde0461c61ee
https://github.com/JohannesMilke/statusbar_visibility_example
https://liewjuntung.medium.com/use-javascript-in-flutter-web-a6eed3efb9a0
https://www.fluwix.com/embed.html

Spin off copy_button

Publish copy_button as public package to pub.dev to get better understanding of the package publishing process, documentation and other details.

Integrate firebase_analytics

https://firebase.flutter.dev/docs/analytics/overview/
https://pub.dev/packages/firebase_analytics 
https://medium.com/flutterdevs/firebase-analytics-2044e865efc4
https://stackoverflow.com/questions/59409441/flutter-web-is-it-firebase-analytics-support-in-flutter-web-application

Inverse main listing: Newest showcase on the top

flutter_quill showcase

https://github.com/singerdmx/flutter-quill

UI Redesign

Showcasess > 40 or Downloads > 1,000
https://drive.google.com/drive/folders/1-DVB9KO6q5KDLzMZbeQDkcsljz1KrAdw?usp=sharing
https://github.com/material-components/material-components-flutter-adaptive
https://github.com/JohannesMilke/collapsible_navigation_drawer_example
https://medium.com/flutterdevs/adaptive-apps-in-flutter-c9e8e457835c
https://github.com/ravi84184/flutter_hr_management_design (https://youtu.be/kFCuWVE6saY)

Update module_starter _screen.dart file generation

1. Generate github settings (owner, repository, branch) and codePaths using flutter-widgets-explorer by default
2. Add comments for example that hosted in own repo especially for readme & license file. Refer to material_design_showcase module

Better Logging

https://www.filledstacks.com/tag/Logging/
https://www.youtube.com/watch?v=pab8ZamcrIo

Remove hash (#) from URL in Flutter web

https://stackoverflow.com/questions/59870357/how-to-remove-hash-from-url-in-flutter-web/65709246#65709246

Add "Embed" option in Share feature

https://github.com/limcheekin/flutter-widgets-explorer/blob/main/web/embed.html

Create module_starter by refer to app_starter

https://github.com/ThomasEcalle/app_starter/blob/master/lib/src/command_runner.dart
To assist module creation and module migration

SEO for Flutter Web

https://www.quora.com/How-is-the-Flutter-web-good-with-SEO
flutter/flutter#46789
https://dev.to/muyunyun/seo-practice-in-spa-site-3mli

Consider add a blog to Fluwix.com

Enabled back button using query params for embed html

https://www.filledstacks.com/post/flutter-web-advanced-navigation/

Add "Open in Web" feature in mobile app

For Wide Layout, add icon to tabs

https://o7planning.org/12865/flutter-tabbar

TabBar(
  tabs: [
    Row (children: [Icon(Icons.directions_car), SizedBox(width:5), Text("Car")]),
    Row (children: [Icon(Icons.directions_transit), SizedBox(width:5), Text("Transit")]),
    Row (children: [Icon(Icons.directions_bike), SizedBox(width:5), Text("Bike")]),
  ],
  labelColor: Colors.white,
  unselectedLabelColor: Colors.cyanAccent,
);

Neumorphic Design Showcase

https://pub.dev/packages/flutter_neumorphic
https://itnext.io/enhance-your-design-of-neumorphism-in-flutter-with-inset-shadows-1228a3fe4377
https://tonyowen.medium.com/neumorphism-in-flutter-f46fe25bf9d4 

Add loading spinner to Flutter Web

https://itnext.io/fix-flutter-web-loading-time-with-a-loading-spinner-c5dd36a29f5b

Migrate to sound null safety

First check whether our app and the dependencies are ready to be migrated or not with the following command:

flutter pub outdated --mode=null-safety

If all dependencies are sound null safety, refer to the following article for next migration steps:
https://joshuawellbrock.medium.com/migrate-an-existing-flutter-app-to-flutter-2-0-74ce010eb013

Add padding to license_view.dart

Offline First with Todo Notes

https://hasura.io/blog/design-guide-to-offline-first-apps/
https://pub.dev/packages/flutter_data

Basic adaptive layout support

By refer to videos of The Boring Flutter Development Show at https://flutter.dev/docs/development/ui/layout/adaptive-responsive.

It is pre-requisite for web support.

Reduce App Size

https://itnext.io/reducing-flutter-app-size-570db9810ebb
https://dev.to/smazeestudio/reducing-flutter-app-size-1p0k

Dark/Light Theme Switching

https://medium.com/flutter-community/flutter-design-make-your-theme-homogeneous-13ddeffb186f
https://flutter.dev/docs/cookbook/design/themes
https://resocoder.com/2019/08/09/switch-themes-with-flutter-bloc-dynamic-theming-tutorial-dark-light-theme/
https://www.filledstacks.com/post/multiple-themes-in-flutter-dark-and-light-theme-flutter-stacked/
https://medium.com/swlh/flutter-dynamic-themes-in-3-lines-c3b375f292e3
https://youtu.be/MnTEHs-ZP0E
https://youtu.be/XdUMp9k5JCI
https://youtu.be/HSAa9yi0OMA 

Add Showcase Screen

The showcase screen will have 4 tabs:

1. Showcase
2. Readme
3. Code
4. License

With the following features:

• tabScrollable = true/false, default to true
• Toggle Full Screen
• Toggle Orientation

Update App in the App

https://medium.com/swlh/update-app-flutter-402c528235e4 

Add backend for user management and favorite

• sign up - user registration
  • Spring Boot JWT https://www.youtube.com/playlist?list=PLeFUpOmPweSggaTrntYcExlf0JSA20Pu-
• login/logout
  • https://www.filledstacks.com/post/building-flutter-login-and-sign-up-forms/
  • https://github.com/jzahmatkesh/LoginUI (https://www.youtube.com/watch?v=LS8KFYsR244)
• forgot password (email temp password)
• change password
• user profile
  • https://youtu.be/81XYs6lliB4
  • https://github.com/JohannesMilke/user_profile_example
  • https://github.com/JohannesMilke/user_profile_ii_example
• favorite/unfavorite showcase
• social login
  • https://www.callicoder.com/spring-boot-security-oauth2-social-login-part-1/
  • https://github.com/callicoder/spring-boot-react-oauth2-social-login-demo
• cache
  • https://www.baeldung.com/hibernate-second-level-cache

In-App Chat Messenger

After the backend is delivered #23:

• Learning Bot #24
• User to User Chat
• Group Chat

Rebranding: Change name of Flutter Widgets Explorer to Fluwix

• change package name to com.fluwix. Publish Fluwix App first then phase out Flutter Widget Explorer.
• change URL of Google Play Store for all references such as blog posts, medium articles and documentation
• Change tag line: Fluwix - Flutter Showcases
• Update documentation. "A platform" is better than "An app"

Retiring Flutter Widgets Explorer

• add alert dialog with "Install Now" to Flutter Widgets Explorer after launch
  • https://api.flutter.dev/flutter/material/AlertDialog-class.html

Web: List item's label missing in main listing after scrolling

Release the Flutter Widgets Explorer to Web

References:
https://flutter.dev/docs/deployment/web
https://dev.to/agustinustheo/automating-flutter-web-deployments-to-netlify-using-github-actions-2g71
https://gist.github.com/richard-flosi/8b43c06732d296f1145b8f5d12bf194e
https://github.com/nabilnalakath/flutter-githubaction

Comment module

https://nehajirafe.medium.com/data-modeling-designing-facebook-style-comments-with-sql-4cf9e81eb164
https://stackoverflow.com/questions/37456154/database-schema-design-for-posts-comments-and-replies

Main listing screen scroll position reset

Main listing screen scroll position reset every time user navigate to showcase screen and back to it. The issue is happen in narrow layout

Flutter Clean Architecture Showcase

Create a module and start from https://github.com/limcheekin/flutter-tdd-clean-architecture

References:

• https://pub.dev/packages/flutter_clean_architecture (Article)
• https://pub.dev/packages/stacked
  • https://www.filledstacks.com/post/flutter-and-provider-architecture-using-stacked/
  • https://github.com/FilledStacks/stacked-example
  • https://github.com/FilledStacks/boxtout/discussions/5j
  • https://medium.com/indian-coder/flutter-architecture-that-i-adore-8139080abb
• https://blog.gskinner.com/archives/2020/09/flutter-state-management-with-mvcs.html
• https://medium.com/flutter-community/layered-architecture-to-advanced-flutter-apps-d8d4db2bd1c7
• https://devmuaz.medium.com/flutter-clean-architecture-series-part-3-cdfbcb8d449b
• https://www.cronj.com/blog/flutter-tutorial/flutter-architecture/
• Flutter Architecture: BloC and DDD, Talks by Felix Angelov and Majid Hajian

Page not found error after browser refresh

Solution: https://answers.netlify.com/t/deploying-single-page-applications/14695

Localization, Internationalization and English/Chinese language support

https://flutter.dev/docs/development/accessibility-and-localization/internationalization
https://youtu.be/Zw4KoorVxgg
https://youtu.be/lDfbbTvq4qM

Add search bar

When number of showcases > 20
https://resocoder.com/2021/01/23/search-bar-in-flutter-logic-material-ui/

Set target property in Link class

https://youtu.be/ujlqRTJg48g

Add "Open in Apps" feature in Web

Deep Link: https://medium.com/flutter-community/deep-links-and-flutter-applications-how-to-handle-them-properly-8c9865af9283

Flutter Web Hover and Mouse Cursor

https://www.filledstacks.com/post/flutter-web-hover-and-mouse-cursor/

Glassmorphism Design Showcase

https://pub.dev/packages/glassmorphism

Add Social Media Features

After the backend is delivered #23:

• User Comments
• Share https://github.com/fluttercommunity/plus_plugins/tree/main/packages/share_plus
• View Count
• Related Showcases
• Activity Logs
• Push Notifications
• Update favorite/Unfavorite
• Update User Profile
• https://github.com/rizwanch173/Flutter-Social-App-UI-Kit 

Gamification

https://niacubilla.medium.com/how-i-created-a-gamification-experience-with-flutter-in-4-days-636a66ae6052

In App Rating/Review

https://pub.dev/packages/rate_my_app
https://pub.dev/packages/in_app_review
https://pub.dev/packages/app_review

Update readme, thumbnail.png & screenshots.gif of all modules

Also the main README.md

Flutter Learning Bot

Content:

Public accessible online content source:

• https://dzone.com/articles/flutter-tutorial-for-developers-step-by-step-guide
• A guided tour of the Flutter SDK
• https://towardsdatascience.com/a-data-product-view-on-conversational-ai-80284efe5a15
• https://github.com/londonappbrewery/Flutter-Course-Resources

Tech:

RASA

• https://github.com/RasaHQ/rasa-for-beginners
• https://rasa.com/docs/rasa/playground/
• https://rasa.com/summit/
  • AI = your data (Watched)
  • Continuous Improvement of Conversational AI in Production (Watched)
• https://medium.com/@dishant_gandhi/rasa-chatbot-android-covid-app-tutorial-part-3-73c7a69f3c65
• https://floriantreml.medium.com/giving-a-voice-to-rasa-with-botium-speech-1c65a7513bdf 
• Samples
  • https://github.com/sid321axn/rasa_ml_bot
  • https://github.com/S1LV3RJ1NX/CBOT-rasa

Jarvis

• Jarvis: Multimodal Conversational AI | Alex Qi & Nikhil Srihari
• NVIDIA Jarvis Conversational AI on Python - Dr. Ahmad Bazzi

OpenAssistant:

• https://github.com/LAION-AI/Open-Assistant

Links in Read Me of showcase view not clickable?

Markdown Presentation, alternative to README.md

• Toggle fullscreen mode
• https://marp.app/
• https://levelup.gitconnected.com/creating-professional-presentation-from-markdown-975c65211359 
• https://stymied.medium.com/what-slides-from-markdown-5239ed31e7ac

Settings UI Showcase

https://pub.dev/packages/settings_ui