Skip to content

Installation

Step-by-step guide to utitlise superwrapper in your new/ existing project.
Flutter Logo

Flutter

1. Replace your pubspec.yaml file with this file. Either way you can add the required dependencies in your current pubspec.yaml file.
DT
pubspec.yaml

name: superwrapper_material
description: material for superwrapper
publish_to: "none"

version: 1.0.0+1

environment:
  sdk: ">=2.18.6 <3.0.0"
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  eva_icons_flutter: ^3.0.2
  font_awesome_flutter: ^9.2.0
  provider: ^5.0.0
  iconsax: ^0.0.8
  sizer: ^2.0.15
  flutter_dotenv: ^5.0.2
  fl_chart: ^0.65.0
  cache_manager: any
  table_calendar:
  shadcn_ui:
  flutter_animate:
  pin_code_fields:
  flutter_svg:
  flutter_hooks:
  flutter_rating_bar:
  timeago:
  intl:
  persistent_bottom_nav_bar:
    git:
      url: https://github.com/HamzaSamirAmmar/PersistentBottomNavBar.git

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
flutter:
  assets:
    - assets/animations/loader.json
    - assets/animations/empty_1.json

  uses-material-design: true
  fonts:
    - family: Manrope-Bold
      fonts:
        - asset: assets/fonts/Manrope-Bold.ttf

    - family: Manrope-ExtraBold
      fonts:
        - asset: assets/fonts/Manrope-ExtraBold.ttf

    - family: Manrope-Light
      fonts:
        - asset: assets/fonts/Manrope-Light.ttf

    - family: Manrope-Medium
      fonts:
        - asset: assets/fonts/Manrope-Medium.ttf

    - family: Helvetica-Black
      fonts:
        - asset: assets/fonts/Helvetica-Black.otf

    - family: Helvetica-Bold
      fonts:
        - asset: assets/fonts/Helvetica-Bold.ttf

    - family: Helvetica
      fonts:
        - asset: assets/fonts/Helvetica.ttf

    - family: Geist-Black
      fonts:
        - asset: assets/fonts/Geist-Black.ttf

    - family: Geist-Medium
      fonts:
        - asset: assets/fonts/Geist-Medium.ttf

    - family: Geist-Bold
      fonts:
        - asset: assets/fonts/Geist-Bold.ttf

    - family: Geist-Light
      fonts:
        - asset: assets/fonts/Geist-Light.ttf

    - family: Haskoy ExtraBold
      fonts:
        - asset: assets/fonts/Haskoy ExtraBold.ttf

    - family: Haskoy Light
      fonts:
        - asset: assets/fonts/Haskoy Light.ttf

    - family: Haskoy Medium
      fonts:
        - asset: assets/fonts/Haskoy Regular.ttf

    - family: Haskoy Bold
      fonts:
        - asset: assets/fonts/Haskoy Bold.ttf

    - family: Instrument-Serif-Regular
      fonts:
        - asset: assets/fonts/Instrument-Serif-Regular.ttf
Read-only
2. Create a colors.dart file to use common colors. You can add more colors if you want.
DT
colors.dart

import 'package:flutter/cupertino.dart';

class KConstantColors {
  //! light
  static const greyColor = Color.fromRGBO(222, 222, 222, 1);
  static const whiteColor = Color.fromRGBO(250, 250, 250, 1);
  static var faintWhiteColor = whiteColor.withOpacity(0.5);

  //! dark
  static const bgColor = Color.fromRGBO(15, 15, 15, 1);
  static const bgColorFaint = Color.fromRGBO(30, 30, 30, 1);
  static var faintBgColor = bgColor.withOpacity(0.5);

