sample_browser.dart

/// dart imports
import 'dart:io' show Platform;

/// package imports
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_localizations/syncfusion_localizations.dart';
import 'package:url_launcher/url_launcher.dart';

///Local imports
import 'model/helper.dart';
import 'model/model.dart';
import 'model/web_view.dart';
import 'showcase_samples/expense_tracker/base.dart';
import 'widgets/animate_opacity_widget.dart';
import 'widgets/search_bar.dart';

/// Root widget of the sample browser.
/// Contains the Homepage wrapped with a MaterialApp widget.
class SampleBrowser extends StatefulWidget {
  /// Creates sample browser widget.
  const SampleBrowser();

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

class _SampleBrowserState extends State<SampleBrowser> {
  late SampleModel _sampleListModel;
  bool _isMaterial3 = true;
  Brightness? _brightness;
  late GlobalKey initialKey;

  void _refresh(bool isMaterial3, Brightness brightness) {
    setState(() {
      // To refresh the app when switching M2 and M3 theme.
      _isMaterial3 = isMaterial3;
      _brightness = brightness;
    });
  }

  /// Add the palette colors
  void _addColors() {
    _sampleListModel.paletteColors.add(Colors.transparent);
    _sampleListModel.paletteColors.add(const Color.fromRGBO(230, 74, 25, 1));
    _sampleListModel.paletteColors.add(const Color.fromRGBO(216, 27, 96, 1));
    _sampleListModel.paletteColors.add(const Color.fromRGBO(2, 137, 123, 1));

    _sampleListModel.paletteColorsM3.add(const Color(0xff65558f));
    _sampleListModel.paletteColorsM3.add(const Color(0xff8f4b38));
    _sampleListModel.paletteColorsM3.add(const Color(0xff8e4958));
    _sampleListModel.paletteColorsM3.add(const Color(0xff006b5f));

    _sampleListModel.darkPaletteColors.add(Colors.transparent);
    _sampleListModel.darkPaletteColors.add(
      const Color.fromRGBO(255, 110, 64, 1),
    );
    _sampleListModel.darkPaletteColors.add(
      const Color.fromRGBO(238, 79, 132, 1),
    );
    _sampleListModel.darkPaletteColors.add(
      const Color.fromRGBO(29, 233, 182, 1),
    );

    _sampleListModel.darkPaletteColorsM3.add(const Color(0xffd0bcfe));
    _sampleListModel.darkPaletteColorsM3.add(const Color(0xffffb5a0));
    _sampleListModel.darkPaletteColorsM3.add(const Color(0xffffb2bf));
    _sampleListModel.darkPaletteColorsM3.add(const Color(0xff82d5c7));
  }

  void _updateBaseColor(ThemeData themeData) {
    _sampleListModel.paletteColors[0] = themeData.colorScheme.primary;
    _sampleListModel.darkPaletteColors[0] = themeData.colorScheme.primary;
    if (themeData.colorScheme.brightness == Brightness.light) {
      _sampleListModel.paletteBorderColors[selectedColorPaletteIndex] =
          _sampleListModel.paletteColors[selectedColorPaletteIndex];
      _sampleListModel.paletteBorderColorsM3[selectedColorPaletteIndex] =
          _sampleListModel.paletteColorsM3[selectedColorPaletteIndex];
    } else {
      _sampleListModel.paletteBorderColors[selectedColorPaletteIndex] =
          _sampleListModel.darkPaletteColors[selectedColorPaletteIndex];
      _sampleListModel.paletteBorderColorsM3[selectedColorPaletteIndex] =
          _sampleListModel.darkPaletteColorsM3[selectedColorPaletteIndex];
    }
  }

