Skip to content

Commit 66bc381

Browse files
LuchoTurtleLuchoTurtle
committed
fix: Simplifying universalUI and using responsive_framework to show images responsively. #1 
1 parent b04f7c9 commit 66bc381

File tree

6 files changed

+75
-122
lines changed

6 files changed

+75
-122
lines changed

‎lib/home_page.dart

+42-40
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
import 'dart:async';
2-
import 'dart:convert';
32
import 'dart:io';
43
import 'dart:ui';
54

65
import 'package:file_picker/file_picker.dart';
7-
import 'package:filesystem_picker/filesystem_picker.dart';
86
import 'package:flutter/foundation.dart';
97
import 'package:flutter/material.dart';
10-
import 'package:flutter/services.dart';
118
import 'package:flutter_quill/extensions.dart';
129
import 'package:flutter_quill/flutter_quill.dart' hide Text;
1310
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
1411
import 'package:path/path.dart';
1512
import 'package:path_provider/path_provider.dart';
16-
import 'package:mime/mime.dart';
1713

1814
import 'web_embeds.dart';
1915

@@ -24,6 +20,8 @@ enum _SelectionType {
2420
}
2521

2622
class HomePage extends StatefulWidget {
23+
const HomePage({super.key});
24+
2725
@override
2826
_HomePageState createState() => _HomePageState();
2927
}
@@ -74,7 +72,7 @@ class _HomePageState extends State<HomePage> {
7472
),
7573
),
7674
icon: const Icon(Icons.text_fields_rounded),
77-
)
75+
),
7876
],
7977
),
8078
body: _buildWelcomeEditor(context),
@@ -148,15 +146,16 @@ class _HomePageState extends State<HomePage> {
148146
},
149147
customStyles: DefaultStyles(
150148
h1: DefaultTextBlockStyle(
151-
const TextStyle(
152-
fontSize: 32,
153-
color: Colors.black,
154-
height: 1.15,
155-
fontWeight: FontWeight.w300,
156-
),
157-
const VerticalSpacing(16, 0),
158-
const VerticalSpacing(0, 0),
159-
null),
149+
const TextStyle(
150+
fontSize: 32,
151+
color: Colors.black,
152+
height: 1.15,
153+
fontWeight: FontWeight.w300,
154+
),
155+
const VerticalSpacing(16, 0),
156+
const VerticalSpacing(0, 0),
157+
null,
158+
),
160159
sizeSmall: const TextStyle(fontSize: 9),
161160
subscript: const TextStyle(
162161
fontFamily: 'SF-UI-Display',
@@ -171,32 +170,34 @@ class _HomePageState extends State<HomePage> {
171170
);
172171
if (kIsWeb) {
173172
quillEditor = QuillEditor(
174-
controller: _controller!,
175-
scrollController: ScrollController(),
176-
scrollable: true,
177-
focusNode: _focusNode,
178-
autoFocus: false,
179-
readOnly: false,
180-
placeholder: 'Add content',
181-
expands: false,
182-
padding: EdgeInsets.zero,
183-
onTapUp: (details, p1) {
184-
return _onTripleClickSelection();
185-
},
186-
customStyles: DefaultStyles(
187-
h1: DefaultTextBlockStyle(
188-
const TextStyle(
189-
fontSize: 32,
190-
color: Colors.black,
191-
height: 1.15,
192-
fontWeight: FontWeight.w300,
193-
),
194-
const VerticalSpacing(16, 0),
195-
const VerticalSpacing(0, 0),
196-
null),
197-
sizeSmall: const TextStyle(fontSize: 9),
173+
controller: _controller!,
174+
scrollController: ScrollController(),
175+
scrollable: true,
176+
focusNode: _focusNode,
177+
autoFocus: false,
178+
readOnly: false,
179+
placeholder: 'Add content',
180+
expands: false,
181+
padding: EdgeInsets.zero,
182+
onTapUp: (details, p1) {
183+
return _onTripleClickSelection();
184+
},
185+
customStyles: DefaultStyles(
186+
h1: DefaultTextBlockStyle(
187+
const TextStyle(
188+
fontSize: 32,
189+
color: Colors.black,
190+
height: 1.15,
191+
fontWeight: FontWeight.w300,
192+
),
193+
const VerticalSpacing(16, 0),
194+
const VerticalSpacing(0, 0),
195+
null,
198196
),
199-
embedBuilders: [...defaultEmbedBuildersWeb]);
197+
sizeSmall: const TextStyle(fontSize: 9),
198+
),
199+
embedBuilders: [...defaultEmbedBuildersWeb],
200+
);
200201
}
201202

202203
const toolbarIconSize = 18.0;
@@ -274,7 +275,7 @@ class _HomePageState extends State<HomePage> {
274275
child: quillEditor,
275276
),
276277
),
277-
Container(child: toolbar)
278+
Container(child: toolbar),
278279
],
279280
),
280281
);
@@ -284,6 +285,7 @@ class _HomePageState extends State<HomePage> {
284285
// You can also upload the picked image to any server (eg : AWS s3
285286
// or Firebase) and then return the uploaded image URL.
286287
Future<String> _onImagePickCallback(File file) async {
288+
//return "https://d3vhc53cl8e8km.cloudfront.net/artists/220/e16cb080-cb30-11ec-b991-0ee6b8365494.jpg";
287289
if (!kIsWeb) {
288290
// Copies the picked file from temporary cache to applications directory
289291
final appDocDir = await getApplicationDocumentsDirectory();

‎lib/main.dart

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:app/home_page.dart';
22
import 'package:flutter/material.dart';
3+
import 'package:responsive_framework/responsive_framework.dart';
34

45
// coverage:ignore-start
56
void main() {
@@ -15,11 +16,20 @@ class MyApp extends StatelessWidget {
1516
Widget build(BuildContext context) {
1617
return MaterialApp(
1718
title: 'Flutter Demo',
19+
builder: (context, child) => ResponsiveBreakpoints.builder(
20+
child: child!,
21+
breakpoints: [
22+
const Breakpoint(start: 0, end: 425, name: MOBILE),
23+
const Breakpoint(start: 426, end: 768, name: TABLET),
24+
const Breakpoint(start: 769, end: 1440, name: DESKTOP),
25+
const Breakpoint(start: 1441, end: double.infinity, name: '4K'),
26+
],
27+
),
1828
theme: ThemeData(
1929
colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
2030
useMaterial3: true,
2131
),
22-
home: HomePage(),
32+
home: const HomePage(),
2333
);
2434
}
2535
}

‎lib/responsive_widget.dart

-43
This file was deleted.

‎lib/web_embeds.dart

+13-38
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import 'package:flutter/cupertino.dart';
2+
import 'package:flutter/foundation.dart';
23
import 'package:flutter_quill/flutter_quill.dart';
34
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
5+
import 'package:responsive_framework/responsive_framework.dart';
46
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
7+
import 'package:universal_html/html.dart' as html;
58

6-
import 'responsive_widget.dart';
9+
import 'dart:ui_web' as ui_web;
710

811
class ImageEmbedBuilderWeb extends EmbedBuilder {
912
@override
@@ -24,12 +27,17 @@ class ImageEmbedBuilderWeb extends EmbedBuilder {
2427
return const SizedBox();
2528
}
2629
final size = MediaQuery.of(context).size;
27-
30+
ui_web.platformViewRegistry.registerViewFactory(imageUrl, (viewId) {
31+
return html.ImageElement()
32+
..src = imageUrl
33+
..style.height = 'auto'
34+
..style.width = 'auto';
35+
});
2836
return Padding(
2937
padding: EdgeInsets.only(
30-
right: ResponsiveWidget.isMediumScreen(context)
38+
right: ResponsiveBreakpoints.of(context).smallerThan(TABLET)
3139
? size.width * 0.5
32-
: (ResponsiveWidget.isLargeScreen(context))
40+
: (ResponsiveBreakpoints.of(context).equals('4K'))
3341
? size.width * 0.75
3442
: size.width * 0.2,
3543
),
@@ -43,39 +51,6 @@ class ImageEmbedBuilderWeb extends EmbedBuilder {
4351
}
4452
}
4553

46-
class VideoEmbedBuilderWeb extends EmbedBuilder {
47-
@override
48-
String get key => BlockEmbed.videoType;
49-
50-
@override
51-
Widget build(
52-
BuildContext context,
53-
QuillController controller,
54-
Embed node,
55-
bool readOnly,
56-
bool inline,
57-
TextStyle textStyle,
58-
) {
59-
var videoUrl = node.value.data;
60-
if (videoUrl.contains('youtube.com') || videoUrl.contains('youtu.be')) {
61-
final youtubeID = YoutubePlayer.convertUrlToId(videoUrl);
62-
if (youtubeID != null) {
63-
videoUrl = 'https://www.youtube.com/embed/$youtubeID';
64-
}
65-
}
66-
67-
68-
69-
return SizedBox(
70-
height: 500,
71-
child: HtmlElementView(
72-
viewType: videoUrl,
73-
),
74-
);
75-
}
76-
}
77-
7854
List<EmbedBuilder> get defaultEmbedBuildersWeb => [
7955
ImageEmbedBuilderWeb(),
80-
VideoEmbedBuilderWeb(),
81-
];
56+
];

‎pubspec.lock

+8
Original file line numberDiff line numberDiff line change
@@ -637,6 +637,14 @@ packages:
637637
url: "https://pub.dev"
638638
source: hosted
639639
version: "3.2.1"
640+
responsive_framework:
641+
dependency: "direct main"
642+
description:
643+
name: responsive_framework
644+
sha256: "97d4a8b9468c0ecaafe8566645d70cc59480e4b03704a1b936396e68775e2c34"
645+
url: "https://pub.dev"
646+
source: hosted
647+
version: "1.1.0"
640648
sky_engine:
641649
dependency: transitive
642650
description: flutter

‎pubspec.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ dependencies:
4040
file_picker: ^5.3.3
4141
filesystem_picker: ^3.1.0
4242
universal_io: ^2.2.2
43+
responsive_framework: ^1.1.0
4344

4445
dev_dependencies:
4546
flutter_test:

0 commit comments

Comments
 (0)