Theme and Layout
Theme Data
/lib/ui/themes/theme_data.dart
Theme Data class defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app.
The MaterialApp theme property can be used to configure the appearance of the entire app. Widget subtrees within an app can override the app's theme by including a Theme widget at the top of the subtree.
Theme Data can handle dynamic color base on Dark on Light Mode Device. All Theme Data values, can be accessed from /lib/ui/themes/theme_palette.dart with colorScheme(context)
import 'package:flight_app/ui/themes/theme_palette.dart';
Container(
height: 100,
padding: EdgeInsets.all(spacingUnit(2)),
decoration: BoxDecoration(
color: colorScheme(context).primaryContainer,
),
child: const Text('Lorem ipsum dolor')
),
The background color will adapt to the device light/dark mode. The primary color will be lighten on light mode and darken when dark mode
Theme Button
/lib/ui/themes/theme_button.dart
This is a global styling for variant buttons style including sizes and colors
import 'package:flight_app/ui/themes/theme_button.dart';
FilledButton(
onPressed: () {},
style: ThemeButton.btnBig.merge(ThemeButton.primary),
child: const Text('SAVE', style: ThemeText.subtitle2)
),
Theme Spacing
/lib/ui/themes/theme_spacing.dart
-
Spacing unit uses for padding, margin, and other spacing to make ui consistent. The spacing unit base on 8px, that mean if you use spacingUnit(3) it's equal 24px
import 'package:flight_app/ui/themes/theme_spacing.dart';
Container(
height: 100,
padding: EdgeInsets.all(spacingUnit(3)),
child: const Text('Lorem ipsum dolor')
),
-
Vertical Spacing is a Blank Space Widget uses for vertical separator between section.
VSpaceShort(): 16pxVSpace(): 24pxVSpaceBig(): 48px
import 'package:flight_app/ui/themes/theme_spacing.dart';
Column(
children: [
const MyWidget(),
const VSpace(),
const OtherWidget(),
]
);
Theme Breakpoints
/lib/ui/themes/theme_breakpoints.dart
Theme Breakpoints is helper class to check screen size and layout constraint
-
ThemeSize: This class has static values that defined every common screen sizes
class ThemeSize {
static double xs = 480;
static double sm = 600;
static double md = 768;
static double lg = 960;
static double xl = 1280;
static double xxl = 1536;
}
Example usage:
import 'package:flight_app/ui/themes/theme_breakpoints.dart';
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: ThemeSize.sm
),
)
-
ThemeBreakpoints: This class is used to check screen size. It has 2 type, up to check minimum size of screen and down to check maximum size of screen.
In this template mostly using up for Mobile First Responsive.
import 'package:flight_app/ui/themes/theme_breakpoints.dart';
Container(
height: ThemeBreakpoints.mdUp(context) ? 280 : 320,
)
-
ThemeConstraint: This class similiar like ThemeBreakpoints, but it has
constraint parameter.
You can use it with LayoutBuilder to get and set the constraint value.
import 'package:flight_app/ui/themes/theme_breakpoints.dart';
LayoutBuilder(
builder: (context, constraints) {
return Container(
height: ThemeConstraint.mdUp(constraints) ? 280 : 320,
)
}
);
-
ThemeConstraint: This class similiar like ThemeBreakpoints, but it has
constraint parameter.
You can use it with LayoutBuilder to get and set the constraint value.
import 'package:flight_app/ui/themes/theme_breakpoints.dart';
LayoutBuilder(
builder: (context, constraints) {
return Container(
height: ThemeConstraint.mdUp(constraints) ? 280 : 320,
)
}
);
Theme Radius and Shadow
/lib/ui/themes/theme_radius.dart and
/lib/ui/themes/theme_shadow.dart
-
Theme Radius is a
BorderRadiusGeomentry using BorderRadius.circular which has same radius value on each corner
import 'package:flight_app/ui/themes/theme_radius.dart';
Container(
decoration: BoxDecoration(
borderRadius: ThemeRadius.small,
color: Colors.amber,
),
)
-
Theme Shadow is the global style for shadow
shadeSoft, shadeMedium, and shadeHard
import 'package:flight_app/ui/themes/theme_shadow.dart';
Container(
width: 180,
decoration: BoxDecoration(
color: colorScheme(context).surface,
borderRadius: ThemeRadius.medium,
boxShadow: [ThemeShade.shadeSoft(context)],
),
)
Layout
This template has 2 layouts Home Layout and General Layout
-
Home Layout has Bottom Menu for main app navigation.
import 'package:flight_app/ui/layouts/home_layout.dart';
GetPage(
name: AppLink.myTicket,
page: () => const HomeLayout(content: OrderList()),
transition: Transition.fadeIn,
transitionDuration: const Duration(milliseconds: pageTransitionDuration)
),
-
General Layout doesn't have any additional widget, just blank layout with constraint maxWidth: 1024 and minHeight: 480
import 'package:flight_app/ui/layouts/general_layout.dart';
GetPage(
name: AppLink.formSample,
page: () => const GeneralLayout(content: FormInputCollection()),
),
