Skip to content

feature: Rework responsive layout#217

Merged
PartyDonut merged 9 commits intodevelopfrom
feature/Improve-nested-ui
Feb 7, 2025
Merged

feature: Rework responsive layout#217
PartyDonut merged 9 commits intodevelopfrom
feature/Improve-nested-ui

Conversation

@PartyDonut
Copy link
Copy Markdown
Collaborator

Pull Request Description

This is a complete rework of the navigation stack. Fladder now no longer has separate routes for single/dual layouts. Everything is now responsive no matter the device

  • Rework responsive layout
  • Add option to enable/disable certain layouts
  • Small bugfixes

@PartyDonut PartyDonut added the feature New feature or request label Feb 7, 2025
@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai bot commented Feb 7, 2025

Reviewer's Guide by Sourcery

This pull request comprehensively reworks the app’s responsive layout and navigation behavior. The implementation shifts from a fixed notion of 'single/dual' layouts based on LayoutState and ScreenLayout to a more flexible model using ViewSize and LayoutMode. Changes propagate throughout routing, settings screens, and various UI components so that all views become responsive on every device irrespective of the original discrete layouts.

Class diagram for HomeSettingsModel updates

classDiagram
    class HomeSettingsModel {
      <<immutable>>
      Set~LayoutMode~ screenLayouts
      Set~ViewSize~ layoutStates
      HomeBanner homeBanner
      HomeCarouselSettings carouselSettings
      HomeNextUp nextUp
      +fromJson(json: Map)
      +toJson(): Map
      +copyWith(...): HomeSettingsModel
    }

    class LayoutMode {
      <<enumeration>>
      single
      dual
      +label(context): String
    }

    class ViewSize {
      <<enumeration>>
      phone
      tablet
      desktop
      +label(context): String
    }

    HomeSettingsModel --> LayoutMode : uses
    HomeSettingsModel --> ViewSize : uses

    note for HomeSettingsModel "Now includes new fields screenLayouts and layoutStates\nwith default values set to all possible enum values"

    class Utils {
      +selectAvailableOrSmaller<T>(value, availableOptions, allOptions): T
    }

    HomeSettingsModel ..> Utils : uses
Loading

File-Level Changes

Change Details Files
Refactored Adaptive Layout logic and enums
  • Replaced LayoutState and ScreenLayout with ViewSize and LayoutMode in AdaptiveLayout and associated utilities.
  • Updated AdaptiveLayout.of() and related helper methods to use the new enums, ensuring consistent responsive behavior.
  • Modified the build methods in various widgets to use AdaptiveLayout.viewSizeOf(context) and AdaptiveLayout.layoutModeOf(context) for layout checks.
lib/util/adaptive_layout.dart
lib/models/settings/home_settings_model.dart
lib/models/settings/home_settings_model.freezed.dart
lib/models/settings/home_settings_model.g.dart
Updated Navigation and Routing Mechanism
  • Refactored auto-router files (auto_router.gr.dart and auto_router.dart) to accommodate updated responsive rules and new SettingsSelectionRoute.
  • Changed navigation logic in settings scaffolds and navigation drawer to leverage the new responsive enums.
  • Unified router configuration and removed duplicate navigation routes for single/dual layouts.
lib/routes/auto_router.gr.dart
lib/routes/auto_router.dart
lib/screens/settings/settings_screen.dart
lib/widgets/navigation_scaffold/components/navigation_drawer.dart
lib/widgets/navigation_scaffold/navigation_scaffold.dart
Overhauled Settings Screens and Client Settings Sections
  • Modified client settings page to remove obsolete controllers and layout-specific branches and replaced them with calls to build helper functions.
  • Introduced new client settings sub-section files such as client_settings_visual.dart, client_settings_download.dart, client_settings_theme.dart, client_settings_dashboard.dart, and client_settings_advanced.dart.
  • Updated settings scaffold and related components (like SettingsListTile) to uniformly react to the new responsive layout model.
lib/screens/settings/client_settings_page.dart
lib/screens/settings/client_sections/client_settings_visual.dart
lib/screens/settings/client_sections/client_settings_download.dart
lib/screens/settings/client_sections/client_settings_theme.dart
lib/screens/settings/client_sections/client_settings_dashboard.dart
lib/screens/settings/client_sections/client_settings_advanced.dart
lib/screens/settings/settings_selection_screen.dart
lib/screens/settings/settings_scaffold.dart
lib/screens/settings/security_settings_page.dart
lib/screens/settings/player_settings_page.dart
Applied UI refinements and responsive adjustments across multiple screens
  • Modified UI components in book viewer controls, home screen, library search, details screens, favourites screen and others to ensure proper padding, spacing, and widget visibility based on device screen size.
  • Adjusted widget conditions such as showing/hiding app bars, navigation rails, and bottom sheets according to the new ViewSize and LayoutMode.
  • Fixed minor bugs and visual inconsistencies in components like HideOnScroll, poster widgets, and category chips.
