https://github.com/norbert515/flutter_experiment_phone_ide
An experimental way to change Flutter source-code in Flutter itself.
https://github.com/norbert515/flutter_experiment_phone_ide
Last synced: 10 months ago
JSON representation
An experimental way to change Flutter source-code in Flutter itself.
- Host: GitHub
- URL: https://github.com/norbert515/flutter_experiment_phone_ide
- Owner: Norbert515
- Created: 2018-12-27T17:39:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-05T14:05:38.000Z (over 7 years ago)
- Last Synced: 2025-07-07T00:40:25.150Z (11 months ago)
- Language: Dart
- Homepage:
- Size: 3.1 MB
- Stars: 110
- Watchers: 7
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# flutter_experiment_phone_ide
More gifs in the "gifs" folder.
## Set up
Has only been tested on Windows + Android (other platforms should work with little code adjustments)
The PC and the device must be in the same private network.
No root, what so ever required.
*Estimated set up time: 8 minutes*
#### 1. Download Dart (Flutter has dart, but it is not a full version of it)
```
https://www.dartlang.org/tools/sdk#install
```
#### 2. Make sure dart is in your path. Type `dart` into the command line and see if it is there.
If it is not, put it into the path (https://docs.alfresco.com/4.2/tasks/fot-addpath.html)
#### 3. Clone this repositry
```git
git clone https://github.com/Norbert515/flutter_experiment_phone_ide.git
```
#### 4. Include the code into your Flutter project
Copy the "ide" folder under "https://github.com/Norbert515/flutter_experiment_phone_ide/tree/master/flutter_experiment_phone_ide/lib" into your project
#### 5. Add dependecies to your project
Add these three dependencies into your pubspec.yaml and run `packages get`
```
rpc: ^0.6.0
http: ^0.11.0
path: ^1.6.2
```
#### 6. Wrap the app
Wrap your home page with the `IdeApp` widget:
```
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.red,
),
home: IdeApp(child: new MyHomePage()),
);
}
}
```
#### 7. Open the command line at this place
```
flutter_experiment_phone_ide/flutter_experiment_phone_ide_server/bin/
```
#### 8. Get the packages
```
pub get
```
#### 9. Get the deviceId of the device you want to run it on
If you want to test it on your phone without a cable :
It still goes through adb, but wirelessly. Here is a very quick set up for that https://futurestud.io/tutorials/how-to-debug-your-android-app-over-wifi-without-root
Then run
```
flutter devices
```
The device ids are 192.168.0.101:5555, Desktop, Small respectively.
#### 10. Start the server
It takes 2 arguments
```
--projectPath=
--deviceId=
```
This is how it could look like:
```
dart server.dart --projectPath="C:\Users\Norbert\workspace\flutter_experiment_phone_ide\flutter_experiment_phone_ide" --deviceId="172.23.218.234:5555"
```
#### 11. Change to IP inside the client
Navigate to the folder "ide" you copied to your project. Open the `ide.dart` file.
On line 8, change the `rootUrl` to the server IP.
Here is an example:
```
TestApi testApi = TestApi(http.Client(), rootUrl: "http://192.168.0.179:8080/");
```
#### 12. Open the link which the server prints out to the console on your phone.
The link is:
```
:/test/v1/coldStart
```
#### 13. VPN (Not tested)
If you want to develop apps anywhere you go, you will have to set up a VPN to connect the phone and the PC.
#### 14. Edit the code
When the App opens, swipe to the right (there is a hidden drawer to the
left) to open the IDE settings. There you can enable the IDE and select a file
to edit.