Re-skin application
Change the application to your look and feel
Updating application Colors
Open scanner project folder navigate to "lib/shared/constants.dart" , in this file you will find few shared constants
Adjust these shared constants based on your needs
1
static String appTitle = 'Free QR Code Scanner - Barcode Scanner 2020';
2
static double headerHeight = 228.5; // default header height
3
static double mainPadding = 20.0; // Default main Padding
4
static double secondaryPadding = 10.0; // Default secondary padding
5
6
static Color primaryColor = Color(0xFFFF7D54); // The orange Color that dominates most the appplication
7
static Color textColor = Color(0xFF1E1E1E); // Text black faded color used on most texts
8
static Color greyColor = Color(0xFFA0A0A0); // Grey color used ass accent color in the application
9
Copied!
Bottom navigation bar
Navigate to the files highlighted by red color
To change menu style go to bottom_navigation.dart in which BottomNavigation in there you will be able to change to your desired menus in this application it used a custom menu bar found in "widgets/nav_bar.dart". Simply update the implementation in bottomNavigation bar from line 53 and add your desired navigation bar.
Tab navigation, to update how pages are navigated check in tab_navigation.dart, in this page you will be able to update which pages are navigated based on navigator index. In this page you will find a Map of Tabindex and widgetBuilder
1
Map<TabIndex, WidgetBuilder> _routeBuilders(BuildContext context) {
2
return {
3
TabIndex.scan: (context) => ScannerPage(settings),
4
TabIndex.setting: (context) => SettingsPage(callback),
5
TabIndex.history: (context) => HistoryPage(settings),
6
};
7
}
8
Copied!
which is assigned to
1
var routeBuilders = _routeBuilders(context);
Copied!
identifying which page to serve when menu item is clicked, the application used TabIndex found in bottom_navigation.dart
1
enum TabIndex { scan, history, setting }
2
3
class TabIndexHelper {
4
static TabIndex item({int index}) {
5
switch (index) {
6
case 0:
7
return TabIndex.scan;
8
case 1:
9
return TabIndex.history;
10
// case 2:
11
// return TabIndex.create;
12
case 2:
13
return TabIndex.setting;
14
}
15
return TabIndex.scan;
16
}
17
18
static index(TabIndex tabIndex) {
19
switch (tabIndex) {
20
case TabIndex.scan:
21
return 0;
22
case TabIndex.history:
23
return 1;
24
// case TabIndex.create:
25
// return 2;
26
case TabIndex.setting:
27
return 2;
28
}
29
}
30
}
Copied!
Last modified 10mo ago
Copy link