mod_layout_one 1.0.83 copy "mod_layout_one: ^1.0.83" to clipboard
mod_layout_one: ^1.0.83 copied to clipboard

A comprehensive Flutter layout package with theming and i18n support

example/lib/main.dart

import 'dart:developer';

import 'package:example/controllers/app_controller.dart';
import 'package:example/pages/avatars_page.dart';
import 'package:example/pages/buttons_page.dart';
import 'package:example/pages/card_page.dart';
import 'package:example/pages/charts_page.dart';
import 'package:example/pages/dialogs_page.dart';
import 'package:example/pages/home_page.dart';
import 'package:example/pages/loading_page.dart';
import 'package:example/pages/login_page.dart';
import 'package:example/pages/modal_page.dart';
import 'package:example/pages/tables_page.dart';
import 'package:example/pages/tabs_page.dart';
import 'package:example/pages/textbox_page.dart';
import 'package:example/pages/textcopy_page.dart';
import 'package:example/pages/toast_page.dart';
import 'package:example/pages/tree_view_page.dart';
import 'package:example/services/auth_service.dart';
import 'package:example/services/storage_service.dart';
import 'package:example/theme/app_theme.dart';
import 'package:example/translation/app_translation.dart';
import 'package:example/widgets/profile_widget.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mod_layout_one/mod_layout_one.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();

  final authService = AuthService(prefs);
  final storageService = StorageService(prefs);

  Get.put(authService, permanent: true);
  Get.put(storageService, permanent: true);
  Get.put(AppController(), permanent: true);

  await ModLayout.init(
    config: ModLayoutConfig(
      appTitle: 'Example App',
      darkTheme: MyAppTheme.dark,
      lightTheme: MyAppTheme.light,
      menuItems: [
        MenuItem(
          title: 'avatars'.tr,
          icon: Icons.account_circle,
          route: '/avatars',
        ),
        MenuItem(
          title: 'textCopy'.tr,
          icon: Icons.text_decrease,
          route: '/textCopy',
        ),
        MenuItem(
          title: 'buttons'.tr,
          icon: Icons.dangerous,
          route: '/buttons',
        ),
        MenuItem(
          title: 'cards'.tr,
          icon: Icons.style,
          route: '/cards',
        ),
        MenuItem(
          title: 'dialogs'.tr,
          icon: Icons.chat_bubble_outline,
          route: '/dialogs',
        ),
        MenuItem(
          title: 'home'.tr,
          icon: Icons.home,
          route: '/home',
        ),
        MenuItem(
          title: 'tabs'.tr,
          icon: Icons.tab,
          route: '/tabs',
        ),
        MenuItem(
          title: 'tables'.tr,
          icon: Icons.table_chart,
          route: '/tables',
        ),
        MenuItem(
          title: 'modals'.tr,
          icon: Icons.window,
          route: '/modals',
        ),
        MenuItem(
          title: 'textboxes'.tr,
          icon: Icons.text_fields,
          route: '/textboxes',
        ),
        MenuItem(
          title: 'tables'.tr,
          icon: Icons.table_chart,
          route: '/tables',
        ),
        MenuItem(
          title: 'charts'.tr,
          icon: Icons.bar_chart,
          route: '/charts',
        ),
        MenuItem(
          title: 'toast'.tr,
          icon: Icons.notifications,
          route: '/toast',
        ),
      ],
      customTranslations:
          AppTranslations().keys, // Pass the translations directly
    ),
    prefs: prefs,
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final themeController = Get.find<ThemeController>();

    return Obx(() => GetMaterialApp(
          title: 'Mod Layout Example',
          theme: MyAppTheme.light,
          darkTheme: MyAppTheme.dark,
          themeMode: themeController.isDarkMode.value
              ? ThemeMode.dark
              : ThemeMode.light,
          translations: AppTranslations(),
          locale: Get.find<LanguageController>().currentLocale.value.isNotEmpty
              ? Locale(
                  Get.find<LanguageController>()
                      .currentLocale
                      .value
                      .split('_')[0],
                  Get.find<LanguageController>()
                      .currentLocale
                      .value
                      .split('_')[1],
                )
              : const Locale('en', 'US'),
          fallbackLocale: const Locale('en', 'US'),
          debugShowCheckedModeBanner: false,
          getPages: [
            GetPage(
              name: '/login',
              page: () => const LoginPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/home',
              page: () => const HomePage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/dialogs',
              page: () => const DialogsPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/cards',
              page: () => const CardPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/buttons',
              page: () => const ButtonsPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/avatars',
              page: () => const AvatarsPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/textCopy',
              page: () => const TextCopyPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/modals',
              page: () => const ModalPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/textboxes',
              page: () => const TextBoxPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/tables',
              page: () => const TablesPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/tabs',
              page: () => const TabsPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/loading',
              page: () => const LoadingPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/treeview',
              page: () => const TreeViewPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/charts',
              page: () => const ChartsPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
            GetPage(
              name: '/toast',
              page: () => const ToastPage(),
              transition: Transition.noTransition,
              preventDuplicates: true,
            ),
          ],
          initialRoute: '/home',
        ));
  }
}