  @override
  void initState() {
    initialKey = GlobalKey<State>();
    _sampleListModel = SampleModel.instance;
    _addColors();
    _initializeProperties();
    _sampleListModel.searchBar = CustomSearchBar(
      key: GlobalKey<SearchBarState>(),
      sampleListModel: _sampleListModel,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (_brightness == null) {
      if (_sampleListModel.isWebFullView) {
        _brightness ??= Brightness.light;
      } else {
        final Brightness platformBrightness = MediaQuery.platformBrightnessOf(
          context,
        );
        _sampleListModel.systemTheme =
            platformBrightness == Brightness.light
                ? ThemeData.light(useMaterial3: _isMaterial3)
                : ThemeData.dark(useMaterial3: _isMaterial3);
        _brightness ??= _sampleListModel.systemTheme.brightness;
      }
    }
    ThemeData themeData =
        _brightness == Brightness.light
            ? ThemeData.light(useMaterial3: _isMaterial3)
            : ThemeData.dark(useMaterial3: _isMaterial3);
    _updateBaseColor(themeData);
    themeData = _themeData(
      _sampleListModel.paletteColors[selectedColorPaletteIndex],
    );
    _sampleListModel.primaryColor = themeData.colorScheme.primary;
    final Map<String, WidgetBuilder> navigationRoutes = <String, WidgetBuilder>{
      _sampleListModel.isWebFullView ? '/' : '/demos':
          (BuildContext context) => HomePage(refresh: _refresh),
    };
    for (int i = 0; i < _sampleListModel.routes!.length; i++) {
      final SampleRoute sampleRoute = _sampleListModel.routes![i];
      WidgetCategory? category;
      for (int j = 0; j < _sampleListModel.categoryList.length; j++) {
        if (sampleRoute.subItem!.categoryName ==
            _sampleListModel.categoryList[j].categoryName) {
          category = _sampleListModel.categoryList[j];
          break;
        }
      }

      navigationRoutes[sampleRoute.routeName!] =
          (BuildContext context) => WebLayoutPage(
            key: initialKey,
            routeName: sampleRoute.routeName,
            sampleModel: _sampleListModel,
            category: category,
            subItem: sampleRoute.subItem,
            refresh: _refresh,
          );
    }

    _sampleListModel.themeData = _themeData(_sampleListModel.primaryColor);
    _sampleListModel.changeTheme(
      _sampleListModel.themeData,
      _sampleListModel.themeData.useMaterial3,
    );
    _sampleListModel.searchBar = CustomSearchBar(
      key: GlobalKey<SearchBarState>(),
      sampleListModel: _sampleListModel,
    );

    /// Avoiding page popping on escape key press.
    final Map<ShortcutActivator, Intent> shortcuts =
        Map<ShortcutActivator, Intent>.of(WidgetsApp.defaultShortcuts)
          ..remove(LogicalKeySet(LogicalKeyboardKey.escape));
    if (_sampleListModel.isWebFullView) {
      return _buildWebOrDesktopView(shortcuts, navigationRoutes);
    } else {
      return _buildMobileView(navigationRoutes);
    }
  }

  MaterialApp _buildWebOrDesktopView(
    Map<ShortcutActivator, Intent> shortcuts,
    Map<String, WidgetBuilder> navigationRoutes,
  ) {
    return MaterialApp(
      shortcuts: shortcuts,
      initialRoute: '/',
      routes: navigationRoutes,
      // ignore: always_specify_types
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        SfGlobalLocalizations.delegate,
      ],
      supportedLocales: const <Locale>[Locale('en', 'US'), Locale('ar', 'AE')],
      locale: const Locale('en', 'US'),
      debugShowCheckedModeBanner: false,
      title: 'Demos & Examples of Syncfusion Flutter Widgets',
      theme: _sampleListModel.themeData.copyWith(
        scrollbarTheme: const ScrollbarThemeData().copyWith(
          thumbColor: WidgetStateProperty.all(
            const Color.fromRGBO(128, 128, 128, 0.3),
          ),
        ),
      ),
      darkTheme: _sampleListModel.themeData.copyWith(
        scrollbarTheme: const ScrollbarThemeData().copyWith(
          thumbColor: WidgetStateProperty.all(
            const Color.fromRGBO(255, 255, 255, 0.3),
          ),
        ),
      ),
    );
  }

