tbib_style 1.0.0
tbib_style: ^1.0.0 copied to clipboard

A Package for flutter you can control your font like bootstrap 5 with google font.

tbib_style #

A Package for flutter.

You can use the package to control your font easily.

you can control your font with google font package

tutorial #

default style should use in desktop #

propertydescription
h1fontSize: 40, fontWeight: FontWeight.bold, height: 1.2
h2fontSize: 32, fontWeight: FontWeight.w600, height: 1.2
h3fontSize: 28, fontWeight: FontWeight.w600, height: 1.2
h4fontSize: 24, fontWeight: FontWeight.w500, height: 1.2
h5fontSize: 20, height: 1.2
h6fontSize: 16, height: 1.2
b1fontSize: 20, fontWeight: FontWeight.w500, height: 1.2
b2fontSize: 16, fontWeight: FontWeight.w400, height: 1.2

important information #

in this version can use lisenGoogleFont without choose h number

TBIBFontStyle.lisenGoogleFont(GoogleFonts.roboto());

when use TBIBFontStyle.lisenGoogleFont( GoogleFonts.aBeeZee(textStyle: TBIBFontStyle.h2), 2);

  TBIBFontStyle.addCustomFont("BerthaMelanie", 3);
  
  you see ,2 ?? 2 meaning h2 in this library you have h1 to h6 only and b1 take style from h5 and b2 take style from h6

when use Pacakge google font use it in first code then edit your style

you can use code in main to handle all fonts in light and dark mode #

  
//h1 style that mean h1 in library change fontFamily with BerthaMelanie
  TBIBFontStyle.h1 = TBIBFontStyle.h1.copyWith(fontFamily: "BerthaMelanie");
  //dark h1
    // 0.0.6 not need change color to white it is default

  TBIBFontStyle.h1Dark = TBIBFontStyle.h1Dark.copyWith(color: Colors.white);

//h2 dark with default style but in dark mode with color white
  // 0.0.6 not need change color to white it is default

  TBIBFontStyle.h2Dark = TBIBFontStyle.h2Dark.copyWith(color: Colors.white);

  //h3 and h3Dark style will change fontFamily with BerthaMelanie like in h1
  // ,3 is mean h3
  TBIBFontStyle.addCustomFont("BerthaMelanie", 3);
  // h3 dark  will be color white 
  // 0.0.6 not need change color to white it is default
  TBIBFontStyle.h3Dark = TBIBFontStyle.h3Dark.copyWith(color: Colors.white);

You can use responsive font size in 0.0.6 or above #

  double width = MediaQuery.of(context).size.width;
     TBIBFontStyle.responsiveFontSize(width);
     // or use that and make h1 and h1Dark in screen < 1200
     TBIBFontStyle.responsiveFontSize(width ,h1Size: 20,);
     //or use that to make h1 in screen >= 1200 50 px and < 1200 will be 20
     TBIBFontStyle.responsiveFontSize(width ,h1Size: 20, h1SizePc: 50);

when use responsive font size in screen < 1200 default #

propertydescription
h1fontSize: 22 + ((1.5 * screenWidth) / 100), fontWeight: FontWeight.bold, height: 1.2
h2fontSize: 21.2 + ((.9 * screenWidth) / 100), fontWeight: FontWeight.w600, height: 1.2
h3fontSize: 20.8 + ((.6 * screenWidth) / 100), fontWeight: FontWeight.w600, height: 1.2
h4fontSize: 20.4 + ((.3 * screenWidth) / 100), fontWeight: FontWeight.w500, height: 1.2
h5fontSize: 20, height: 1.2
h6fontSize: 16, height: 1.2
b1fontSize: 20, fontWeight: FontWeight.w500, height: 1.2
b2fontSize: 16, fontWeight: FontWeight.w400, height: 1.2

you can use GoogleFont flutter package like this #

      /*
      */
// in all h number font family is roboto from GoogleFont Package 

       TBIBFontStyle.lisenGoogleFont(GoogleFonts.roboto());


         that mean h2 font family is aBeeZee from GoogleFont Package 

    TBIBFontStyle.lisenGoogleFont(
      GoogleFonts.aBeeZee(textStyle: TBIBFontStyle.h2), 2);

you can use custom font #

    /*
    I download BerthaMelanie font and added it in pubspec 
    and when add this code in main it mean h3 and h3Dark fontFamily = BerthaMelanie
    */
   TBIBFontStyle.addCustomFont("BerthaMelanie", 3);

you can use deafult style in flutter h1 = headline1 but should remove responsive font size #

   TBIBFontStyle.defaultFlutterStyle();

when use light and dark mode #

    Text(
        "Text color mode",
        style: isDark ? TBIBFontStyle.h3Dark : TBIBFontStyle.h3,
    ),

this is deprecated and not working properly #

You can use responsive font size TBIBFontStyle.fontResponsive(width ); deprecated #

    /*
    that mean use font responsive with default style library in mobile 
    */
    double width = MediaQuery.of(context).size.width;
    TBIBFontStyle.fontResponsive(width );

You can use responsive font size deprecated #

    /*
    that mean use font responsive with default style library in mobile 
    */
    double width = MediaQuery.of(context).size.width;
   
/*
 that code mean when width screen > 1200 h1 will be font size 20
*/
 double width = MediaQuery.of(context).size.width;
   if(width < 1200){
       TBIBFontStyle.h1=TBIBFontStyle.h1.copyWith(fontSize:20); 
       // or remove default style
       TBIBFontStyle.h1 = TextStyle(fontSize: 20);
         // when use useCastomFontSize is mean use any h1 to h6 changed
       TBIBFontStyle.fontResponsive(width,useCastomFontSize: true); // deprecated
    }

if make useCastomFontSize true you should use hotRestart not reload sorry for this issues

2
likes
120
pub points
43%
popularity

A Package for flutter you can control your font like bootstrap 5 with google font.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, google_fonts

More

Packages that depend on tbib_style