feat: Adding main.dart section. #1

Author: LuchoTurtle

README.md

@@ -21,6 +21,9 @@
   - [Prerequisites? 📝](#prerequisites-)
   - [0. Project setup](#0-project-setup)
     - [\*\*Make sure your `flutter` is up-to-date!](#make-sure-your-flutter-is-up-to-date)
+  - [1. Installing all the needed dependencies](#1-installing-all-the-needed-dependencies)
+  - [2. Setting up the responsive framework](#2-setting-up-the-responsive-framework)
+  - [3. Create `HomePage` with basic editor](#3-create-homepage-with-basic-editor)
 
 
 # Why? 🤷‍
@@ -131,3 +134,134 @@ please follow the instructions in https://stackoverflow.com/questions/52060516/f
 You will essentially need to change the `minSdkVersion` parameter
 inside `android/app/build.gradle` file 
 and bump it to a higher version (it is suggested in the error output).
+
+
+## 1. Installing all the needed dependencies
+
+To implement our application that runs `flutter_quill`, 
+we are going to need install some dependencies 
+that we're going to be using.
+
+- [`flutter_quill`](https://github.com/singerdmx/flutter-quill), 
+the main package with the text editor
+with Delta capabilities.
+- [`flutter_quill_extensions`](https://pub.dev/packages/flutter_quill_extensions), 
+needed to use image and video embeds into the editor,.
+- [`file_picker`](https://pub.dev/packages/file_picker),
+so we're able to import files.
+- [`universal_io`](https://pub.dev/packages/universal_io),
+an extended version of `dart.io` that works on all platforms.
+- [`universal_html`](https://pub.dev/packages/universal_html),
+extended version of `dart.html` that is cross-platform.
+- [`responsive_framework`](https://pub.dev/packages/responsive_framework),
+package that will make it easier to make our `Flutter` app responsive.
+- [`path`](https://pub.dev/packages/path)
+and [`path_provider`](https://pub.dev/packages/path_provider),
+needed to find the path of chosen images.
+
+To install of these packages, 
+head over to `pubspec.yaml`
+and inside the `dependencies` section,
+add the following lines:
+
+```dart
+  flutter_quill: ^7.3.3
+  flutter_quill_extensions: ^0.4.0
+  file_picker: ^5.3.3
+  universal_io: ^2.2.2
+  responsive_framework: ^1.1.0
+  universal_html: ^2.2.3
+  path: ^1.8.3
+  path_provider: ^2.1.0
+```
+
+And run `flutter pub get` to download these dependencies.
+
+
+## 2. Setting up the responsive framework
+
+Now that we have all the dependencies we need,
+let's start by setting up all the needed breakpoints
+from the `responsive_framework`
+to make our app responsive 
+and *conditionally show elements*
+according to the device size.
+
+Head over to `main.dart`
+and paste the following:
+
+```dart
+import 'package:app/home_page.dart';
+import 'package:flutter/material.dart';
+import 'package:responsive_framework/responsive_framework.dart';
+
+void main() {
+  WidgetsFlutterBinding.ensureInitialized();
+  runApp(App(
+    platformService: PlatformService(),
+  ),);
+}
+
+/// Entry gateway to the application.
+/// Defining the MaterialApp attributes and Responsive Framework breakpoints.
+class App extends StatelessWidget {
+  const App({required this.platformService, super.key});
+
+  final PlatformService platformService;
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Editor Demo',
+      builder: (context, child) => ResponsiveBreakpoints.builder(
+        child: child!,
+        breakpoints: [
+          const Breakpoint(start: 0, end: 425, name: MOBILE),
+          const Breakpoint(start: 426, end: 768, name: TABLET),
+          const Breakpoint(start: 769, end: 1440, name: DESKTOP),
+          const Breakpoint(start: 1441, end: double.infinity, name: '4K'),
+        ],
+      ),
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
+        useMaterial3: true,
+      ),
+      home: HomePage(platformService: platformService),
+    );
+  }
+}
+
+/// Platform service class that tells if the platform is web-based or not
+class PlatformService {
+  bool isWebPlatform() {
+    return kIsWeb;
+  }
+}
+```
+
+Let's break this down!
+
+- inside `main()`, we initialize the app 
+by passing a `platformService`,
+our own small [stubbable](https://en.wikipedia.org/wiki/Method_stub)
+class that will allow us to check in tests whether the device
+is mobile or desktop-based.
+- our app is wrapped in `MaterialApp`.
+In the `builder` parameter,
+we define the `responsive_framework` breakpoints
+to conditionally render widgets according to the device's size.
+- we define the `HomePage` in the `home` parameter.
+This `HomePage` class is not yet defined.
+
+This will fail because `home_page.dart` is not defined.
+Let's do that! 😀
+
+
+## 3. Create `HomePage` with basic editor
+
+In `lib`, create a file called `home_page.dart`
+and paste the following code.
+
+```dart
+
+```

integration_test/widget_test.mocks.dart

@@ -3,7 +3,7 @@
 // Do not manually edit this file.
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:app/home_page.dart' as _i2;
+import 'package:app/main.dart' as _i2;
 import 'package:mockito/mockito.dart' as _i1;
 
 // ignore_for_file: type=lint

lib/home_page.dart

@@ -2,8 +2,8 @@ import 'dart:async';
 import 'dart:io';
 import 'dart:ui';
 
+import 'package:app/main.dart';
 import 'package:file_picker/file_picker.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/extensions.dart';
 import 'package:flutter_quill/flutter_quill.dart' hide Text;
@@ -331,11 +331,4 @@ class HomePageState extends State<HomePage> {
 class ImageFilePicker {
   Future<FilePickerResult?> pickImage() => FilePicker.platform.pickFiles(type: FileType.image);
 }
-
-/// Platform service class that tells if the platform is web-based or not
-class PlatformService {
-  bool isWebPlatform() {
-    return kIsWeb;
-  }
-}
 // coverage:ignore-end

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:app/home_page.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:responsive_framework/responsive_framework.dart';
 
@@ -39,3 +40,12 @@ class App extends StatelessWidget {
     );
   }
 }
+
+// coverage:ignore-start
+/// Platform service class that tells if the platform is web-based or not
+class PlatformService {
+  bool isWebPlatform() {
+    return kIsWeb;
+  }
+}
+// coverage:ignore-end

lib/web_embeds/web_embeds.dart

@@ -1,5 +1,5 @@
 
-import 'package:app/home_page.dart';
+import 'package:app/main.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';

pubspec.lock

@@ -185,14 +185,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.17.3"
-  cupertino_icons:
-    dependency: "direct main"
-    description:
-      name: cupertino_icons
-      sha256: e35129dc44c9118cee2a5603506d823bab99c68393879edb440e0090d07586be
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.5"
   dart_style:
     dependency: transitive
     description:
@@ -297,14 +289,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.9.3"
-  filesystem_picker:
-    dependency: "direct main"
-    description:
-      name: filesystem_picker
-      sha256: cf790e033b3e0c07b5bc9f71458b39f1f45017641aae508ffdfb86a59baa0c1d
-      url: "https://pub.dev"
-    source: hosted
-    version: "3.1.0"
   fixnum:
     dependency: transitive
     description:

pubspec.yaml

@@ -31,14 +31,9 @@ dependencies:
   flutter:
     sdk: flutter
 
-
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.2
   flutter_quill: ^7.3.3
   flutter_quill_extensions: ^0.4.0
   file_picker: ^5.3.3
-  filesystem_picker: ^3.1.0
   universal_io: ^2.2.2
   responsive_framework: ^1.1.0
   universal_html: ^2.2.3

test/widget_test.dart

@@ -5,7 +5,6 @@
 // gestures. You can also use WidgetTester to find child widgets in the widget
 // tree, read text, and verify that the values of widget properties are correct.
 
-import 'package:app/home_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill_extensions/embeds/toolbar/image_button.dart';

test/widget_test.mocks.dart

@@ -3,7 +3,7 @@
 // Do not manually edit this file.
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:app/home_page.dart' as _i2;
+import 'package:app/main.dart' as _i2;
 import 'package:mockito/mockito.dart' as _i1;
 
 // ignore_for_file: type=lint