redesing

Author: avdosev

lib/pages/article/article.dart

@@ -257,35 +257,47 @@ class ArticleView extends StatelessWidget {
   Widget build(BuildContext context) {
     final appSettings = context.watch<AppSettings>();
     final textAlign = appSettings.articleTextAlign;
+    const padding = EdgeInsets.symmetric(horizontal: 10);
     final listview = SingleChildScrollView(
-      padding: const EdgeInsets.all(10).copyWith(bottom: 20),
+      padding: const EdgeInsets.only(top: 10, bottom: 20),
       controller: controller,
       child: CenterAdaptiveConstrait(
         child: Column(
           children: [
-            ArticleInfo(
-              article: article,
+            Padding(
+              child: ArticleInfo(
+                article: article,
+              ),
+              padding: padding,
             ),
             SizedBox(
               height: 30,
             ),
-            HtmlView(article!.parsedBody, textAlign: textAlign),
+            HtmlView(
+              article!.parsedBody,
+              textAlign: textAlign,
+              imagesWithPadding: false,
+              padding: padding,
+            ),
             SizedBox(
               height: 20,
             ),
             InkWell(
               child: Padding(
-                  padding: const EdgeInsets.only(left: 5, top: 5, bottom: 5),
+                  padding: const EdgeInsets.only(left: 10, top: 5, bottom: 5),
                   child: MediumAuthorPreview(article!.author)),
               onTap: () =>
                   openUser(context, article!.author.alias), // open user page
             ),
             SizedBox(
               height: 20,
             ),
-            CommentsButton(
-              onPressed: () => openCommentsPage(context, article!.id),
-            )
+            Padding(
+              child: CommentsButton(
+                onPressed: () => openCommentsPage(context, article!.id),
+              ),
+              padding: padding,
+            ),
           ],
         ),
       ),

lib/pages/comments/comments.dart

@@ -114,9 +114,9 @@ class CommentView extends StatelessWidget {
     return Padding(
         padding: EdgeInsets.only(top: 5, bottom: 5),
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            Row(
+            Wrap(
               children: [
                 InkWell(
                   child: SmallAuthorPreview(comment.author!),
@@ -125,7 +125,8 @@ class CommentView extends StatelessWidget {
                 Text(dateToStr(
                     comment.timePublished!, Localizations.localeOf(context))),
               ],
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              alignment: WrapAlignment.spaceBetween,
             ),
             const SizedBox(
               height: 10,

lib/widgets/html_elements/highlight_code.dart

@@ -187,6 +187,8 @@ class _HighlightViewState extends State<_HighlightView> {
     }
 
     return Container(
+      constraints: BoxConstraints(
+          minWidth: MediaQuery.of(context).size.width.clamp(0, 880)),
       color:
           widget.theme![_rootKey]?.backgroundColor ?? _defaultBackgroundColor,
       padding: widget.padding,

lib/widgets/html_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_highlight/themes/paraiso-dark.dart';
 import 'package:habr_app/stores/app_settings.dart';
 import 'package:provider/provider.dart';
 import 'package:itertools/itertools.dart';
@@ -16,31 +17,59 @@ import 'package:habr_app/utils/log.dart';
 class HtmlView extends StatelessWidget {
   final view.Node node;
   final TextAlign? textAlign;
+  final bool imagesWithPadding;
+  final EdgeInsets? padding;
 
-  HtmlView(this.node, {this.textAlign});
+  HtmlView(
+    this.node, {
+    this.textAlign,
+    this.imagesWithPadding = true,
+    this.padding,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Column(
       children: inlineTree(
         node,
         context,
-        BuildParams(textAlign: textAlign),
+        BuildParams(
+          textAlign: textAlign,
+          imagesWithPadding: imagesWithPadding,
+          padding: padding,
+        ),
       ).toList(),
       crossAxisAlignment: CrossAxisAlignment.stretch,
     );
   }
 
-  HtmlView.unparsed(String? html, {this.textAlign})
-      : node = htmlAsParsedJson(html);
+  HtmlView.unparsed(
+    String? html, {
+    this.textAlign,
+    this.imagesWithPadding = false,
+    this.padding,
+  }) : node = htmlAsParsedJson(html);
 }
 
 class BuildParams {
   final TextAlign? textAlign;
+  final bool imagesWithPadding;
+  final EdgeInsets? padding;
 
-  BuildParams({this.textAlign});
+  BuildParams({
+    this.textAlign,
+    required this.imagesWithPadding,
+    this.padding,
+  });
 }
 
+Widget wrapPadding(Widget child, BuildParams params) => params.padding != null
+    ? Padding(
+        padding: params.padding!,
+        child: child,
+      )
+    : child;
+
 // may be null
 Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
   final type = element.type;
@@ -56,11 +85,13 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
   if (element is view.HeadLine) {
     final mode = HeadLineType.values[int.parse(element.mode.substring(1)) - 1];
     widget = HeadLine(text: element.text, type: mode);
+    widget = wrapPadding(widget, params);
   } else if (element is view.TextParagraph) {
     widget = Text(
       element.text,
       textAlign: params.textAlign,
     );
+    widget = wrapPadding(widget, params);
   } else if (element is view.Paragraph) {
     widget = Text.rich(
       TextSpan(
@@ -69,6 +100,7 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
               .toList()),
       textAlign: params.textAlign,
     );
+    widget = wrapPadding(widget, params);
   } else if (element is view.Scrollable) {
     widget = SingleChildScrollView(
       child: buildTree(element.child, context, params),
@@ -88,6 +120,12 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
         distance: 5,
       );
     }
+    if (params.imagesWithPadding) {
+      widget = Padding(
+        padding: params.padding!,
+        child: widget,
+      );
+    }
   } else if (element is view.Code) {
     final appSettings = Provider.of<AppSettings>(context, listen: false);
     widget = HighlightCode(
@@ -100,28 +138,33 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
     );
   } else if (element is view.BlockQuote) {
     widget = BlockQuote(child: buildTree(element.child, context, params));
+    widget = wrapPadding(widget, params);
   } else if (element is view.BlockList) {
     // TODO: ordered list
     widget = UnorderedList(
         children: element.children
             .map<Widget?>((li) => buildTree(li, context, params))
             .notNull
             .toList());
+    widget = wrapPadding(widget, params);
   } else if (element is view.BlockColumn) {
     widget = WrappedContainer(
         children: element.children
             .map<Widget?>((child) => buildTree(child, context, params))
             .notNull
             .toList());
+    widget = wrapPadding(widget, params);
   } else if (element is view.Details) {
     widget = Spoiler(
       title: element.title,
       child: buildTree(element.child, context, params),
     );
+    widget = wrapPadding(widget, params);
   } else if (element is view.Iframe) {
     widget = Iframe(
       src: element.src,
     );
+    widget = wrapPadding(widget, params);
   } else if (element is view.Table) {
     try {
       widget = Table(
@@ -141,6 +184,7 @@ Widget? buildTree(view.Node element, BuildContext context, BuildParams params) {
     } catch (err) {
       widget = Text("Unsupported table");
     }
+    widget = wrapPadding(widget, params);
   } else {
     logInfo("Not found case for $type");
   }
@@ -186,7 +230,8 @@ Iterable<Widget> inlineTree(
     }
   } else if (element is view.BlockList) {
     for (final item in element.children) {
-      yield UnorderedItem(child: buildTree(item, context, params)!);
+      yield wrapPadding(
+          UnorderedItem(child: buildTree(item, context, params)!), params);
     }
   } else {
     yield buildTree(element!, context, params)!;

lib/widgets/small_author_preview.dart

@@ -14,16 +14,21 @@ class SmallAuthorPreview extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final themeData = Theme.of(context);
-    return Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
-      AuthorAvatarIcon(
-        key: ValueKey('avatar_${author.avatar.hashCode}'),
-        avatar: author.avatar,
-        defaultColor: AvatarColorStore().getColor(author.alias, themeData.brightness),
-      ),
-      SizedBox(
-        width: 5,
-      ),
-      Text(author.alias, style: textStyle),
-    ]);
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        AuthorAvatarIcon(
+          key: ValueKey('avatar_${author.avatar.hashCode}'),
+          avatar: author.avatar,
+          defaultColor:
+              AvatarColorStore().getColor(author.alias, themeData.brightness),
+        ),
+        SizedBox(
+          width: 5,
+        ),
+        Text(author.alias, style: textStyle),
+      ],
+      mainAxisSize: MainAxisSize.min,
+    );
   }
 }

pubspec.yaml

@@ -28,11 +28,14 @@ dependencies:
   hive_flutter: ^1.1.0
   flutter_slidable: 0.6.0
   photo_view: ^0.13.0
-  path_provider: "^2.0.2"
+  path_provider: "^2.0.9"
   crypto: ">=2.1.5"
   provider: ^5.0.0
   itertools: ">=0.1.0"
 
+dependency_overrides:
+  platform: ^3.1.0
+
 dev_dependencies:
   flutter_test:
     sdk: flutter