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:ewallet_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:ewallet_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:ewallet_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:ewallet_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:ewallet_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:ewallet_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:ewallet_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:ewallet_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:ewallet_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:ewallet_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 7 layouts Home Layout and General Layout
-
Home Layout has Bottom Menu for main app navigation.
import 'package:ewallet_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:ewallet_app/ui/layouts/general_layout.dart';
GetPage(
name: AppLink.formSample,
page: () => const GeneralLayout(content: FormInputCollection()),
),
-
Default Layout used by mostly screen. It has AppBar with decoration and back button, and also required title
import 'package:ewallet_app/ui/layouts/default_layout.dart';
GetPage(
name: AppLink.transfer,
page: () => DefaultLayout(
title: 'Transfer',
content: TransferScreen(),
actions: [HistoryBtn(
onPressed: () {
Get.toNamed(AppLink.history);
}
)]
),
),
-
Product Layout used by product list screen to choose product item before make a purchase. It has banner-cover style with SliverPersistentHeader and containing short description with an icon.
import 'package:ewallet_app/ui/layouts/product_layout.dart';
ProductLayout(
title: 'Education',
headline: 'Invest in Learning',
searchTitle: 'Search streamings and entertainments',
desc: 'Pay tuition, courses, and e-learning easily from your e-wallet.',
icon: ImgApi.icon3Education,
background: ImgApi.educationBg,
color: getCategory('education').color,
children: <Widget>[
/// ...Item Widgets
]
);
-
Purchase Layout It used by purchase product screen. It has cover and title base on vendor attributes and tab custom categories.
The tab menus are depend on vendor provided products like packages, voucher, or billing.
import 'package:ewallet_app/ui/layouts/purchase_layout.dart';
PurchaseLayout(
scaffoldKey: _scaffoldKey,
name: vendor.name,
image: vendor.banner ?? ImgApi.photo[102],
menus: <String>['Plans', 'Billings', 'Vouchers'],
tabController: _tabController,
children: <Widget>[
/// ... Widget
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
/// ...Tab Items
],
)
),
]
);
-
Purchase Cover Layout It used by purchase product screen. It has banner-cover style with SliverPersistentHeader and containing short description with an icon.
The tab menus are depend on vendor provided products like packages, voucher, or billing.
import 'package:ewallet_app/ui/layouts/purchase_cover_layout.dart';
PurchaseCoverLayout(
scaffoldKey: _scaffoldKey,
name: 'Mobile',
headline: 'Stay Connected',
desc: 'Top up your data and packages instantly, anywhere you go.',
icon: ImgApi.icon3dMobile,
background: ImgApi.mobileBg,
color: getCategory('mobile').color,
menus: <String>['Packages', 'Topup', 'Billing'],
tabController: _tabController,
scrollController: _scrollLayout,
extendBottom: Container(
/// INPUT ID
padding: EdgeInsets.symmetric(horizontal: spacingUnit(1)),
child: InputIdNumber(
/// ...Extended Widget Attributes
),
),
children: <Widget>[
/// CONTENT
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
/// ...Tab Items
],
),
),
],
);
-
Billing Layout It used by billing product screen. It has cover and title base on vendor attributes and input id number.
import 'package:ewallet_app/ui/layouts/billing_layout.dart';
BillingLayout(
name: vendor.name,
image: vendor.banner ?? ImgApi.photo[102],
child: Obx(() => _inputController.isValidInput.value ? BillingDetail(
name: 'TV Subscription Billing',
icon: CircleAvatar(
radius: 26,
backgroundColor: getCategory('tv').color.withValues(alpha: 0.5),
child: Image.asset(getCategory('tv').image, width: 36,),
)
) : NoData(
image: ImgApi.promoTv,
title: 'Pay TV Billing',
desc: 'Type ID number to check your TV subscription billing',
))
);