  MaterialApp _buildMobileView(Map<String, WidgetBuilder> navigationRoutes) {
    return MaterialApp(
      initialRoute: '/demos',
      routes: navigationRoutes,
      debugShowCheckedModeBanner: false,
      title: 'Demos & Examples of Syncfusion Flutter Widgets',
      localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
        GlobalMaterialLocalizations.delegate,
        SfGlobalLocalizations.delegate,
      ],
      supportedLocales: const <Locale>[Locale('en', 'US'), Locale('ar', 'AE')],
      locale: const Locale('en', 'US'),
      theme: _sampleListModel.themeData,
      darkTheme: _sampleListModel.themeData,
      home: HomePage(refresh: _refresh),
    );
  }

  ThemeData _themeData(Color paletteColor) {
    if (_isMaterial3) {
      return ThemeData(
        useMaterial3: true,
        brightness: _brightness,
        colorSchemeSeed: paletteColor,
      );
    } else {
      return ThemeData(
        useMaterial3: false,
        brightness: _brightness,
        colorScheme:
            _brightness == Brightness.light
                ? ColorScheme.light(primary: paletteColor)
                : ColorScheme.dark(primary: paletteColor),
      );
    }
  }

  void _initializeProperties() {
    final SampleModel model = SampleModel.instance;
    model.isWebFullView =
        kIsWeb || Platform.isWindows || Platform.isMacOS || Platform.isLinux;
    if (kIsWeb) {
      model.isWeb = true;
    } else {
      model.isAndroid = Platform.isAndroid;
      model.isIOS = Platform.isIOS;
      model.isLinux = Platform.isLinux;
      model.isWindows = Platform.isWindows;
      model.isMacOS = Platform.isMacOS;
      model.isDesktop =
          Platform.isLinux || Platform.isMacOS || Platform.isWindows;
      model.isMobile = Platform.isAndroid || Platform.isIOS;
    }
  }
}

// Define an Application model
class ShowCaseApplications {
  ShowCaseApplications({
    required this.title,
    required this.imagePath,
    required this.application,
  });
  final String title;
  final String imagePath;
  final Widget application;
}

/// Home page of the sample browser for both mobile and web.
class HomePage extends StatefulWidget {
  /// Creates the home page layout.
  const HomePage({required this.refresh});

  /// Refresh the app when switching M2 and M3 theme.
  final ChangeThemeCallback refresh;

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

class _HomePageState extends State<HomePage> {
  final ScrollController controller = ScrollController();
  late SampleModel sampleListModel;
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  late double _applicationCardWidth;
  final double _applicationCardHeight = 260;
  final PageController _pageController = PageController();

  bool _isDownloadButtonHover = false;
  bool _isGetPackageButtonHover = false;
  int _applicationCurrentPage = 0;

  @override
  void initState() {
    sampleListModel = SampleModel.instance;
    sampleListModel.addListener(_handleChange);
    _pageController.addListener(() {
      final currentPage = _pageController.page?.round() ?? 0;
      setState(() {
        _applicationCurrentPage = currentPage;
      });
    });
    super.initState();
  }

  // Notify the framework by calling this method
  void _handleChange() {
    if (mounted) {
      setState(() {
        // The listenable's state was changed already.
      });
    }
  }

