Feature -> Develop | Updated env tag wrapper with tag panel

README.md

@@ -90,13 +90,13 @@ iOS Production
 
 ## VaahExtendedFlutter
 
-### Central log library:
+### → Central log library:
 
 Can be used for logging different details. All methods are static thus no instance of Console is required. Console.info() method will print info in blue color font, Console.success() method will print log in green color font, Console.warning() method will print log in yellow color font, and Console.danger() method will print log in red color font. The files reside in `lib/vaahextendflutter/log/` folder.
 
-### Environment and Version Tag
+### → Environment and Version Tag Panel
 
-Environment and Version Tag can be seen on every page unless you set `showEnvAndVersionTag` for your Environment configuration in `env.dart` file. You can change color of tag by setting `envAndVersionTagColor` variable for your Environment configuration. 
+Environment and Version Tag can be seen on every page unless you set `showEnvAndVersionTag` to `false` for your Environment configuration in `env.dart` file. You can change color of tag by setting `envAndVersionTagColor` variable for your Environment configuration. 
 
 NOTE: `Remember showEnvAndVersionTag for production should always be false in Environment configuration in `env.dart` file.`
 ```dart
@@ -106,6 +106,60 @@ NOTE: `Remember showEnvAndVersionTag for production should always be false in En
   ),
 ```
 
-NOTE: Whenever you create a new screen/ page, wrap the body with `TagWrapper` class.
+#### NOTE: You have to write below code in MaterialApp, and that will show tag panel on each screen. You don't have to wrap any other screen/ widget, or you don't have to extend any screen/ any widget with TagPanelHost.
+
+In file cotaining material app paste this code after imports
+```dart
+final _navigatorKey = GlobalKey<NavigatorState>();
+```
+ In material app paste this code and panel will be visible on all pages.
+```dart
+builder: (BuildContext context, Widget? child) {
+  return TagPanelHost(
+    navigatorKey: _navigatorKey,
+    child: child!,
+  );
+},
+```
+This panel uses EnvController, thus dependens on env.dart file.
+
+### → Dynamic fontsize, dynamic width, dynamic height depending on device size
+
+To use it directly by importing `screen_util.dart` check Usage: comment in `screen_util.dart` file. 
+
+Or for feasibility extend your Statelesswidgets with BaseStateless
+```dart
+class DemoPage extends BaseStateful {
+}
+```
+
+And Statefull widgets with BaseStateful widgets
+```dart
+class _DemoPageState extends BaseStateful<DemoPage> {
+...
+}
+```
+After that you can use dynamic size in that extended widget.
+```dart
+SizedBox(
+  width: 300.wExt, // or swExt
+  height: 200.hExt, // or shExt
+  child: Text(
+    'demo',
+    style: TextStyle(
+      fontSize: 20.spExt,
+    ),
+  ),
+);
+```
+
+### → Base widgets
+`vaahextendflutter/base` folder contains all the base classes/ widgets.
+
+BaseStateless and BaseStateful are used when dev wants to init/ add dependencies in many screens and don't want to write same logic in every file, so they write the logic in base files only. eg. internet connectivity checker, dynamic size dependency, etc.
+
+so base class implements those logics and other classes can extend the base classes.
+
+### → Helpers
+Most common constants and styles used in whole app.
 
-You can use alignment and margin properties for achieving desired results using TagWrapper.

lib/env.dart

@@ -15,13 +15,14 @@ EnvironmentConfig defaultConfig = const EnvironmentConfig(
   envType: 'default',
   version: version,
   build: build,
-  baseUrl: '',
-  apiBaseUrl: '',
-  analyticsId: '',
+  backendUrl: '', // base url or backend url
+  apiUrl: '', // api base url
+  firebaseId: '', // firebase id
   enableConsoleLogs: true,
   enableLocalLogs: true,
   showEnvAndVersionTag: true,
-  envAndVersionTagColor: Colors.red,
+  envAndVersionTagColor: Color(
+      0xAA000000), // first 2 digit after 0x represents the opacity where CC being max and 00 being min
 );
 
 // To add new configuration add new key, value pair in envConfigs
@@ -73,9 +74,9 @@ class EnvironmentConfig {
   final String envType;
   final String version;
   final String build;
-  final String baseUrl;
-  final String apiBaseUrl;
-  final String analyticsId;
+  final String backendUrl;
+  final String apiUrl;
+  final String firebaseId;
   final bool enableConsoleLogs;
   final bool enableLocalLogs;
   final bool showEnvAndVersionTag;
@@ -85,9 +86,9 @@ class EnvironmentConfig {
     required this.envType,
     required this.version,
     required this.build,
-    required this.baseUrl,
-    required this.apiBaseUrl,
-    required this.analyticsId,
+    required this.backendUrl,
+    required this.apiUrl,
+    required this.firebaseId,
     required this.enableConsoleLogs,
     required this.enableLocalLogs,
     required this.showEnvAndVersionTag,
@@ -98,9 +99,9 @@ class EnvironmentConfig {
     String? envType,
     String? version,
     String? build,
-    String? baseUrl,
-    String? apiBaseUrl,
-    String? analyticsId,
+    String? backendUrl,
+    String? apiUrl,
+    String? firebaseId,
     bool? enableConsoleLogs,
     bool? enableLocalLogs,
     bool? showEnvAndVersionTag,
@@ -110,9 +111,9 @@ class EnvironmentConfig {
       envType: envType ?? this.envType,
       version: version ?? this.version,
       build: build ?? this.build,
-      baseUrl: baseUrl ?? this.baseUrl,
-      apiBaseUrl: apiBaseUrl ?? this.apiBaseUrl,
-      analyticsId: analyticsId ?? this.analyticsId,
+      backendUrl: backendUrl ?? this.backendUrl,
+      apiUrl: apiUrl ?? this.apiUrl,
+      firebaseId: firebaseId ?? this.firebaseId,
       enableConsoleLogs: enableConsoleLogs ?? this.enableConsoleLogs,
       enableLocalLogs: enableLocalLogs ?? this.enableLocalLogs,
       showEnvAndVersionTag: showEnvAndVersionTag ?? this.showEnvAndVersionTag,

lib/main.dart

@@ -2,9 +2,10 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
 import 'env.dart';
-import 'vaahextendflutter/log/console.dart';
 import 'vaahextendflutter/base/base_stateful.dart';
-import 'vaahextendflutter/tag/tag.dart';
+import 'vaahextendflutter/helpers/constants.dart';
+import 'vaahextendflutter/log/console.dart';
+import 'vaahextendflutter/tag/tag_panel.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
@@ -22,6 +23,8 @@ void main() {
   runApp(const TeamApp());
 }
 
+final _navigatorKey = GlobalKey<NavigatorState>();
+
 class TeamApp extends StatelessWidget {
   const TeamApp({super.key});
 
@@ -30,14 +33,30 @@ class TeamApp extends StatelessWidget {
     return MaterialApp(
       title: 'WebReinvent Team',
       theme: ThemeData(
-        primarySwatch: Colors.blue,
+        primarySwatch: kPrimaryColor,
       ),
-      home: const TeamHomePage(),
+      onGenerateInitialRoutes: (String initialRoute) {
+        return [TeamHomePage.route()];
+      },
+      onGenerateRoute: onGenerateRoute,
+      builder: (BuildContext context, Widget? child) {
+        return TagPanelHost(
+          navigatorKey: _navigatorKey,
+          child: child!,
+        );
+      },
     );
   }
 }
 
 class TeamHomePage extends StatefulWidget {
+  static Route<void> route() {
+    return MaterialPageRoute(
+      settings: const RouteSettings(name: '/'),
+      builder: (_) => const TeamHomePage(),
+    );
+  }
+
   const TeamHomePage({super.key});
 
   @override
@@ -58,13 +77,16 @@ class _TeamHomePageState extends BaseStateful<TeamHomePage> {
     super.build(context);
     return Scaffold(
       appBar: AppBar(),
-      body: const TagWrapper(
-        alignment: Alignment.topCenter,
-        margin: EdgeInsets.all(10),
-        child: Center(
-          child: Text('Webreinvent'),
-        ),
+      body: const Center(
+        child: Text('Webreinvent'),
       ),
     );
   }
 }
+
+Route<dynamic>? onGenerateRoute(RouteSettings settings) {
+  if (settings.name == '/') {
+    return TeamHomePage.route();
+  }
+  return null;
+}

lib/vaahextendflutter/base/base_stateless.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+
 import '../services/screen_util.dart';
 
 abstract class BaseStateless extends StatelessWidget with DynamicSize {

lib/vaahextendflutter/helpers/constants.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+
+const double kDeafaultPadding = 16.0;
+const double kDeafaultMargin = 16.0;
+
+const MaterialColor kPrimaryColor = Colors.amber;
+const MaterialColor kSecondaryColor = Colors.amber;
+
+// Common Widgets
+const emptyWidget = SizedBox();
+const emptyWidgetWide = SizedBox(width: double.infinity);
+const emptyIconButton = SizedBox(width: kMinInteractiveDimension);
+
+// Layout Margins
+const horizontalMargin4 = SizedBox(width: 4.0);
+const horizontalMargin8 = SizedBox(width: 8.0);
+const horizontalMargin12 = SizedBox(width: 12.0);
+const horizontalMargin16 = SizedBox(width: 16.0);
+const horizontalMargin24 = SizedBox(width: 24.0);
+const horizontalMargin32 = SizedBox(width: 32.0);
+const horizontalMargin48 = SizedBox(width: 48.0);
+
+const verticalMargin2 = SizedBox(height: 2.0);
+const verticalMargin4 = SizedBox(height: 4.0);
+const verticalMargin8 = SizedBox(height: 8.0);
+const verticalMargin12 = SizedBox(height: 12.0);
+const verticalMargin16 = SizedBox(height: 16.0);
+const verticalMargin24 = SizedBox(height: 24.0);
+const verticalMargin32 = SizedBox(height: 32.0);
+const verticalMargin48 = SizedBox(height: 48.0);
+
+const sliverVerticalMargin4 = SliverToBoxAdapter(child: SizedBox(height: 4.0));
+const sliverVerticalMargin8 = SliverToBoxAdapter(child: SizedBox(height: 8.0));
+const sliverVerticalMargin12 =
+    SliverToBoxAdapter(child: SizedBox(height: 12.0));
+const sliverVerticalMargin16 =
+    SliverToBoxAdapter(child: SizedBox(height: 16.0));
+const sliverVerticalMargin24 =
+    SliverToBoxAdapter(child: SizedBox(height: 24.0));
+const sliverVerticalMargin32 =
+    SliverToBoxAdapter(child: SizedBox(height: 32.0));
+const sliverVerticalMargin48 =
+    SliverToBoxAdapter(child: SizedBox(height: 48.0));
+
+// Layout Paddings
+const horizontalPadding4 = EdgeInsets.symmetric(horizontal: 4.0);
+const horizontalPadding8 = EdgeInsets.symmetric(horizontal: 8.0);
+const horizontalPadding12 = EdgeInsets.symmetric(horizontal: 12.0);
+const horizontalPadding16 = EdgeInsets.symmetric(horizontal: 16.0);
+const horizontalPadding24 = EdgeInsets.symmetric(horizontal: 24.0);
+const horizontalPadding32 = EdgeInsets.symmetric(horizontal: 32.0);
+const horizontalPadding48 = EdgeInsets.symmetric(horizontal: 48.0);
+
+const verticalPadding2 = EdgeInsets.symmetric(vertical: 2.0);
+const verticalPadding4 = EdgeInsets.symmetric(vertical: 4.0);
+const verticalPadding8 = EdgeInsets.symmetric(vertical: 8.0);
+const verticalPadding12 = EdgeInsets.symmetric(vertical: 12.0);
+const verticalPadding16 = EdgeInsets.symmetric(vertical: 16.0);
+const verticalPadding24 = EdgeInsets.symmetric(vertical: 24.0);
+const verticalPadding32 = EdgeInsets.symmetric(vertical: 32.0);
+const verticalPadding48 = EdgeInsets.symmetric(vertical: 48.0);
+
+const emptyPadding = EdgeInsets.zero;
+
+const allPadding4 = EdgeInsets.all(4.0);
+const allPadding8 = EdgeInsets.all(8.0);
+const allPadding12 = EdgeInsets.all(12.0);
+const allPadding16 = EdgeInsets.all(16.0);
+const allPadding24 = EdgeInsets.all(24.0);
+const allPadding32 = EdgeInsets.all(32.0);
+const allPadding48 = EdgeInsets.all(48.0);
+
+const leftPadding4 = EdgeInsets.only(left: 4.0);
+const leftPadding8 = EdgeInsets.only(left: 8.0);
+const leftPadding12 = EdgeInsets.only(left: 12.0);
+const leftPadding16 = EdgeInsets.only(left: 16.0);
+const leftPadding24 = EdgeInsets.only(left: 24.0);
+const leftPadding32 = EdgeInsets.only(left: 32.0);
+const leftPadding48 = EdgeInsets.only(left: 48.0);
+
+const topPadding1 = EdgeInsets.only(top: 1.0);
+const topPadding2 = EdgeInsets.only(top: 2.0);
+const topPadding4 = EdgeInsets.only(top: 4.0);
+const topPadding8 = EdgeInsets.only(top: 8.0);
+const topPadding12 = EdgeInsets.only(top: 12.0);
+const topPadding16 = EdgeInsets.only(top: 16.0);
+const topPadding24 = EdgeInsets.only(top: 24.0);
+const topPadding32 = EdgeInsets.only(top: 32.0);
+const topPadding48 = EdgeInsets.only(top: 48.0);
+
+const rightPadding4 = EdgeInsets.only(right: 4.0);
+const rightPadding8 = EdgeInsets.only(right: 8.0);
+const rightPadding12 = EdgeInsets.only(right: 12.0);
+const rightPadding16 = EdgeInsets.only(right: 16.0);
+const rightPadding24 = EdgeInsets.only(right: 24.0);
+const rightPadding32 = EdgeInsets.only(right: 32.0);
+const rightPadding48 = EdgeInsets.only(right: 48.0);
+
+const bottomPadding1 = EdgeInsets.only(bottom: 1.0);
+const bottomPadding2 = EdgeInsets.only(bottom: 2.0);
+const bottomPadding4 = EdgeInsets.only(bottom: 4.0);
+const bottomPadding8 = EdgeInsets.only(bottom: 8.0);
+const bottomPadding12 = EdgeInsets.only(bottom: 12.0);
+const bottomPadding16 = EdgeInsets.only(bottom: 16.0);
+const bottomPadding24 = EdgeInsets.only(bottom: 24.0);
+const bottomPadding32 = EdgeInsets.only(bottom: 32.0);
+const bottomPadding48 = EdgeInsets.only(bottom: 48.0);
+
+const duration250milli =
+    Duration(milliseconds: 250); // best suitable for animations
+const duration300milli = Duration(milliseconds: 300);
+const duration400milli = Duration(milliseconds: 400);
+const duration500milli = Duration(milliseconds: 500);
+const duration600milli = Duration(milliseconds: 600);
+const duration700milli = Duration(milliseconds: 700);
+const duration800milli = Duration(milliseconds: 800);
+const duration900milli = Duration(milliseconds: 900);
+const duration1000milli = Duration(milliseconds: 1000);