lib/screens/book_viewer/book_viewer_controls.dart
lib/screens/home_screen.dart
lib/widgets/navigation_scaffold/components/navigation_body.dart
lib/widgets/shared/hide_on_scroll.dart
lib/screens/syncing/synced_screen.dart
lib/screens/library_search/library_search_screen.dart
lib/screens/details_screens/*
lib/screens/favourites/favourites_screen.dart
lib/screens/library/tabs/timeline_tab.dart
lib/widgets/shared/modal_bottom_sheet.dart
lib/screens/dashboard/dashboard_screen.dart
lib/screens/shared/media/poster_widget.dart
lib/screens/shared/nested_scaffold.dart
lib/screens/shared/chips/category_chip.dart

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @PartyDonut - I've reviewed your changes - here's some feedback:

Overall Comments:

  • Consider caching extracted values from AdaptiveLayout (like viewSize and layoutMode) early in build to reduce repeated method calls.
  • Ensure consistent usage of the new AdaptiveLayout methods (viewSizeOf and layoutModeOf) instead of mixing with the old AdaptiveLayout.of patterns.
  • Extract common dialog and onTap patterns in client settings sections to simplify and reduce repetitive boilerplate code.
Here's what I looked at during the review
  • 🟡 General issues: 3 issues found
  • 🟢 Security: all looks good
  • 🟢 Review instructions: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

import 'package:fladder/widgets/shared/fladder_slider.dart';

List<Widget> buildClientSettingsVisual(BuildContext context, WidgetRef ref) {
late final nextUpDaysEditor = TextEditingController(
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider moving TextEditingController initialization out of the build method.

Instantiating controllers within build() causes them to be recreated on every rebuild, which can lead to loss of user input and unnecessary object creation. Consider moving them to a stateful widget’s initState and disposing them appropriately.

Suggested implementation:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class ClientSettingsVisual extends ConsumerStatefulWidget {
  const ClientSettingsVisual({Key? key}) : super(key: key);

  @override
  ClientSettingsVisualState createState() => ClientSettingsVisualState();
}

class ClientSettingsVisualState extends ConsumerState<ClientSettingsVisual> {
  late final TextEditingController nextUpDaysEditor;

  @override
  void initState() {
    super.initState();
    // Initialize the controller only once.
    nextUpDaysEditor = TextEditingController(
      text: ref.read(clientSettingsProvider.select((value) => value.nextUpDateCutoff?.inDays ?? 14)).toString(),
    );
  }

  @override
  void dispose() {
    // Dispose the controller to release resources.
    nextUpDaysEditor.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Build the widget tree. Replace the Container with your actual UI.
    return Container(
      // Example widget tree using nextUpDaysEditor.
      child: Column(
        children: [
          TextField(controller: nextUpDaysEditor),
          // ... add additional widgets as needed ...
        ],
      ),
    );
  }
}

After these changes, update any code that previously called buildClientSettingsVisual(...) to instead use the new ClientSettingsVisual widget. This ensures that use of the TextEditingController is managed correctly and avoids recreating it on every rebuild.

import 'package:auto_route/auto_route.dart';

@RoutePage()
class SettingsSelectionScreen extends StatelessWidget {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Empty SettingsSelectionScreen detected.

The screen currently renders an empty SizedBox. Confirm if this is intended as a placeholder for future settings selection functionality or if additional UI should be implemented.

import 'package:fladder/util/localization_helper.dart';
import 'package:fladder/util/option_dialogue.dart';

List<Widget> buildClientSettingsAdavanced(BuildContext context, WidgetRef ref) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (typo): Typo in function name: 'buildClientSettingsAdavanced'.

Renaming this function to 'buildClientSettingsAdvanced' would improve code clarity and consistency.

Suggested change
List<Widget> buildClientSettingsAdavanced(BuildContext context, WidgetRef ref) {
List<Widget> buildClientSettingsAdvanced(BuildContext context, WidgetRef ref) {

@PartyDonut PartyDonut merged commit 8012fdc into develop Feb 7, 2025
1 check passed
@PartyDonut PartyDonut deleted the feature/Improve-nested-ui branch February 7, 2025 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant