improve ui

android/app/src/main/res/values/styles.xml

@@ -14,5 +14,7 @@
          This Theme is only used starting with V2 of Flutter's Android embedding. -->
     <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
         <item name="android:windowBackground">?android:colorBackground</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
     </style>
 </resources>

lib/components/appbar.dart

@@ -296,7 +296,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
       padding: tabPadding,
       radius: tabRadius,
     );
-    if (old != null) {
+    if (old != null && old.offsets != null && old.itemHeight != null) {
       painter!.update(old.offsets!, old.itemHeight!);
     }
   }

lib/components/message.dart

@@ -262,6 +262,8 @@ class ContentDialog extends StatelessWidget {
       insetPadding: context.width < 400
           ? const EdgeInsets.symmetric(horizontal: 4)
           : const EdgeInsets.symmetric(horizontal: 16),
+      elevation: 2,
+      shadowColor: context.colorScheme.shadow,
       child: IntrinsicWidth(
         child: ConstrainedBox(
           constraints: BoxConstraints(

lib/components/navigation_bar.dart

@@ -127,15 +127,15 @@ class _NaviPaneState extends State<NaviPane>
       }
       if (target == 1) {
         StateController.find<NaviPaddingWidgetController>()
-            .setWithPadding(true, true);
+            .setWithPadding(true, true, true);
         controller.value = target;
       } else if (controller.value == 1 && target == 0) {
         StateController.findOrNull<NaviPaddingWidgetController>()
-            ?.setWithPadding(false, false);
+            ?.setWithPadding(false, false, false);
         controller.value = target;
       } else {
         StateController.findOrNull<NaviPaddingWidgetController>()
-            ?.setWithPadding(true, false);
+            ?.setWithPadding(true, false, false);
         controller.animateTo(target);
       }
       animationTarget = target;
@@ -660,9 +660,13 @@ class NaviPaddingWidgetController extends StateController {
 
   bool _withTopBarPadding = false;
 
-  void setWithPadding(bool withPadding, bool withAppbarPadding) {
+  bool _withBottomBarPadding = false;
+
+  void setWithPadding(
+      bool withPadding, bool withAppbarPadding, bool withBottomBarPadding) {
     _withPadding = withPadding;
     _withTopBarPadding = withAppbarPadding;
+    _withBottomBarPadding = withBottomBarPadding;
     update();
   }
 }
@@ -683,8 +687,10 @@ class NaviPaddingWidget extends StatelessWidget {
                       (controller._withTopBarPadding
                           ? _NaviPaneState._kTopBarHeight
                           : 0),
-                  bottom:
+                  bottom: context.padding.bottom +
-                      _NaviPaneState._kBottomBarHeight + context.padding.bottom,
+                      (controller._withBottomBarPadding
+                          ? _NaviPaneState._kBottomBarHeight
+                          : 0),
                 )
               : EdgeInsets.zero,
           child: child,

lib/components/scroll.dart

@@ -55,7 +55,7 @@ class _SmoothScrollProviderState extends State<SmoothScrollProvider> {
       return widget.builder(
         context,
         _controller,
-        const ClampingScrollPhysics(),
+        const BouncingScrollPhysics(),
       );
     }
     return Listener(
@@ -93,7 +93,7 @@ class _SmoothScrollProviderState extends State<SmoothScrollProvider> {
         _controller,
         _isMouseScroll
             ? const NeverScrollableScrollPhysics()
-            : const ClampingScrollPhysics(),
+            : const BouncingScrollPhysics(),
       ),
     );
   }

lib/foundation/appdata.dart

@@ -51,9 +51,9 @@ class _Appdata {
       return;
     }
     var json = jsonDecode(await file.readAsString());
-    for(var key in json['settings'].keys) {
+    for(var key in (json['settings'] as Map<String, dynamic>).keys) {
-      if(json[key] != null) {
+      if(json['settings'][key] != null) {
-        settings[key] = json[key];
+        settings[key] = json['settings'][key];
       }
     }
     searchHistory = List.from(json['searchHistory']);

lib/main.dart

@@ -56,6 +56,7 @@ class _MyAppState extends State<MyApp> {
   @override
   void initState() {
     App.registerForceRebuild(forceRebuild);
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
     super.initState();
   }
 

lib/pages/comic_page.dart

@@ -74,6 +74,7 @@ class _ComicPageState extends LoadingState<ComicPage, ComicDetails>
         buildChapters(),
         buildThumbnails(),
         buildRecommend(),
+        SliverPadding(padding: EdgeInsets.only(bottom: context.padding.bottom)),
       ],
     );
   }
@@ -109,6 +110,8 @@ class _ComicPageState extends LoadingState<ComicPage, ComicDetails>
       ],
     );
 
+    yield const SliverPadding(padding: EdgeInsets.only(top: 8));
+
     yield Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [

lib/pages/comic_source_page.dart

@@ -243,7 +243,7 @@ class _BodyState extends State<_Body> {
                   .paddingBottom(32),
               Row(
                 children: [
-                  TextButton(onPressed: chooseFile, child: Text("Choose file".tl))
+                  TextButton(onPressed: selectFile, child: Text("Select file".tl))
                       .paddingLeft(8),
                   const Spacer(),
                   TextButton(
@@ -265,7 +265,7 @@ class _BodyState extends State<_Body> {
     );
   }
 
-  void chooseFile() async {
+  void selectFile() async {
     final result = await FilePicker.platform.pickFiles(
       type: FileType.custom,
       allowedExtensions: ['js'],

lib/pages/reader/comic_image.dart

@@ -260,7 +260,8 @@ class _ComicImageState extends State<ComicImage> with WidgetsBindingObserver {
     if (_lastException != null) {
       // display error and retry button on screen
       return SizedBox(
-        height: 300,
+        height: widget.height == null ? 300 : null,
+        width: widget.width == null ? 300 : null,
         child: Center(
           child: SizedBox(
             height: 300,
@@ -295,87 +296,92 @@ class _ComicImageState extends State<ComicImage> with WidgetsBindingObserver {
       );
     }
 
-    var width = widget.width??MediaQuery.of(context).size.width;
+    return LayoutBuilder(builder: (context, constrains) {
-    double? height;
+      var width = widget.width;
+      var height = widget.height;
 
-    Size? cacheSize = _cache[widget.image.hashCode];
+      if(_imageInfo != null) {
-    if(cacheSize != null){
+        // Record the height and the width of the image
-      height = cacheSize.height * (width / cacheSize.width);
+        _cache[widget.image.hashCode] = Size(
-      height = height.ceilToDouble();
+            _imageInfo!.image.width.toDouble(),
-    }
+            _imageInfo!.image.height.toDouble()
-
-    var brightness = Theme.of(context).brightness;
-
-    if(_imageInfo != null){
-      // Record the height and the width of the image
-      _cache[widget.image.hashCode] = Size(
-          _imageInfo!.image.width.toDouble(),
-          _imageInfo!.image.height.toDouble()
-      );
-      // build image
-      Widget result = RawImage(
-        // Do not clone the image, because RawImage is a stateless wrapper.
-        // The image will be disposed by this state object when it is not needed
-        // anymore, such as when it is unmounted or when the image stream pushes
-        // a new image.
-        image: _imageInfo?.image,
-        debugImageLabel: _imageInfo?.debugLabel,
-        width: width,
-        height: height,
-        scale: _imageInfo?.scale ?? 1.0,
-        color: widget.color,
-        opacity: widget.opacity,
-        colorBlendMode: widget.colorBlendMode,
-        fit: widget.fit,
-        alignment: widget.alignment,
-        repeat: widget.repeat,
-        centerSlice: widget.centerSlice,
-        matchTextDirection: widget.matchTextDirection,
-        invertColors: _invertColors,
-        isAntiAlias: widget.isAntiAlias,
-        filterQuality: widget.filterQuality,
-      );
-
-      if (!widget.excludeFromSemantics) {
-        result = Semantics(
-          container: widget.semanticLabel != null,
-          image: true,
-          label: widget.semanticLabel ?? '',
-          child: result,
         );
       }
-      result = SizedBox(
+
-        width: width,
+      Size? cacheSize = _cache[widget.image.hashCode];
-        height: height,
+      if(cacheSize != null){
-        child: Center(
+        if(width == double.infinity) {
-          child: result,
+          width = constrains.maxWidth;
-        ),
+          height = width * cacheSize.height / cacheSize.width;
-      );
+        } else if(height == double.infinity) {
-      return result;
+          height = constrains.maxHeight;
-    } else {
+          width = height * cacheSize.width / cacheSize.height;
-      // build progress
+        }
-      return SizedBox(
+      }
-        width: width,
+
-        height: height??300,
+      if(_imageInfo != null){
-        child: Center(
+        // build image
-          child: SizedBox(
+        Widget result = RawImage(
-            width: 24,
+          // Do not clone the image, because RawImage is a stateless wrapper.
-            height: 24,
+          // The image will be disposed by this state object when it is not needed
-            child: CircularProgressIndicator(
+          // anymore, such as when it is unmounted or when the image stream pushes
-              backgroundColor: brightness == Brightness.dark
+          // a new image.
-                  ? Colors.white24
+          image: _imageInfo?.image,
-                  : Colors.black12,
+          debugImageLabel: _imageInfo?.debugLabel,
-              strokeWidth: 3,
+          width: width,
-              value: (_loadingProgress != null &&
+          height: height,
-                  _loadingProgress!.expectedTotalBytes!=null &&
+          scale: _imageInfo?.scale ?? 1.0,
-                  _loadingProgress!.expectedTotalBytes! != 0)
+          color: widget.color,
-                  ?_loadingProgress!.cumulativeBytesLoaded / _loadingProgress!.expectedTotalBytes!
+          opacity: widget.opacity,
-                  :0,
+          colorBlendMode: widget.colorBlendMode,
+          fit: widget.fit,
+          alignment: widget.alignment,
+          repeat: widget.repeat,
+          centerSlice: widget.centerSlice,
+          matchTextDirection: widget.matchTextDirection,
+          invertColors: _invertColors,
+          isAntiAlias: widget.isAntiAlias,
+          filterQuality: widget.filterQuality,
+        );
+
+        if (!widget.excludeFromSemantics) {
+          result = Semantics(
+            container: widget.semanticLabel != null,
+            image: true,
+            label: widget.semanticLabel ?? '',
+            child: result,
+          );
+        }
+        result = SizedBox(
+          width: width,
+          height: height,
+          child: Center(
+            child: result,
+          ),
+        );
+        return result;
+      } else {
+        // build progress
+        return SizedBox(
+          width: width,
+          height: height,
+          child: Center(
+            child: SizedBox(
+              width: 24,
+              height: 24,
+              child: CircularProgressIndicator(
+                strokeWidth: 3,
+                value: (_loadingProgress != null &&
+                    _loadingProgress!.expectedTotalBytes!=null &&
+                    _loadingProgress!.expectedTotalBytes! != 0)
+                    ?_loadingProgress!.cumulativeBytesLoaded / _loadingProgress!.expectedTotalBytes!
+                    :0,
+              ),
             ),
           ),
-        ),
+        );
-      );
+      }
-    }
+    });
   }
 
   @override

lib/pages/reader/images.dart

@@ -258,7 +258,7 @@ class _GalleryModeState extends State<_GalleryMode>
         event.logicalKey == LogicalKeyboardKey.arrowRight) {
       forward = false;
     }
-    if(event is KeyDownEvent || event is KeyRepeatEvent) {
+    if (event is KeyDownEvent || event is KeyRepeatEvent) {
       if (forward == true) {
         controller.nextPage(
           duration: const Duration(milliseconds: 200),
@@ -371,13 +371,12 @@ class _ContinuousModeState extends State<_ContinuousMode>
         if (index == 0 || index == reader.maxPage + 1) {
           return const SizedBox();
         }
-        double width = MediaQuery.of(context).size.width;
+        double? width, height;
-        double height = MediaQuery.of(context).size.height;
+        if (reader.mode == ReaderMode.continuousLeftToRight ||
-
+            reader.mode == ReaderMode.continuousRightToLeft) {
-        double imageWidth = width;
+          height = double.infinity;
-
+        } else {
-        if (height / width < 1.2) {
+          width = double.infinity;
-          imageWidth = height / 1.2;
         }
 
         _precacheImage(index, context);
@@ -387,9 +386,9 @@ class _ContinuousModeState extends State<_ContinuousMode>
         return ComicImage(
           filterQuality: FilterQuality.medium,
           image: image,
-          width: imageWidth,
+          width: width,
-          height: imageWidth * 1.2,
+          height: height,
-          fit: BoxFit.cover,
+          fit: BoxFit.contain,
         );
       },
       scrollBehavior: const MaterialScrollBehavior()
@@ -420,10 +419,10 @@ class _ContinuousModeState extends State<_ContinuousMode>
           return;
         }
         if (scrollController.offset !=
-            scrollController.position.maxScrollExtent &&
+                scrollController.position.maxScrollExtent &&
             scrollController.offset !=
                 scrollController.position.minScrollExtent) {
-          if(reader.mode == ReaderMode.continuousTopToBottom) {
+          if (reader.mode == ReaderMode.continuousTopToBottom) {
             value = Offset(value.dx, 0);
           } else {
             value = Offset(0, value.dy);

lib/pages/reader/reader.dart

@@ -102,7 +102,9 @@ class _ReaderState extends State<Reader> with _ReaderLocation, _ReaderWindow {
     chapter = widget.initialChapter ?? 1;
     mode = ReaderMode.fromKey(appdata.settings['readerMode']);
     history = widget.history;
-    updateHistory();
+    Future.microtask(() {
+      updateHistory();
+    });
     super.initState();
   }