flutter_getx_template: Skill for Claude Code

UI conventions

Apply these rules to every widget or screen being created or edited. They keep layout, copy, color, API states, and toasts consistent with the rest of the app.

Sizes — ScreenUtil

Use ScreenUtil extensions, not raw doubles, for layout:

200.w   // width
100.h   // height
25.sp   // font size
10.r    // radius
10.verticalSpace
9.horizontalSpace

Container(
  height: 100.h,
  width: 200.w,
  padding: EdgeInsets.symmetric(horizontal: 20.w),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8.r),
  ),
  child: Text(
    Strings.hello.tr,
    style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: 20.sp),
  ),
)

double.infinity and 1.0 (as a factor, e.g. border width 1) are fine. Design sizes belong on .w / .h / .sp / .r.

Strings — localization

User-visible copy goes through Strings.{key}.tr. If the key does not exist yet, add it to Strings and every language map.

Text(Strings.hello.tr)

Colors — theme

Read color from Theme.of(context) or a ThemeExtension. Brand colors belong in the light/dark palettes (theme skill), not as Color(0xFF...) or Colors.red in widgets.

final theme = Theme.of(context);
Container(color: theme.primaryColor);
Text('...', style: theme.textTheme.bodyMedium);

final itemTheme = theme.extension<EmployeeListItemThemeData>();
Container(color: itemTheme?.backgroundColor);

API UI — MyWidgetsAnimator

When the screen shows data from an API call, wrap that region in GetBuilder + MyWidgetsAnimator driven by the controller’s apiCallStatus.

GetBuilder<{pascal}Controller>(
  builder: (_) {
    return MyWidgetsAnimator(
      apiCallStatus: controller.apiCallStatus,
      loadingWidget: () => const Center(child: CircularProgressIndicator()),
      errorWidget: () => ApiErrorWidget(
        message: Strings.internetError.tr,
        retryAction: () => controller.{method}(),
        padding: EdgeInsets.symmetric(horizontal: 20.w),
      ),
      successWidget: () => ListView.separated(
        itemCount: controller.data!.length,
        separatorBuilder: (_, __) => SizedBox(height: 10.h),
        itemBuilder: (ctx, index) => ListTile(
          title: Text(controller.data![index].title),
        ),
      ),
    );
  },
)