Foundations
Spacing & radii
The app's spacing, corner-radius and animation-duration tokens.
App · Flutter · macromath_mobile
The app's structural values live in AppConstants. Always using the tokens (never
loose numbers) keeps the visual rhythm consistent across screens.
Spacing
| Token | Value | Typical use |
|---|---|---|
paddingSmall | 8 | Inner gaps, chips. |
paddingMedium | 16 | Default screen and card padding. |
paddingLarge | 24 | Separation between sections. |
paddingXLarge | 32 | Generous margins / empty states. |
Corner radii
| Token | Value | Typical use |
|---|---|---|
radiusSmall | 8 | Small buttons, inputs. |
radiusMedium | 12 | Cards, nav chips. |
radiusLarge | 16 | Large cards, sheets. |
radiusXLarge | 24 | Nav bar top, bottom sheets. |
radiusCircular | 100 | Pills and avatars. |
Animation durations
| Token | Value | Typical use |
|---|---|---|
animationFast | 200 ms | Tap states, selection. |
animationMedium | 350 ms | Transitions, toasts. |
animationSlow | 500 ms | Screen entrances. |
Usage
import 'package:macromath_mobile/core/constants/app_constants.dart';
Container(
padding: const EdgeInsets.all(AppConstants.paddingMedium),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(AppConstants.radiusLarge),
),
);