  final List<ShowCaseApplications> applications = [
    ShowCaseApplications(
      title: 'Expense Tracker',
      // TODO(Sravan): Need to update the correct image.
      imagePath: 'images/expense_tracker_snapshot.png',
      application: const ExpenseAnalysisApp(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final bool isMaxXSize = MediaQuery.of(context).size.width >= 1000;
    final SampleModel model = sampleListModel;
    model.isMobileResolution = (MediaQuery.of(context).size.width) < 768;

    return SafeArea(
      child:
          model.isMobileResolution
              ? Scaffold(
                key: scaffoldKey,
                resizeToAvoidBottomInset: false,
                drawer:
                    (!model.isWebFullView && Platform.isIOS)
                        ? null // Avoiding drawer in iOS platform.
                        : buildLeftSideDrawer(model),
                backgroundColor: model.backgroundColor,
                endDrawerEnableOpenDragGesture: false,
                endDrawer:
                    model.isWebFullView
                        ? buildWebThemeSettings(model, context, widget.refresh)
                        : null,
                appBar: _buildMobileAppBar(model, context),
                body: _buildScrollableWidget(context, model, isMaxXSize),
              )
              : Scaffold(
                key: scaffoldKey,
                bottomNavigationBar: buildFooter(context, model),
                backgroundColor: model.backgroundColor,
                endDrawerEnableOpenDragGesture: false,
                endDrawer: buildWebThemeSettings(
                  model,
                  context,
                  widget.refresh,
                ),
                resizeToAvoidBottomInset: false,
                appBar: _buildDesktopAppBar(model, context, isMaxXSize),
                body: _buildHomePageBody(context, model, isMaxXSize),
              ),
    );
  }

  /// Builds the body of the home page with categorized cards and applications.
  Widget _buildHomePageBody(
    BuildContext context,
    SampleModel model,
    bool isMaxXSize,
  ) {
    final double deviceWidth = MediaQuery.of(context).size.width;
    final int itemsPerPage =
        deviceWidth > 1060 ? 3 : (deviceWidth > 768 ? 2 : 1);

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_pageController.hasClients &&
          _pageController.page?.round() != _applicationCurrentPage) {
        _pageController.animateToPage(
          _applicationCurrentPage,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
      }
    });

    final bool showViewAll =
        _applicationCurrentPage == 1 &&
        (deviceWidth > 1060
            ? applications.length > 6
            : (deviceWidth >= 768
                ? applications.length > 4
                : applications.length > 2));

    double padding = 0;
    double sidePadding =
        deviceWidth > 1060
            ? deviceWidth * 0.038
            : deviceWidth >= 768
            ? deviceWidth * 0.041
            : deviceWidth * 0.05;

    if (deviceWidth > 1060) {
      padding = deviceWidth * 0.011;
      _applicationCardWidth = (deviceWidth * 0.9) / 3;

      // Setting max card width, spacing between cards in higher resolutions.
      if (deviceWidth > 3000) {
        _applicationCardWidth = deviceWidth / 3.5;
        sidePadding = (_applicationCardWidth / 2) * 0.125;
        padding = 30;
      }
    } else if (deviceWidth >= 768) {
      padding = deviceWidth * 0.018;
      _applicationCardWidth = (deviceWidth * 0.9) / 2;
    } else {
      _applicationCardWidth = deviceWidth * 0.9;
      padding = deviceWidth * 0.035;
      sidePadding = (deviceWidth * 0.1) / 2;
    }

    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildShowcaseTitle(model, sidePadding, padding),
          const SizedBox(height: 10),
          _buildApplicationsSection(
            context,
            model,
            isMaxXSize,
            sidePadding,
            padding,
            deviceWidth,
            itemsPerPage,
            showViewAll,
          ),
          const SizedBox(height: 18),
          _buildAllControlsTitle(model, sidePadding, padding),
          _CategorizedCards(),
        ],
      ),
    );
  }

  /// Builds the title for the showcase applications section.
  Widget _buildShowcaseTitle(
    SampleModel model,
    double sidePadding,
    double padding,
  ) {
    return Padding(
      padding: EdgeInsets.only(left: sidePadding, top: padding),
      child: Text(
        'Showcase Samples',
        style: TextStyle(
          color: model.primaryColor,
          fontSize: 16,
          fontFamily: 'Roboto-Bold',
        ),
      ),
    );
  }

  /// Builds the applications section with a page view of application cards.
  Widget _buildApplicationsSection(
    BuildContext context,
    SampleModel model,
    bool isMaxXSize,
    double sidePadding,
    double padding,
    double deviceWidth,
    int itemsPerPage,
    bool showViewAll,
  ) {
    return Padding(
      padding: EdgeInsets.only(left: sidePadding / 2),
      child: Stack(
        children: [
          Padding(
            padding: EdgeInsets.only(left: sidePadding / 2),
            child: SizedBox(
              height: _applicationCardHeight,
              child: PageView.builder(
                controller: _pageController,
                itemCount: applications.length > itemsPerPage ? 2 : 1,
                itemBuilder: (context, pageIndex) {
                  final int startIndex = pageIndex * itemsPerPage;
                  final int endIndex =
                      _applicationCurrentPage == 1 && pageIndex > 0
                          ? deviceWidth > 1060
                              ? applications.length > 6
                                  ? startIndex + 2
                                  : applications.length
                              : (deviceWidth >= 768
                                  ? applications.length > 4
                                      ? startIndex + 1
                                      : applications.length
                                  : applications.length > 2
                                  ? startIndex
                                  : applications.length)
                          : (startIndex + itemsPerPage > applications.length)
                          ? applications.length
                          : startIndex + itemsPerPage;

                  final List<ShowCaseApplications> visibleApps = applications
                      .sublist(startIndex, endIndex);

                  return Row(
                    children: [
                      ...visibleApps.map(
                        (app) => Padding(
                          padding: EdgeInsets.only(right: padding),
                          child: _buildApplicationWidget(
                            app,
                            model,
                            deviceWidth,
                          ),
                        ),
                      ),
                      if (showViewAll && pageIndex > 0)
                        _buildViewAllOptions(
                          context,
                          model,
                          isMaxXSize,
                          sidePadding,
                          padding,
                        ),
                    ],
                  );
                },
              ),
            ),
          ),
          if (_applicationCurrentPage == 1 &&
              applications.length > itemsPerPage)
            _buildPreviousButton(context, model, sidePadding, padding),
          if (_applicationCurrentPage == 0 &&
              applications.length > itemsPerPage)
            _buildNextButton(context, model, sidePadding, padding),
        ],
      ),
    );
  }

  /// Builds the title for the "All Controls" section.
  Widget _buildAllControlsTitle(
    SampleModel model,
    double sidePadding,
    double padding,
  ) {
    return Padding(
      padding: EdgeInsets.only(left: sidePadding),
      child: Text(
        'All Controls',
        style: TextStyle(
          color: model.primaryColor,
          fontSize: 16,
          fontFamily: 'Roboto-Bold',
        ),
      ),
    );
  }

  /// Builds the previous page button in the applications page view.
  Widget _buildPreviousButton(
    BuildContext context,
    SampleModel model,
    double sidePadding,
    double padding,
  ) {
    return Positioned(
      top: _applicationCardHeight / 3 + padding * 2,
      child: ElevatedButton(
        onPressed: () {
          _pageController.previousPage(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
        style: ElevatedButton.styleFrom(
          shape: const CircleBorder(),
          padding: const EdgeInsets.all(10),
          backgroundColor: Theme.of(context).colorScheme.surface,
        ),
        child: Center(
          child: Icon(
            Icons.arrow_back_ios,
            color:
                model.themeData.colorScheme.brightness == Brightness.dark
                    ? const Color.fromRGBO(238, 238, 238, 1)
                    : Theme.of(context).colorScheme.onSurface,
          ),
        ),
      ),
    );
  }

  /// Builds the next page button in the applications page view.
  Widget _buildNextButton(
    BuildContext context,
    SampleModel model,
    double sidePadding,
    double padding,
  ) {
    return Positioned(
      right: sidePadding / 2,
      top: _applicationCardHeight / 3 + padding * 2,
      child: ElevatedButton(
        onPressed: () {
          _pageController.nextPage(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
        style: ElevatedButton.styleFrom(
          shape: const CircleBorder(),
          padding: const EdgeInsets.all(10),
          backgroundColor: Theme.of(context).colorScheme.surface,
        ),
        child: Center(
          child: Icon(
            Icons.arrow_forward_ios,
            color:
                model.themeData.colorScheme.brightness == Brightness.dark
                    ? const Color.fromRGBO(238, 238, 238, 1)
                    : Theme.of(context).colorScheme.onSurface,
          ),
        ),
      ),
    );
  }

  Widget _buildApplicationWidget(
    ShowCaseApplications app,
    SampleModel model,
    double width,
  ) {
    return Container(
      decoration: BoxDecoration(
        color: model.homeCardColor,
        border: Border.all(
          color:
              model.themeData.useMaterial3
                  ? model.themeData.colorScheme.outlineVariant
                  : const Color.fromRGBO(0, 0, 0, 0.12),
          width: 1.1,
        ),
        borderRadius: const BorderRadius.all(Radius.circular(12)),
      ),
      width: model.isWebFullView ? 380.0 : _applicationCardWidth,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 12, left: 12, right: 12),
            child: InkWell(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    // TODO(Sravan): Implement back button functionality to navigate to the previous screen or handle app exit.
                    builder: (BuildContext context) => app.application,
                  ),
                );
              },
              child: SizedBox(
                height: 185,
                width: 356,
                child: Image.asset(app.imagePath, fit: BoxFit.fill),
              ),
            ),
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Divider(
                color:
                    model.themeData.useMaterial3
                        ? model.themeData.colorScheme.outlineVariant
                        : (model.themeData.colorScheme.brightness ==
                                Brightness.dark
                            ? const Color.fromRGBO(61, 61, 61, 1)
                            : const Color.fromRGBO(238, 238, 238, 1)),
                thickness: 1,
                height: 1,
              ),
              Padding(
                padding: const EdgeInsets.only(
                  left: 12.0,
                  top: 16.0,
                  bottom: 16.0,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Text(
                        app.title,
                        overflow: TextOverflow.ellipsis,
                        textAlign: TextAlign.start,
                        style: Theme.of(
                          context,
                        ).textTheme.titleMedium!.copyWith(
                          color: Theme.of(context).colorScheme.onSurface,
                          letterSpacing: 0,
                          fontFamily: 'Roboto',
                          fontWeight: FontWeight.w700,
                        ),
                        // TextStyle(
                        //   color: model.primaryColor,
                        //   fontSize: 16,
                        //   fontFamily: 'Roboto-Bold',
                        // ),
                      ),
                    ),
                    Container(
                      decoration: const BoxDecoration(
                        color: Color.fromRGBO(55, 153, 30, 1),
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(10.0),
                          topLeft: Radius.circular(10.0),
                        ),
                      ),
                      padding: const EdgeInsets.fromLTRB(5, 2.7, 5, 2.7),
                      child: const Text(
                        'New',
                        style: TextStyle(fontSize: 12, color: Colors.white),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildViewAllOptions(
    BuildContext context,
    SampleModel model,
    bool isMaxXSize,
    double sidePadding,
    double padding,
  ) {
    return Container(
      padding: const EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        color: model.homeCardColor,
        border: Border.all(
          color:
              model.themeData.useMaterial3
                  ? model.themeData.colorScheme.outlineVariant
                  : const Color.fromRGBO(0, 0, 0, 0.12),
          width: 1.1,
        ),
        borderRadius: const BorderRadius.all(Radius.circular(12)),
      ),
      width: _applicationCardWidth * 0.8,
      child: InkWell(
        onTap:
            () => _navigateToApplications(
              context,
              model,
              isMaxXSize,
              sidePadding,
              padding,
            ),
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12),
            child: Text(
              'View All',
              style: TextStyle(
                color: model.primaryColor,
                fontSize: 16,
                fontFamily: 'Roboto-Bold',
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _navigateToApplications(
    BuildContext context,
    SampleModel model,
    bool isMaxXSize,
    double sidePadding,
    double padding,
  ) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return Scaffold(
            appBar:
                model.isMobileResolution
                    // TODO(Sravan): Implement sub items app bar.
                    ? _buildMobileAppBar(model, context)
                    : _buildDesktopAppBar(model, context, isMaxXSize),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Back button
                Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: sidePadding,
                    vertical: 16,
                  ),
                  child: InkWell(
                    onTap: () => Navigator.pop(context),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(
                          Icons.arrow_back,
                          size: 24,
                          color: model.primaryColor,
                        ),
                        const SizedBox(width: 8),
                        Text(
                          'Showcase Samples',
                          style: TextStyle(
                            color: model.primaryColor,
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

                /// Applications grid.
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: sidePadding),
                    child: LayoutBuilder(
                      builder: (context, constraints) {
                        final int itemsPerRow =
                            constraints.maxWidth > 1060
                                ? 3
                                : (constraints.maxWidth > 768 ? 2 : 1);
                        final double appHeight =
                            MediaQuery.of(context).size.height * 0.4;

                        return GridView.builder(
                          padding: const EdgeInsets.only(
                            top: 10,
                            right: 20,
                            bottom: 10,
                            left: 10,
                          ),
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: itemsPerRow,
                                crossAxisSpacing: padding,
                                mainAxisSpacing: padding,
                                childAspectRatio:
                                    constraints.maxWidth /
                                    itemsPerRow /
                                    appHeight,
                              ),
                          itemCount: applications.length,
                          itemBuilder:
                              (context, index) => _buildApplicationWidget(
                                applications[index],
                                model,
                                constraints.maxWidth,
                              ),
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  PreferredSize _buildMobileAppBar(SampleModel model, BuildContext context) {
    return PreferredSize(
      preferredSize: const Size.fromHeight(46.0),
      child: AppBar(
        iconTheme: IconThemeData(color: model.baseAppBarItemColor),
        leading: (!model.isWebFullView && Platform.isIOS) ? Container() : null,
        elevation: 0.0,
        bottomOpacity: 0.0,
        backgroundColor: model.primaryColor,
        title: AnimateOpacityWidget(
          controller: controller,
          opacity: 0,
          child: Text(
            'Flutter UI Widgets',
            style: TextStyle(
              fontSize: 18,
              fontFamily: 'HeeboMedium',
              color: model.baseAppBarItemColor,
            ),
          ),
        ),
        actions: <Widget>[
          SizedBox(
            height: 40,
            width: 40,
            child: IconButton(
              icon: Icon(Icons.settings, color: model.baseAppBarItemColor),
              onPressed: () {
                model.isWebFullView
                    ? scaffoldKey.currentState!.openEndDrawer()
                    : showBottomSettingsPanel(model, context, widget.refresh);
              },
            ),
          ),
        ],
      ),
    );
  }

  PreferredSize _buildDesktopAppBar(
    SampleModel model,
    BuildContext context,
    bool isMaxXSize,
  ) {
    final bool isMaterial3 = model.themeData.useMaterial3;
    final bool haveSpace = MediaQuery.of(context).size.width >= 1050;
    return PreferredSize(
      preferredSize: Size.fromHeight(isMaterial3 ? 100 : 90.0),
      child: AppBar(
        elevation: 0.0,
        backgroundColor: model.primaryColor,
        flexibleSpace: Padding(
          padding:
              isMaterial3 ? EdgeInsets.zero : const EdgeInsets.only(top: 4.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              _sampleName(model),
              _sampleNameDescription(model),
              const SizedBox(height: 15),
              Expanded(
                child: Transform.translate(
                  offset: const Offset(0, 1),
                  child: SizedBox(
                    width: double.infinity,
                    height: kIsWeb ? 16 : 14,
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        color: model.backgroundColor,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(15.0),
                          topRight: Radius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        actions: <Widget>[
          if (haveSpace)
            Padding(
              padding: EdgeInsets.only(top: 20, right: isMaterial3 ? 20 : 13),
              child: buildM2ToM3SwapOption(
                model,
                context,
                MainAxisSize.min,
                model.baseAppBarItemColor,
                widget.refresh,
              ),
            ),
          // if (haveSpace && isMaterial3) _buildVerticalDivider(),
          if (MediaQuery.of(context).size.width < 500)
            const SizedBox(height: 0, width: 9)
          else
            _buildSearchBar(context, model),
          // if (haveSpace && isMaterial3) _buildVerticalDivider(),
          // Download option.
          if (model.isMobileResolution)
            Container()
          else