GetX Scaffold

The LoadContainer widget manages three built-in states: loading, network error, and empty data. You control these states via a LoadController (which uses BaseControllerMixin).

To use it:

1. Create a LoadController and instantiate a LoadController? property.
2. Use loadController?.loading(), loadController?.error(), or loadController?.empty() to trigger state changes.
3. Wrap your content in a LoadContainer and provide the onReLoad callback.

Each state's widget can be customized.

// Controller implementation
class LoadContainerController extends GetxController with BaseControllerMixin {
  @override
  String get builderId => 'loadContainer';

  LoadController? loadController = LoadController();

  void onLoad() {
    loadController?.loading();
    // Perform logic then call complete()
    loadController?.complete();
  }

  void onEmpty() {
    loadController?.loading();
    loadController?.empty();
  }

  void onError() {
    loadController?.loading();
    loadController?.error();
  }
}

// Widget implementation
LoadContainer(
  controller: controller.loadController!,
  onReLoad: controller.onLoad,
  child: _buildView(),
)

The scaffold follows a pattern of separating view and logic.

1. View: Extend GetView<TController>. Use GetBuilder<TController> in the build method, ensuring the id matches the controller's builderId.
2. Controller: Extend GetxController and mix in BaseControllerMixin.

Important: You must override String get builderId in your controller to match the id used in the GetBuilder in your view. This enables targeted UI updates via updateUi().

// Controller
class HomeController extends GetxController with BaseControllerMixin {
  @override
  String get builderId => 'home';

  @override
  void onInit() {
    super.onInit();
    updateUi(); // Refreshes the UI for this builderId
  }
}

// View
class HomePage extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      init: HomeController(),
      id: 'home', // Must match controller's builderId
      builder: (_) {
        return Scaffold(body: Text('Hello'));
      },
    );
  }
}

GetX Scaffold provides encapsulated global methods to handle permission requests, specifically addressing requirements in many Chinese Android app markets that mandate showing a reason to the user before requesting permission.

It simplifies the process by:

1. Providing a way to show a rationale/message before the system permission dialog.
2. Abstracting complex permissions (like photo gallery access) that vary across different Android SDK versions into single, unified methods.

Note: You must configure the required permissions in your platform-specific configuration files (e.g., AndroidManifest.xml) before calling these methods. This package is built upon permission_handler.

import 'package:getx_scaffold/getx_scaffold.dart';

// 1. Request specific common permissions
await requestCameraPermission();
await requestPhotosPermission();

// 2. Request custom permissions with a rationale message
var result = await requestPermission(
  permission: Permission.microphone,
  message: 'We need access to your microphone for recording.',
  error: 'Please authorize microphone permission',
);

if (result) {
  // Permission granted
}

To implement internationalization, create a class that extends Translations. You must define fallbackLocale, supportedLocales, the keys map (mapping locale codes to translation maps), and the localizationsDelegates required for Flutter's localization system.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

class TranslationLibrary extends Translations {
  static const fallbackLocale = Locale('zh', 'CN');

  static const supportedLocales = [
    Locale('zh', 'CN'),
    Locale('en', 'US'),
    Locale('es', 'ES'),
  ];

  @override
  Map<String, Map<String, String>> get keys => {
        'zh': zh,
        'en': en,
        'es': es,
      };

  static const localizationsDelegates = [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ];
}

GetX Scaffold provides a collection of optimized, pre-styled widgets to speed up UI development. It is not a full UI library, but a wrapper for common components.

Key widget categories include:

• TextX: Specialized text widgets with predefined typography styles (e.g., displayLarge, headlineMedium, titleSmall, bodyLarge) and weight support.
• RichTextX: For creating clickable rich text using TextSpanItem.
• TextTag: For styled tags/labels with support for outline and custom color.
• ButtonX: Various button styles including primary, outline, icon, and text.
• IconX: Support for standard icons, Ant Design icons (AntdIcon), SVGs, and images with built-in badge and background support.
• NavigationX: A bottom navigation bar component using NavigationItemModel for items.
• SpinKit: Integrated loading animations (e.g., SpinKitFoldingCube, SpinKitDoubleBounce).
• ImageX: Simplified image loading from URLs with radius support.

// Example of using TextX and ButtonX
TextX.displayLarge('DisplayLarge'),
ButtonX.primary(
  'Primary',
  onPressed: () {},
),

The scaffold recommends using Material 2 for theme configuration to avoid Material 3 coloring issues. You can define light and dark ThemeData in a class. Once defined, you can access theme colors throughout the app using the ThemeColor utility class (e.g., ThemeColor.onPrimary, ThemeColor.onSurface).

import 'package:flutter/material.dart';

class AppTheme {
  static const Color themeColor = Color.fromARGB(255, 11, 107, 47);
  static const Color darkThemeColor = Color.fromARGB(255, 12, 16, 121);

  static ThemeData light = ThemeData(
    useMaterial3: false,
    colorScheme: ColorScheme.fromSeed(
      seedColor: themeColor,
      brightness: Brightness.light,
    ),
    // ... other theme settings
  );

  static ThemeData dark = ThemeData(
    useMaterial3: false,
    colorScheme: ColorScheme.fromSeed(
      seedColor: darkThemeColor,
      brightness: Brightness.dark,
    ),
    // ... other theme settings
  );
}

Initialize the scaffold using the init() function before calling runApp(). This sets up global configurations like logging and supported locales. The scaffold uses GetxApp (a wrapper around GetMaterialApp and ScreenUtilInit) to handle screen adaptation, theme management, and localization via GlobalService.

import 'package:getx_scaffold/getx_scaffold.dart';

void main() async {
  WidgetsBinding widgetsBinding = await init(
    isDebug: kDebugMode,
    logTag: 'GetxScaffold',
    supportedLocales: TranslationLibrary.supportedLocales,
  );
  runApp(
    GetxApp(
      designSize: const Size(390, 844),
      enableLog: kDebugMode,
      defaultTransition: Transition.rightToLeft,
      themeMode: GlobalService.to.themeMode,
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      locale: GlobalService.to.locale,
      translations: TranslationLibrary(),
      fallbackLocale: TranslationLibrary.fallbackLocale,
      supportedLocales: TranslationLibrary.supportedLocales,
      localizationsDelegates: TranslationLibrary.localizationsDelegates,
      title: 'GetxScaffold',
      home: const HomePage(),
      builder: (context, widget) {
        return widget!;
      },
    ),
  );
}