SPIKE: Display a Content from the Web in a WebView

[nelsonic]

We appear to be having a little challenge getting Google Auth to work in Flutter without Firebase: #4
This is a temporary obstacle if we are able to embed the fully functional Phoenix Google Auth into our Flutter App using a WebView. If we are able to display any web page in a Flutter App then we will be able to perform all the Google Authentication steps in a web view and eliminate the need for Firebase.

Todo

• Create a new file in this repository called webview-tutorial.md and
• Capture all the steps required to display content from the web in a Flutter App
• Display a web page e.g: wikipedia in a WebView in a Flutter App and confirm that it is interactive.
• Ideally we should show how to display the WebView both
  • Only one portion of the screen
  • Full-screen.

Useful Links

• https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2?
• Using WebViews in Flutter (official tutorial): https://youtu.be/RA-vLF_vnng
• How to use the WebView Plugin: https://youtu.be/Wo0o0wSkn4k

Note: I am aware that at the time of writing there is an issue displaying the keyboard for input in a WebView flutter/flutter#19718 that may affect our ability to seamlessly use the Elixir Auth, but I trust that it will be resolved soon. Please proceed with this SPIKE and if we determine that it is unworkable to perform Auth in a WebView we will consider alternative options.

@miguelmartins17 in case you are wondering why this issue has the word "SPIKE" in the title,
see: https://en.wikipedia.org/wiki/Spike_(software_development) 😉

[miguelmartins17]

@nelsonic I've already started working on this issue. 😎

[nelsonic]

@miguelmartins17 Please share your progress with screenshots as you are going. 👍

[miguelmartins17]

@nelsonic I didn't find anything about how to display the WebView in a portion of the screen. Do you want me to open a New issue?

[nelsonic]

@miguelmartins17 in the official video (linked above)
at 02:50 @efortuna describes having a WebView inside of a ListView:

This is used to display the content of a News article below the news article Title.
It is an example of only using a portion of the screen to display a WebView.

I think this is a good use-case if the news content is web based and we want to contain it. 💭