  //! other
  static const appPrimaryColor = Color.fromRGBO(0, 0, 255, 2);
  static const primaryColor = Color.fromRGBO(168, 168, 168, 2);
  static const secondaryColor = appPrimaryColor;
  static const blueColor = CupertinoColors.systemBlue;
  static const green = Color.fromRGBO(4, 149, 65, 1);
  static const redColor = CupertinoColors.systemRed;
}
Read-only
3. Create a dimensions.dart file to use common colors. You can add more custom dimensions if you want.
DT
dimensions.dart

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

double vBox0 = 0.5.h;
double vBox1 = 1.0.h;
double vBox2 = 2.0.h;
double vBox3 = 4.0.h;
double vBox4 = 16.0.h;
double vBox5 = 32.0.h;

double hBox0 = 0.5.w;
double hBox1 = 1.0.w;
double hBox2 = 2.0.w;
double hBox3 = 4.0.w;
double hBox4 = 8.0.w;
double hBox5 = 16.0.w;

SizedBox vSizedBox0 = SizedBox(height: vBox0);
SizedBox vSizedBox1 = SizedBox(height: vBox1);
SizedBox vSizedBox2 = SizedBox(height: vBox2);
SizedBox vSizedBox3 = SizedBox(height: vBox3);
SizedBox vSizedBox4 = SizedBox(height: vBox4);
SizedBox vSizedBox5 = SizedBox(height: vBox5);

SizedBox hSizedBox0 = SizedBox(width: hBox0);
SizedBox hSizedBox1 = SizedBox(width: hBox1);
SizedBox hSizedBox2 = SizedBox(width: hBox2);
SizedBox hSizedBox3 = SizedBox(width: hBox3);
SizedBox hSizedBox4 = SizedBox(width: hBox4);
SizedBox gSizedBox5 = SizedBox(height: hBox5);
Read-only
4. Create a textstyles.dart file to use custom textstyles in the project. You can skip this step if you've already used your custom file.
DT
textstyles.dart

import '../../shared/exports/export_boiler_plate.dart';
import 'fonts.dart';

class KCustomTextStyle {
  static kBold(BuildContext context, double? fontSize,
      [Color? color,
      String? fontFamily,
      bool needItalics = false,
      FontWeight? fontWeight,
      bool isOverline = false]) {
    return TextStyle(
        decorationColor: Colors.red,
        decoration: isOverline ? TextDecoration.lineThrough : null,
        fontFamily: fontFamily ?? KConstantFonts.manropeBold,
        fontSize: fontSize?.sp ?? FontSize.kMedium.sp,
        fontStyle: needItalics ? FontStyle.italic : FontStyle.normal,
        fontWeight: fontWeight ?? FontWeight.bold,
        color: color ?? KConstantColors.whiteColor);
  }

  static kBoldArp(BuildContext context, double? fontSize,
      [Color? color,
      String? fontFamily,
      bool needItalics = false,
      FontWeight? fontWeight,
      bool isOverline = false]) {
    return TextStyle(
        decorationColor: KConstantColors.bgColor,
        decoration: isOverline
            ? TextDecoration.combine([TextDecoration.lineThrough])
            : null,
        fontFamily: fontFamily ?? KConstantFonts.manropeExtraBold,
        fontSize: fontSize?.sp ?? FontSize.kMedium.sp,
        fontStyle: needItalics ? FontStyle.italic : FontStyle.normal,
        fontWeight: fontWeight ?? FontWeight.w900,
        color: color ?? KConstantColors.whiteColor);
  }

  static kLight(BuildContext context, double? fontSize,
      [Color? color,
      String? fontFamily,
      bool needItalics = false,
      FontWeight? fontWeight,
      bool isOverline = false]) {
    return TextStyle(
        decorationColor: Colors.white,
        decoration: isOverline ? TextDecoration.lineThrough : null,
        fontFamily: fontFamily ?? KConstantFonts.manropeLight,
        fontSize: fontSize?.sp ?? FontSize.kMedium.sp,
        fontStyle: needItalics ? FontStyle.italic : FontStyle.normal,
        fontWeight: fontWeight ?? FontWeight.bold,
        color: color ?? KConstantColors.whiteColor);
  }

