├── .gitignore
├── .vscode
├── settings.json
└── launch.json
├── .devcontainer
├── devcontainer.json
└── Dockerfile
├── web
└── index.html
├── pubspec.yaml
├── test
└── widget_test.dart
├── README.md
├── pubspec.lock
└── lib
└── main.dart
/.gitignore:
--------------------------------------------------------------------------------
1 | .dart_tool/
2 | .DS_Store
3 | .packages
4 | /build/
5 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "dart.flutterSdkPath": "~/flutter",
3 | "terminal.integrated.env.linux": {
4 | "PATH": "~/flutter/bin/:${env:PATH}",
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 | {
2 | "build": {
3 | "dockerfile": "Dockerfile"
4 | },
5 | "name": "Flutter",
6 | "extensions": [
7 | "Dart-Code.dart-code",
8 | "Dart-Code.flutter"
9 | ],
10 | }
11 |
--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vsonline_flutter_web
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/pubspec.yaml:
--------------------------------------------------------------------------------
1 | name: vsonline_flutter_web
2 | description: A new Flutter project.
3 | version: 1.0.0
4 |
5 | environment:
6 | sdk: ">=2.8.0 <3.0.0"
7 |
8 | dependencies:
9 | flutter:
10 | sdk: flutter
11 |
12 | dev_dependencies:
13 | flutter_test:
14 | sdk: flutter
15 | flutter:
16 | uses-material-design: true
17 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "name": "Flutter",
6 | "request": "launch",
7 | "type": "dart",
8 | "program": "lib/main.dart",
9 | "noDebug": true,
10 | "flutterDisableVmServiceExperimental": true,
11 | "args": [
12 | "--web-hostname",
13 | "any"
14 | ]
15 | }
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/.devcontainer/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM debian:stretch
2 |
3 | RUN apt-get update && apt-get -y install git curl unzip
4 |
5 | RUN apt-get autoremove -y \
6 | && apt-get clean -y \
7 | && rm -rf /var/lib/apt/lists/*
8 |
9 | RUN mkdir /home/vscodespace
10 | WORKDIR /home/vscodespace
11 |
12 | ENV PUB_CACHE=/home/vscodespace/.pub_cache
13 | ENV PATH="/home/vscodespace/flutter/bin:$PATH"
14 |
15 | RUN git clone https://github.com/flutter/flutter --branch beta && \
16 | /home/vscodespace/flutter/bin/flutter config --enable-web
17 |
--------------------------------------------------------------------------------
/test/widget_test.dart:
--------------------------------------------------------------------------------
1 | // This is a basic Flutter widget test.
2 | //
3 | // To perform an interaction with a widget in your test, use the WidgetTester
4 | // utility that Flutter provides. For example, you can send tap and scroll
5 | // gestures. You can also use WidgetTester to find child widgets in the widget
6 | // tree, read text, and verify that the values of widget properties are correct.
7 |
8 | import 'package:flutter/material.dart';
9 | import 'package:flutter_test/flutter_test.dart';
10 |
11 | import 'package:vsonline_flutter_web/main.dart';
12 |
13 | void main() {
14 | testWidgets('Counter increments smoke test', (WidgetTester tester) async {
15 | // Build our app and trigger a frame.
16 | await tester.pumpWidget(MyApp());
17 |
18 | // Verify that our counter starts at 0.
19 | expect(find.text('0'), findsOneWidget);
20 | expect(find.text('1'), findsNothing);
21 |
22 | // Tap the '+' icon and trigger a frame.
23 | await tester.tap(find.byIcon(Icons.add));
24 | await tester.pump();
25 |
26 | // Verify that our counter has incremented.
27 | expect(find.text('0'), findsNothing);
28 | expect(find.text('1'), findsOneWidget);
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # VS Codespaces Flutter Web Sample
2 |
3 | A sample repo for trying out Flutter web projects in VS Codespace (formerly VS Online). This is a work in progress, don't expect everything to work.
4 |
5 | - Ensure you have the [Dart Debug Extension](https://chrome.google.com/webstore/detail/dart-debug-extension/eljbmlghnomdjgdjmbdekegdkbabckhm) if debugging
6 | - [Open this repo in VS Codespaces](https://online.visualstudio.com/environments/new?name=test-flutter-web&repo=DanTup/vsonline-flutter-web)
7 | - If you see a prompt about the Flutter SDK not being found, or not containing a Dart SDK, wait until the script running in the Terminal window completes, and then run the **Reload Window** command from the command palette
8 | - On the debug side bar, click the green play button to debug the app (or choose Run -> Run Without Debugging)
9 | - When the build completes, a new browser window will be opened (check for popup blocking)
10 | - If debugging, the page will load blank - click the Dart Debug Extension icon to connect the debugger and start the app
11 | - Don't forget to delete the VS Codespace when done testing!
12 |
13 | ## Known Issues
14 |
15 | - No hot reload??
16 | - No debugging??
17 | - No DevTools??
18 | - ...
19 |
--------------------------------------------------------------------------------
/pubspec.lock:
--------------------------------------------------------------------------------
1 | # Generated by pub
2 | # See https://dart.dev/tools/pub/glossary#lockfile
3 | packages:
4 | async:
5 | dependency: transitive
6 | description:
7 | name: async
8 | url: "https://pub.dartlang.org"
9 | source: hosted
10 | version: "2.4.1"
11 | boolean_selector:
12 | dependency: transitive
13 | description:
14 | name: boolean_selector
15 | url: "https://pub.dartlang.org"
16 | source: hosted
17 | version: "2.0.0"
18 | charcode:
19 | dependency: transitive
20 | description:
21 | name: charcode
22 | url: "https://pub.dartlang.org"
23 | source: hosted
24 | version: "1.1.3"
25 | clock:
26 | dependency: transitive
27 | description:
28 | name: clock
29 | url: "https://pub.dartlang.org"
30 | source: hosted
31 | version: "1.0.1"
32 | collection:
33 | dependency: transitive
34 | description:
35 | name: collection
36 | url: "https://pub.dartlang.org"
37 | source: hosted
38 | version: "1.14.12"
39 | fake_async:
40 | dependency: transitive
41 | description:
42 | name: fake_async
43 | url: "https://pub.dartlang.org"
44 | source: hosted
45 | version: "1.1.0"
46 | flutter:
47 | dependency: "direct main"
48 | description: flutter
49 | source: sdk
50 | version: "0.0.0"
51 | flutter_test:
52 | dependency: "direct dev"
53 | description: flutter
54 | source: sdk
55 | version: "0.0.0"
56 | matcher:
57 | dependency: transitive
58 | description:
59 | name: matcher
60 | url: "https://pub.dartlang.org"
61 | source: hosted
62 | version: "0.12.6"
63 | meta:
64 | dependency: transitive
65 | description:
66 | name: meta
67 | url: "https://pub.dartlang.org"
68 | source: hosted
69 | version: "1.1.8"
70 | path:
71 | dependency: transitive
72 | description:
73 | name: path
74 | url: "https://pub.dartlang.org"
75 | source: hosted
76 | version: "1.7.0"
77 | sky_engine:
78 | dependency: transitive
79 | description: flutter
80 | source: sdk
81 | version: "0.0.99"
82 | source_span:
83 | dependency: transitive
84 | description:
85 | name: source_span
86 | url: "https://pub.dartlang.org"
87 | source: hosted
88 | version: "1.7.0"
89 | stack_trace:
90 | dependency: transitive
91 | description:
92 | name: stack_trace
93 | url: "https://pub.dartlang.org"
94 | source: hosted
95 | version: "1.9.3"
96 | stream_channel:
97 | dependency: transitive
98 | description:
99 | name: stream_channel
100 | url: "https://pub.dartlang.org"
101 | source: hosted
102 | version: "2.0.0"
103 | string_scanner:
104 | dependency: transitive
105 | description:
106 | name: string_scanner
107 | url: "https://pub.dartlang.org"
108 | source: hosted
109 | version: "1.0.5"
110 | term_glyph:
111 | dependency: transitive
112 | description:
113 | name: term_glyph
114 | url: "https://pub.dartlang.org"
115 | source: hosted
116 | version: "1.1.0"
117 | test_api:
118 | dependency: transitive
119 | description:
120 | name: test_api
121 | url: "https://pub.dartlang.org"
122 | source: hosted
123 | version: "0.2.15"
124 | typed_data:
125 | dependency: transitive
126 | description:
127 | name: typed_data
128 | url: "https://pub.dartlang.org"
129 | source: hosted
130 | version: "1.1.6"
131 | vector_math:
132 | dependency: transitive
133 | description:
134 | name: vector_math
135 | url: "https://pub.dartlang.org"
136 | source: hosted
137 | version: "2.0.8"
138 | sdks:
139 | dart: ">=2.8.0 <3.0.0"
140 |
--------------------------------------------------------------------------------
/lib/main.dart:
--------------------------------------------------------------------------------
1 | import 'package:flutter/material.dart';
2 |
3 | void main() => runApp(MyApp());
4 |
5 | class MyApp extends StatelessWidget {
6 | // This widget is the root of your application.
7 | @override
8 | Widget build(BuildContext context) {
9 | return MaterialApp(
10 | title: 'Flutter Demo',
11 | theme: ThemeData(
12 | // This is the theme of your application.
13 | //
14 | // Try running your application with "flutter run". You'll see the
15 | // application has a blue toolbar. Then, without quitting the app, try
16 | // changing the primarySwatch below to Colors.green and then invoke
17 | // "hot reload" (press "r" in the console where you ran "flutter run",
18 | // or simply save your changes to "hot reload" in a Flutter IDE).
19 | // Notice that the counter didn't reset back to zero; the application
20 | // is not restarted.
21 | primarySwatch: Colors.blue,
22 | ),
23 | home: MyHomePage(title: 'Flutter Demo Home Page'),
24 | );
25 | }
26 | }
27 |
28 | class MyHomePage extends StatefulWidget {
29 | MyHomePage({Key key, this.title}) : super(key: key);
30 |
31 | // This widget is the home page of your application. It is stateful, meaning
32 | // that it has a State object (defined below) that contains fields that affect
33 | // how it looks.
34 |
35 | // This class is the configuration for the state. It holds the values (in this
36 | // case the title) provided by the parent (in this case the App widget) and
37 | // used by the build method of the State. Fields in a Widget subclass are
38 | // always marked "final".
39 |
40 | final String title;
41 |
42 | @override
43 | _MyHomePageState createState() => _MyHomePageState();
44 | }
45 |
46 | class _MyHomePageState extends State {
47 | int _counter = 0;
48 |
49 | void _incrementCounter() {
50 | setState(() {
51 | // This call to setState tells the Flutter framework that something has
52 | // changed in this State, which causes it to rerun the build method below
53 | // so that the display can reflect the updated values. If we changed
54 | // _counter without calling setState(), then the build method would not be
55 | // called again, and so nothing would appear to happen.
56 | _counter++;
57 | });
58 | }
59 |
60 | @override
61 | Widget build(BuildContext context) {
62 | // This method is rerun every time setState is called, for instance as done
63 | // by the _incrementCounter method above.
64 | //
65 | // The Flutter framework has been optimized to make rerunning build methods
66 | // fast, so that you can just rebuild anything that needs updating rather
67 | // than having to individually change instances of widgets.
68 | return Scaffold(
69 | appBar: AppBar(
70 | // Here we take the value from the MyHomePage object that was created by
71 | // the App.build method, and use it to set our appbar title.
72 | title: Text(widget.title),
73 | ),
74 | body: Center(
75 | // Center is a layout widget. It takes a single child and positions it
76 | // in the middle of the parent.
77 | child: Column(
78 | // Column is also a layout widget. It takes a list of children and
79 | // arranges them vertically. By default, it sizes itself to fit its
80 | // children horizontally, and tries to be as tall as its parent.
81 | //
82 | // Invoke "debug painting" (press "p" in the console, choose the
83 | // "Toggle Debug Paint" action from the Flutter Inspector in Android
84 | // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
85 | // to see the wireframe for each widget.
86 | //
87 | // Column has various properties to control how it sizes itself and
88 | // how it positions its children. Here we use mainAxisAlignment to
89 | // center the children vertically; the main axis here is the vertical
90 | // axis because Columns are vertical (the cross axis would be
91 | // horizontal).
92 | mainAxisAlignment: MainAxisAlignment.center,
93 | children: [
94 | Text(
95 | 'You have pushed the button this many times:',
96 | ),
97 | Text(
98 | '$_counter',
99 | style: Theme.of(context).textTheme.display1,
100 | ),
101 | ],
102 | ),
103 | ),
104 | floatingActionButton: FloatingActionButton(
105 | onPressed: _incrementCounter,
106 | tooltip: 'Increment',
107 | child: Icon(Icons.add),
108 | ), // This trailing comma makes auto-formatting nicer for build methods.
109 | );
110 | }
111 | }
112 |
--------------------------------------------------------------------------------