class CustomLayout extends StatelessWidget {
  final String title;
  final Widget body;
  final Widget? footer;
  const CustomLayout(
      {super.key, required this.title, required this.body, this.footer});

  @override
  Widget build(BuildContext context) {
    return ModBaseLayout(
      showAppBar: true,
      title: title,
      lightBackgroundColor: Colors.blue,
      lightForegroundColor: Colors.white,
      darkBackgroundColor: Colors.green,
      darkForegroundColor: Colors.white,
      sidebarSelectedColor: Colors.red,
      appBarActions: const [
        ProfileWidget(
          showFullProfile: true,
        )
      ],
      drawerHeader: Container(
        padding: const EdgeInsets.all(16),
        child: const Column(
          children: [
            CircularProgressIndicator(),
            Text('User Name'),
            Text('user@email.com'),
          ],
        ),
      ),
      loginRoute: '/login',
      claims: const [
        'menu:avatars',
        'menu:textCopy',
        'menu:buttons',
        'menu:cards',
        'menu:dialogs',
        'menu:home',
        'menu:tabs',
        'menu:modals',
        'menu:textboxes',
        'menu:tables',
        'menu:loading',
        'menu:treeview',
        'menu:charts',
        'menu:toast',
        'module:administrativo',
        'module:documentos',
      ],
      moduleMenuGroups: [
        ModuleMenu(
          name: 'Administrativo',
          icon: Icons.admin_panel_settings,
          fontSize: 14.0,
          fontWeight: FontWeight.w600,
          iconSize: 18.0,
          description: 'Módulo de administração do sistema',
          onSelect: (module) async {
            // Ação a ser executada quando o módulo for selecionado
            log('Module selected: ${module.name}');
          },
          menuGroups: [
            const MenuGroup(
              title: Text('Components Administrativo'),
              fontSize: 14.0,
              claimName: 'module:administrativo',
              items: [
                MenuItem(
                  title: 'Corporate',
                  icon: Icons.business,
                  //fontSize: 10.0,
                  //iconSize: 10.0,
                  //route: '/avatars',
                  // type: 'menu',
                  // value: 'avatars',
                  claimName: 'menu:avatars',
                  subItems: [
                    MenuItem(
                      title: 'avatars',
                      icon: Icons.telegram,
                      type: 'menu',
                      value: 'avatars',
                      subItems: [
                        MenuItem(
                          title: 'avatars',
                          icon: Icons.account_circle,
                          route: '/avatars',
                          type: 'menu',
                          value: 'avatars',
                        ),
                      ],
                    ),
                    MenuItem(
                      title: 'buttons',
                      icon: Icons.smart_button,
                      route: '/buttons',
                      type: 'menu',
                      value: 'buttons',
                    ),
                  ],
                ),
                MenuItem(
                  title: 'textCopy',
                  icon: Icons.text_decrease,
                  route: '/textCopy',
                  type: 'menu',
                  value: 'textCopy',
                ),
                MenuItem(
                  title: 'avatars',
                  icon: Icons.account_circle,
                  route: '/avatars',
                  type: 'menu',
                  value: 'avatars',
                ),
                MenuItem(
                  title: 'buttons',
                  icon: Icons.smart_button,
                  route: '/buttons',
                  type: 'menu',
                  value: 'buttons',
                ),
                MenuItem(
                  title: 'cards',
                  icon: Icons.style,
                  route: '/cards',
                  type: 'menu',
                  value: 'cards',
                ),
                MenuItem(
                  title: 'dialogs',
                  icon: Icons.chat_bubble_outline,
                  route: '/dialogs',
                  type: 'menu',
                  value: 'dialogs',
                ),
                MenuItem(
                  title: 'home',
                  icon: Icons.home,
                  route: '/home',
                  type: 'menu',
                  value: 'home',
                ),
                MenuItem(
                  title: 'tabs',
                  icon: Icons.tab,
                  route: '/tabs',
                  type: 'menu',
                  value: 'tabs',
                ),
                MenuItem(
                  title: 'modals',
                  icon: Icons.window,
                  route: '/modals',
                  type: 'menu',
                  value: 'modals',
                ),
                MenuItem(
                  title: 'textboxes',
                  icon: Icons.text_fields,
                  route: '/textboxes',
                  type: 'menu',
                  value: 'textboxes',
                ),
                MenuItem(
                  title: 'tables',
                  icon: Icons.table_chart,
                  route: '/tables',
                  type: 'menu',
                  value: 'tables',
                ),
                MenuItem(
                  title: 'loading',
                  icon: Icons.hourglass_empty,
                  route: '/loading',
                  type: 'menu',
                  value: 'loading',
                ),
                MenuItem(
                  title: 'treeview',
                  icon: Icons.folder_open,
                  route: '/treeview',
                  type: 'menu',
                  value: 'treeview',
                ),
                MenuItem(
                  title: 'charts',
                  icon: Icons.bar_chart,
                  route: '/charts',
                  type: 'menu',
                  value: 'charts',
                ),
                MenuItem(
                  title: 'toast',
                  icon: Icons.notifications,
                  route: '/toast',
                  type: 'menu',
                  value: 'toast',
                ),
              ],
            ),
          ],
        ),
        ModuleMenu(
          name: 'Documentos',
          icon: Icons.description,
          description: 'Gestão de documentos',
          fontSize: 16.0,
          fontWeight: FontWeight.w600,
          iconSize: 28.0,
          onSelect: (module) async {
            // Ação a ser executada quando o módulo for selecionado
            log('Module selected: ${module.name}');
            // Removed Get.offAllNamed('/home') to avoid navigation issues
          },
          menuGroups: [
            const MenuGroup(
              title: Text('Components'),
              fontSize: 14.0,
              fontWeight: FontWeight.w500,
              iconSize: 22.0,
              claimName: 'module:documentos',
              items: [
                MenuItem(
                  title: 'Corporate',
                  icon: Icons.business,
                  fontSize: 13.0,
                  fontWeight: FontWeight.w400,
                  iconSize: 20.0,
                  //route: '/avatars',
                  type: 'menu',
                  value: 'avatars',
                  subItems: [
                    MenuItem(
                      title: 'avatars',
                      icon: Icons.telegram,
                      fontSize: 12.0,
                      iconSize: 18.0,
                      type: 'menu',
                      value: 'avatars',
                      subItems: [
                        MenuItem(
                          title: 'avatars',
                          icon: Icons.account_circle,
                          route: '/avatars',
                          type: 'menu',
                          value: 'avatars',
                        ),
                      ],
                    ),
                  ],
                ),
                MenuItem(
                  title: 'textCopy',
                  icon: Icons.text_decrease,
                  route: '/textCopy',
                  type: 'menu',
                  value: 'textCopy',
                ),
              ],
            ),
          ],
        ),
      ],
      body: body,
      footer: footer,
    );
  }
}

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomLayout(
      title: 'settings'.tr,
      body: Center(
        child: ModCard(
          header: Text('settings'.tr),
          content: Text('settings_content'.tr),
        ),
      ),
    );
  }
}
0
likes
130
points
206
downloads

Publisher

unverified uploader

Weekly Downloads

A comprehensive Flutter layout package with theming and i18n support

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

cached_network_image, flutter, flutter_svg, get, intl, shared_preferences

More

Packages that depend on mod_layout_one