  static kMedium(BuildContext context, double? fontSize,
      [Color? color,
      String? fontFamily,
      bool needItalics = false,
      FontWeight? fontWeight,
      bool isOverline = false]) {
    return TextStyle(
        decorationColor: Colors.red,
        fontWeight: fontWeight,
        decoration: isOverline ? TextDecoration.lineThrough : null,
        fontStyle: needItalics ? FontStyle.italic : FontStyle.normal,
        fontFamily: fontFamily ?? KConstantFonts.manropeLight,
        fontSize: fontSize?.sp ?? FontSize.kMedium.sp,
        color: color ?? KConstantColors.whiteColor);
  }
}
Read-only
5. Create fonts.dart file to create commonly used fonts in the project.
DT
fonts.dart

class KConstantFonts {
  static const String manropeLight = "Manrope-Light";
  static const String manropeBold = "Manrope-ExtraBold";
  static const String manropeExtraBold = "Manrope-ExtraBold";
  static const String manropeMedium = "Manrope-Medium";
  static const String helveticaMedium = "Helvetica";
  static const String helveticaBold = "Helvetica-Bold";
  static const String helveticaBlack = "Helvetica-Black";
  static const String geistLight = "Geist-Light";
  static const String geistBlack = "Geist-Black";
  static const String geistBold = "Geist-Bold";
  static const String geistMedium = "Geist-Medium";
  static const String haskoyExtraBold = "Haskoy ExtraBold";
  static const String haskoyBold = "Haskoy Bold";
  static const String haskoyMedium = "Haskoy Medium";
  static const String haskoyLight = "Haskoy Light";
  static const String interRegular = "Inter-Regular";
}
Read-only
6. Use this main.dart file's code in your current main.dart file. Please check pubspec.yaml file for the required packages.
DT
main.dart

import 'package:superwrapper_material/modules/orders/9.%20adidas-orders.dart';
import 'modules/notifications/4. deel-notification.dart';
import 'shared/exports/export_boiler_plate.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const Core());
}

class Lava extends StatelessWidget {
  const Lava({super.key});

  @override
  Widget build(BuildContext context) {
    return Sizer(builder: ((context, orientation, deviceType) {
      return const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: AdidasOrderScreen(),
      );
    }));
  }
}

class Core extends StatelessWidget {
  const Core({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (val) => DeelNotificationNotifier(),
      child: const Lava(),
    );
  }
}

class DefaultView extends StatelessWidget {
  const DefaultView({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}
Read-only
7. Use this export_boiler_plate.dart file to import all required dependencies at one place.
DT
export_boiler_plate.dart

// ignore_for_file: prefer_const_constructors, use_build_context_synchronously
export '../../../shared/widgets/scaffold_shell.dart';
export '../../../app/shared/colors.dart';
export '../../../app/shared/font_size.dart';
export '../../../app/shared/text_styles.dart';
export 'package:flutter/material.dart';
export '../../../app/shared/dimensions.dart';
export 'package:font_awesome_flutter/font_awesome_flutter.dart';
export '../../../shared/widgets/custom_buttons.dart';
export '../../../shared/widgets/custom_snackbar.dart';
export 'package:provider/provider.dart';
export '../../../shared/widgets/custom_app_bar.dart';
export 'package:sizer/sizer.dart';
export 'package:cache_manager/cache_manager.dart';
export 'package:flutter/services.dart';
export 'package:eva_icons_flutter/eva_icons_flutter.dart';
export '../../../shared/widgets/custom_numeric_textfield.widget.dart';
export 'package:iconsax/iconsax.dart';
export '../../../main.dart';
export '../../../shared/widgets/custom_action_chip.widget.dart';
export '../../../shared/widgets/custom_bottom_sheet.widget.dart';
Read-only
React Native and SwiftUI docs coming soon