Flutter VR: Flutter + React 360 + GitHub Pages
Introduction:
In this article, I will be showing you how to create a Flutter VR app using React 360 and GitHub Pages.
Flutter:
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
React 360:
React 360 is a framework for the creation of 3D and VR user interfaces. Built on top of React — a library designed to simplify the creation of complex UI — React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web.
GitHub Pages:
GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.
We will be combining these three technologies from three different companies (Google, Facebook & GitHub respectively) to create an amazing cross-platform app.
So, let’s get started.
Setup
First of all, we need to set up these three technologies to use them for a project.
Flutter:
You can follow this article for setting up Flutter properly on your system:
https://medium.com/flutter-community/flutter-getting-started-f07df7d4cce2
React 360:
For setting up React 360 on your system, follow this official setup guide:
https://facebook.github.io/react-360/docs/setup.html
GitHub Pages:
First of all, you should have the git version control system installed and configured on your system. You can get it from here.
For using GitHub Pages you will just need a GitHub account, create an account here.
➢ After you are done with the setup, let’s create a project.
Configure a React 360 project:
If you have followed the official setup guide for React 360, then by now you should know how to create and deploy a React 360 project and should have deployed the prebuilt Hello360 project to a local server.
Now, we will be taking this project from the local server and deploy it to GitHub pages.
Let’s start by creating a project.
1. Open the terminal.
2. Use the following command to create a new React 360 project called demo360.
react-360 init demo3603. Open this project in any Code Editor (like VS Code).
4. Navigate to the folder node_modules → react-360 → scripts.
5. Now, in this folder create a new file called deploy.js.
6. Paste the following code in this file and save it:
const ghpages = require(‘gh-pages’);
ghpages.publish(‘build’, function(err) {});7. Create another file called copy_assets.sh.
8. Paste this in the file and save it:
set -e
set -x
rm -f -r build/static_assets
cp -f -R static_assets build/static_assets9. Open package.json file from the root project directory.
10. Add the following code to the file:
…
//Add this github pages url
“homepage”: “https://<USERNAME>.github.io/<REPO_NAME>”,
“scripts”: {
…
// Update the bundle to this
“bundle”: “node node_modules/react-360/scripts/bundle.js && sh
node_modules/react-360/scripts/copy_assets.sh”,// Add the following line to the scripts“deploy”: “node node_modules/react-360/scripts/deploy.js”
},
…
11. Replace the USERNAME with your GitHub username and REPO_NAME with the repository name of your project on GitHub.
➢ The GitHub pages URL I am using is: https://sbis04.github.io/demo360
12. Now, run this command from the root directory of the project in your terminal.
npm run bundleDeploy to GitHub Pages:
Now, that we are done with the configuration of the React 360 project, let’s deploy it to GitHub Pages.
1. Initialize a git repository and commit all the files.
git init
git add .
git commit -m “Initial commit”2. Then, go to GitHub (make sure you are signed in with your account) and create a new GitHub repo by clicking on the “+” button on the top-right corner and select New repository.
3. Enter the Repository name, this should be the same as the REPO_NAME used in the GitHub pages URL in your project’s package.json file.
4. You can add an optional Description.
5. Set the project to Public.
6. Click on Create repository.
7. Copy the HTTPS URL.
8. Now, go the project directory in your terminal and run this command:
git remote add origin <HTTPS URL>➢ Replace the <HTTPS URL> with the URL that you have copied.
9. Push the project to GitHub using this command:
git push origin master10. Now, if you go the GitHub repo, then you will find your project uploaded to GitHub.
11. Go, back to the terminal and run this command from the root directory of the project to install the GitHub pages module.
npm install -D gh-pages12. Then, commit and push the changes to GitHub repo.
git add .
git commit -m “Added github pages module”
git push origin master13. The final step to deploy the project to GitHub pages is to run this command:
npm run deploy➢ Now, your demo360 project is successfully deployed to GitHub pages. You can find the URL in the Settings of the GitHub repo.
NOTE: It takes some time for the website to be updated and deployed to GitHub Pages. So, if you cannot see the webpage by going to the link don’t panic and wait for at least 30 minutes before taking any further steps.
Converting to a Flutter app:
Before starting to create the Flutter app, make sure you have the Google Chrome browser installed and set to default on your mobile device because we will be needing a special feature of Chrome.
NOTE: This special feature of Chrome will only work on Android due to the limitation of the flutter_custom_tabs plugin.
Let’s create the Flutter app.
The app will be very simple, just using a Chrome Custom Tabs to load the GitHub pages.
1. Create a Flutter app, by running the command:
flutter create — androidx flutter_demo360➢ We have added the --androidx flag to support AndroidX Library.
2. Open the project in your IDE (like VS Code).
3. First of all, go to the pubspec.yaml file and add this line to the dependencies:
flutter_custom_tabs: “⁰.6.0”We have added this line because we will be using Chrome Custom Tabs and for that, we will need a flutter_custom_tabs package. You can get the latest package from here.
4. Go to the lib folder of the root project directory and open the main.dart file.
5. Now, here you will find the code for the prebuilt Flutter counter app. Just replace the whole code with the code below.
import ‘package:flutter/material.dart’;
import ‘package:flutter/services.dart’;
import ‘package:flutter_custom_tabs/flutter_custom_tabs.dart’;
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MyApp()); SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.transparent, // navigation bar color
statusBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark, //status bar color
));
}class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter VR’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
color: Colors.blue,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(),
Text(
‘Flutter VR’,
style: TextStyle(
fontSize: 60,
color: Colors.white,
fontWeight: FontWeight.bold
),
),
SizedBox(height: 20),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)),
color: Colors.blue[800],
child: Padding(
padding: const EdgeInsets.all(10),
child: Text(
‘ENTER’,
style: TextStyle(
fontSize: 25,
color: Colors.white,
),
),
),
onPressed: () => _launchURL(context),
),
],
),
),
),
);
}Future<void> _launchURL(BuildContext context) async {
try {
await launch(
// NOTE: Replace this URL with your GitHub Pages URL.
‘https://sbis04.github.io/demo360',
option: CustomTabsOption(
toolbarColor: Theme.of(context).primaryColor,
enableDefaultShare: true,
enableUrlBarHiding: true,
showPageTitle: false,
animation: CustomTabsAnimation.slideIn(),
extraCustomTabs: const <String>[
// ref.
https://play.google.com/store/apps/details?id=org.mozilla.firefox
‘org.mozilla.firefox’,
// ref.
https://play.google.com/store/apps/details?id=com.microsoft.emmx
‘com.microsoft.emmx’,
],
),
);
}catch (e) {
// An exception is thrown if browser app is not installed on Android
device.
debugPrint(e.toString());
}
}
}
➢ Just replace the GitHub pages URL with your own.
6. Run it on your device (a physical device is recommended for testing this).
The app is partially complete because there is a little problem, to be able to use a VR headset the app needs to have a split-screen display.
VR Configuration
To get a split-screen display we need to enable an experimental Chrome Flag, called WebVR.
- From the Google Chrome browser on your mobile device go to this link: chrome://flags/#enable-webvr
2. Enable the WebVR flag.
3. Restart the browser (if prompted install Google VR Services from Play Store).
4. Now, go to this link from the Android device to check if the View in VR button is getting displayed.
You have successfully setup WebVR for Google Chrome.
Now, run the app again. Click on ENTER.
You will see the View in the VR button in the bottom left corner.
Click on it to view in VR mode.
So, the Flutter VR app is finally complete.
Conclusion:
You can find the GitHub repositories for both the Flutter and React 360 projects in the following links:
https://github.com/sbis04/flutter_vr
https://github.com/sbis04/demo360
If you like the projects, please give “Stars” (⭐) to my GitHub repositories.
➢ You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to check out my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!
Happy coding…
Souvik Biswas
Indian Institute of Information Technology, Kalyani
