Re-skin application

Barcode & Qr-code All in one
Search…
Barcode & Qr-code All in one
Introduction
android-app-build-on-macos
Flutter Environment
android-app-build-on-windows-os
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!
App Release on Wiindows
Last modified 10mo ago
Copy link